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.


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>
<img src=""></img>
<p>Access Token: <input type="text" id="access_token" value=""></p>
<input type="file" id="myFile">
	<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>
function createDocument(){
	var formData = new FormData();
	formData.append("file", document.getElementById("myFile").files[0]);

	    "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();"POST", "");
	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 = ''+ JSON.parse(xhr.response).id;
			   document.getElementById("docURL").innerHTML = ''+ JSON.parse(xhr.response).id;

function checkStatus(){
	var doc_id = JSON.parse(document.getElementById("responseCreate").innerText).id;
	var xhr = new XMLHttpRequest();"GET", ""+ doc_id );
	xhr.setRequestHeader("Authorization", "Bearer " + document.getElementById("access_token").value);
    xhr.onload = function() {
			   document.getElementById("responseStatus").innerHTML = xhr.responseText;

function sendDoc(){
	var doc_id = JSON.parse(document.getElementById("responseCreate").innerText).id;
	var xhr = new XMLHttpRequest();"POST", ""+ 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}