<!DOCTYPE html>
<html>
<head>
<title>Upload file</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- A Dummy form to display a file input field.
You can even select multiple files and hit the upload button. -->
<input id="getFile" type="file" /><br />
<input id="addFileButton" type="button" value="Upload" onclick="uploadFile()" />
<!-- The main JS script -->
<script>
function uploadFile() {
//Storing the name of the document library in which you want to upload your files.
var serverRelativeUrlToFolder = 'Invoices';
// Getting the files from the form
var fileInput = $('#getFile');
//Storing the file name
var fileName = fileInput.files.name;
// Lets count how many files are being uploaded.
var fileLength = fileInput.files.length;
//Getting the SharePoint default URL of your website.
var serverURL = _spPageContextInfo.webAbsoluteUrl;
var filesUploaded = 0;
/*Looping through all the files uploaded and storing them inside the
document library. */
for (i = 0; i < fileLength; i++) {
// Getting the file in a string buffer format to process.
var getFile = getFileBuffer(i);
// Working on the array buffer recieved from the above function call.
getFile.done((arrayBuffer, i) => {
// Function to add the file inside the document library.
var addFile = addFileToFolder(arrayBuffer, i);
/*On successfull completion of the function, display the alert message
of uploaded files.*/
addFile.done((file, status, xhr) => {
filesUploaded++;
// Checking if all the files are done uploading to the document library
if (fileLength === filesUploaded) {
alert("ALL THE FILES ARE UPLOADED SUCCESSFULLY!"); //If yes, ALERT Message!
/*Setting the values of form back to null so that we
can recieve other files to upload as well. */
$('#getFile').value = null;
fileLength = 0;
}
});
// Called if failed to add the file.
addFile.fail(onError);
});
// Called if failed to get the array buffer of the file.
getFile.fail(onError);
}
// Function to get the file as an array buffer.
function getFileBuffer(i) {
var deferred = jQuery.Deferred();
// Initializing a new file reader
var reader = new FileReader();
// Resolving the promise if satisfied.
reader.onloadend = function (e) {
deferred.resolve(e.target.result, i);
}
// Rejecting the promise if any error.
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
/* Function to convery file into array buffer,
it returns a promise.*/
reader.readAsArrayBuffer(fileInput.files[i]);
return deferred.promise();
}
// Funtion to add the file to the Document library on SharePoint.
function addFileToFolder(arrayBuffer, i) {
var index = i; //Getting the current file context
var fileName = fileInput.files[index].name; //Getting the file name.
// Constructing the endpoint.
var DLEndpoint = String.format(
"{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" +
"/add(overwrite=true, url='{2}')",
serverURL, serverRelativeUrlToFolder, fileName);
// Send the request and return the response.
return $.ajax({
url: DLEndpoint,
type: "POST",
data: arrayBuffer,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
"content-length": arrayBuffer.byteLength
}
});
}
// A fcuntion to display error messages.
function onError(error) {
alert(error.responseText);
}
}
</script>
</body>
</html>