OL Learn

PDF document from COTG form

Hi all,

I’m looking to add a file upload to a COTG form specifically for pdf files.
Is it possible to do this cleanly? I was thinking of encoding the PDF as Base64 and decoding it in workflow.

Any tips would be appreciated.

I did something similar a while back.

This was my HTML:

<form id="UploadPO" enctype="application/x-www-form-urlencoded" method="post" action="https://<workflow server>/action" data-validation-method="browser">
    <input id="fileInput" class="uploadInputs" name="fileInput" style="color:#ffffff;" type="file" accept="application/pdf">
    <div class="introTitle">
        Please upload your purchase order in PDF format 
    </div>
    <div id="uploadBox">
        <label id="fileInputLbl">Purchase order PDF:&nbsp; </label>
        <div>
            <button id="browseBtn" class="uploadInputs" name="browseBtn" type="button">Browse...</button>
            <label id="fileSelected"></label>
        </div>
    </div>
    </div>
    <div class="btnSubmitContainer">
        <button id="btnSubmitUpload" class="btnSubmit" value="submit" name="btnSubmit" disabled="disabled" type="submit">Submit </button>
    </div>
</form>

and this was my javascript which validated that the file was a PDF:

/*********************************************************************************
 *********************************************************************************
								MAIN
 *********************************************************************************
 ********************************************************************************/
$(document).ready(function(){

/********************************************************************
 * Click on browse button trigger the click on hidden type=file input
 *******************************************************************/
$("#browseBtn").on('click',function(){
	$('#fileInput').click();
});

/********************************************************************
 * When a file as been selected
 *******************************************************************/
$('#fileInput').on('change',function(){
    var file = $("#fileInput").prop("files")[0]; //get the file

   	if (file.name.indexOf(".pdf") < 0){
    	alert("You can only select .PDF files");
      	$("#fileInput").val("");
		$('#fileSelected').text("");
   	}else{
    	var reader = new FileReader(); 
   		reader.readAsText(file, "UTF-8");
    	reader.onload = function (evt) {  //When file is loaded.
					    	var fileContent = evt.target.result; //event.target.result is the file content
					        if(fileContent.substr(0,5) === "%PDF-"){
								var arrayLength = $('#fileInput').val().split('\\').length;
								$('#fileSelected').text($('#fileInput').val().split('\\')[arrayLength-1]);
					        }else{
						    	alert("The file selected doesn't appear to be a valid PDF file");
					   	   		$("#fileInput").val("");
					   	   		$('#fileSelected').text("");
				        	}
    					}
    }
});

Hope that helps.