Using REST API to upload Multiple Files to Sharepoint Document library
I’m going to show you how you can upload multiple files to document library using REST
Youtube Link
Html
............................................................................................................................................
<div class="div">
<input id="getFile" multiple="multiple" type="file"/>
<input id="addFileButton" type="button" value="Upload" onclick="uploadnewfile()"/>
</div>
..............................................................................................................................................
JS
function uploadnewfile() {
// Define the folder path for this example.
var serverRelativeUrlToFolder = 'Resume';
// Get test values from the file input and text input page controls.
var fileInput = $('#getFile');
var fileName = fileInput[0].files[0].name;
var fileCount = fileInput[0].files.length;
// Get the server URL.
var serverUrl = _spPageContextInfo.webAbsoluteUrl;
var filesUploaded = 0;
for (var i = 0; i < fileCount; i++) {
// Get the local file as an array buffer.
var getFile = getFileBuffer(i);
getFile.done(function (arrayBuffer, i) {
// Add the file to the SharePoint folder.
var addFile = addFileToFolder(arrayBuffer, i);
addFile.done(function (file, status, xhr) {
filesUploaded++;
if (fileCount == filesUploaded) {
alert("All files uploaded successfully");
$("#getFile").value = null;
filesUploaded = 0;
}
});
addFile.fail(onError);
});
getFile.fail(onError);
}
// Get the local file as an array buffer.
function getFileBuffer(i) {
var deferred = jQuery.Deferred();
var reader = new FileReader();
reader.onloadend = function (e) {
deferred.resolve(e.target.result, i);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(fileInput[0].files[i]);
return deferred.promise();
}
// Add the file to the file collection in the Shared Documents folder.
function addFileToFolder(arrayBuffer, i) {
var index = i;
// Get the file name from the file input control on the page.
var fileName = fileInput[0].files[index].name;
// Construct the endpoint.
var fileCollectionEndpoint = String.format(
"{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" +
"/add(overwrite=true, url='{2}')",
serverUrl, serverRelativeUrlToFolder, fileName);
// Send the request and return the response.
// This call returns the SharePoint file.
return jQuery.ajax({
url: fileCollectionEndpoint,
type: "POST",
data: arrayBuffer,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
"content-length": arrayBuffer.byteLength
}
});
}
}
// Display error messages.
function onError(error) {
alert(error.responseText);
}
