I’m using createFile() method of SharepointPlus 5.2 js library to upload a file to a SharePoint 2013 library. It works perfect on most of the SP libraries. But on newly created SP libraries it throws an error (the file content is required) on first click, and then makes a proper upload on the second click. How to solve this issue?
The Header section includes:
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <script type="text/javascript" src="/_layouts/15/init.js"></script> <script type="text/javascript" src="/_layouts/15/core.js"></script> <script type="text/javascript" src="/_layouts/15/1049/strings.js"></script> <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script> <script type="text/javascript" src="/SiteAssets/_js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/SiteAssets/_js/bootstrap.min.js"></script> <script type="text/javascript" src="/SiteAssets/_js/sharepointplus-5.2.min.js"></script>
The HTML body:
<div data-role="form" class="container form"> <div data-field="Title"> <label class="form_label required">Title:</label><br> <input class="form_field required" value=""></input> </div> <div id="fileUploadControl" > <label class="form_label required">Document selection:</label><br/> <input id="fileUploadInput" class="form_field" type="file"/> </div> <hr> <div class="btn_panel"> <input type="button" class="btn" id="save_btn" name="Save" value="Save" onclick="_uploadFile();"> <input type="button" class="btn" id="cancel_btn" name="Cancel" value="Cancel"> </div> </div>
The JS function:
function _uploadFile() { var Title = $ ('div[data-field="Title"] input').val(); var files = document.querySelector('#fileUploadInput').files; files = Array.prototype.slice.call(files); // read the files Promise.all(files.map(function(file) { return new Promise(function(prom_res, prom_rej) { // use fileReader var fileReader = new FileReader(); fileReader.onloadend = function(e) { file.content = e.target.result; prom_res(file); } fileReader.onerror = function(e) { prom_rej(e.target.error); } fileReader.readAsArrayBuffer(file); }); })).then(function(files) { // upload files return Promise.all(files.map(function(file) { return $ SP().list("8D5132D2-A458-4961-BCD6-FFD9CE964C0F").createFile({ //Doc lib UID content:file.content, filename:file.name, fields:{ "Title":Title } }); })) }).then(function(file) { alert(file[0].Name+" has been uploaded"); console.log("Document " + file[0].Name+" has been uploaded to the Outgoing documents library"); }, function(error) { console.log("Error: ",error); }); }
The error in Firefox console is
uncaught exception: [SharepointPlus ‘createFile’]: the file content is required.
Debugging the file object contents shows that it exists (the size in bytes is shown). Error handler doesn’t return an error text message. On the second click on the same form (without page refresh) uploads the file and gives success message. I’m stuck, if it is a SharePoint, JQuery or SharepointPlus issue, or some conflict. Normally, the file upload from the first click is expected as the same code works on other existing libraries.
