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.
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: </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.