Check out our complete how-to-guides, documentation, and resources below

Empowering developers to build document workflows in minutes.

CodePen - Create document from PDF upload

This is a code pen that shows how a PDF can be uploaded via the browser and sent.

Steps to create and send a document

We outline the core steps to create and send a document in on our API reference page. The core steps are as follows

  1. Call Create document
  2. Wait/check for document status to become document.draft
  3. Call Send endpoint

❗️

Access token required!

Your API token is like your username & password combined don't share it! In the below code pen it is recommended to insert it as an input instead of hard coding it in the javascript.

CodePen

This code should be used as an example only. There is no error handling or data validation.

Sample PDF

🚧

PDF -> PandaDoc Conversion

Please note we have 2 ways of converting PDF's into PandaDoc documents. The formats can be reviewed at the below links. The example does

  1. Form Fields
  2. Field Tags

Static File

Similar to the code pen this file can be saved and run from a web browser.

<!DOCTYPE html>
<html>
<img src="https://s3.amazonaws.com/awsmp-logos/PandaDoc.png"></img>
<br/>
<p>Access Token: <input type="text" id="access_token" value=""></p>
<input type="file" id="myFile">
<br/>
<p>
    <button onClick="createDocument()">Create Document from PDF upload</button >
        <p><a id='docURL' href="" target="_blank"></a></p>
        <p id="responseCreate"></p>
        <button onClick="checkStatus()">Check Document Status</button> --- check for status = document.draft before sending
        <p id="responseStatus"></p>
        <button onClick="sendDoc()">Send Document</button> --- after document is moved to draft status it can be sent
        <p id="responseSend"></p>
<p>
<script>
function createDocument(){
    
    var formData = new FormData();
    formData.append("file", document.getElementById("myFile").files[0]);

    formData.append("data",
    JSON.stringify({  
        "name": "Sample Document from PDF with Field Tags",
        "recipients": [  
            {  
                "email": "[email protected]",
                "first_name": "Jane",
                "last_name": "Roe"
            }
        ],
        "parse_form_fields": false
    }));

    var xhr = new XMLHttpRequest();
    
    xhr.open("POST", "https://api.pandadoc.com/public/v1/documents");
    xhr.setRequestHeader("Authorization", "Bearer " + document.getElementById("access_token").value);
    //This header is removed because we are letting the browser handle boundries and set content type appropriately. 
    //xhr.setRequestHeader("Content-Type", "multipart/form-data");
    
    xhr.onload = function() {
               document.getElementById("responseCreate").innerHTML = xhr.responseText;
               document.getElementById("docURL").href = 'https://app.pandadoc.com/a/#/document/v1/editor/'+ JSON.parse(xhr.response).id;
               document.getElementById("docURL").innerHTML = 'https://app.pandadoc.com/a/#/document/v1/editor/'+ JSON.parse(xhr.response).id;
           };
    xhr.send(formData);
}

function checkStatus(){
    
    var doc_id = JSON.parse(document.getElementById("responseCreate").innerText).id;
    var xhr = new XMLHttpRequest();
    
    xhr.open("GET", "https://api.pandadoc.com/public/v1/documents/"+ doc_id );
    xhr.setRequestHeader("Authorization", "Bearer " + document.getElementById("access_token").value);
    xhr.onload = function() {
               document.getElementById("responseStatus").innerHTML = xhr.responseText;
           };
    xhr.send();
    
}

function sendDoc(){
    
    var doc_id = JSON.parse(document.getElementById("responseCreate").innerText).id;
    var xhr = new XMLHttpRequest();
    
    xhr.open("POST", "https://api.pandadoc.com/public/v1/documents/"+ doc_id + "/send");
    xhr.setRequestHeader("Authorization", "Bearer " + document.getElementById("access_token").value);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onload = function() {
               document.getElementById("responseSend").innerHTML = xhr.responseText;
           };
           let body = {
                    "message": "Hello! This document was sent from the PandaDoc API.",
               "silent": false}    
    xhr.send(JSON.stringify(body));
    
}



</script>
</body>
</html>

Updated 2 years ago

CodePen - Create document from PDF upload


This is a code pen that shows how a PDF can be uploaded via the browser and sent.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.