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
- Call Create document
- Wait/check for document status to become document.draft
- 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.
See the Pen Create and Send PandaDoc with PDF upload by Scott Bilodeau (@scottbilodeau) on CodePen.
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
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 4 months ago