How to Upload Large Files onto SharePoint using REST API and JQuery

Question

I'm developing a web application built on top of SharePoint 2013 using HTML, JavaScript and JQuery but I'm having trouble trying to figure out how I can upload large files onto a SharePoint Document Library. I already know how to upload files that are <= 1.5 MB using JSOM but I need to upload files larger than that. I came across this documentation:

https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/upload-a-file-by-using-the-rest-api-and-jquery?redirectedfrom=MSDN#running-the-code-examples

but I get errors at

appWebUrl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
hostWebUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

>> Cannot read property 'split' of undefined

and a

403 FORBIDDEN

To fix the first issue, I tried

var hostUrl     = _spPageContextInfo.siteAbsoluteUrl;
var appweburl   = _spPageContextInfo.webAbsoluteUrl;

but it gives me an error saying _spPageContextInfo is undefined.

To attempt fixing the 403 FORBIDDEN error, I tried changing

'X-RequestDigest': jQuery('#__REQUESTDIGEST').val()

to

'Authorization': 'Bearer '+ digest

but it prompts me to log into SharePoint with a username and password. When I enter in my info, nothing happens.

I'm not sure if this will help but my script is in this order:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src=".../_layouts/1033/init.js"></script>
    <script type="text/javascript" src=".../_layouts/sp.core.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/SP.RequestExecutor.js"></script>

Answer 1

The following example code for your reference.

<input id="inputFile" type="file" multiple="multiple"/>
<input id="uploadDocumentButton" type="Button" value="Upload Document"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var siteUrl="http://sp2013/sites/team";
var libraryTitle="DL";
$(function(){
    var formDigestValue=getFormDigestValue();
    $("#uploadDocumentButton").click(function () {
        if (document.getElementById("inputFile").files.length === 0) {
            alert("Select a file!");
            return;
        }
        for(var i = 0; i < document.getElementById("inputFile").files.length; i++){         
            var file = document.getElementById("inputFile").files[i];
            uploadFileSync(libraryTitle, file.name, file,formDigestValue);
        }
        alert("upload complete.");      
    });     
});
function uploadFileSync(folderUrl, filename, file,formDigestValue){
     var reader = new FileReader();
     reader.onloadend = function(evt){
         if (evt.target.readyState == FileReader.DONE){
            var buffer = evt.target.result;
            var completeUrl =siteUrl+ "/_api/web/GetFolderByServerRelativeUrl('"+folderUrl+"')/Files/add(url='" + filename + "',overwrite=true)";
            $.ajax({
                url: completeUrl,
                type: "POST",
                data: buffer,
                async: false,
                processData: false,
                headers: {
                    "accept": "application/json;odata=verbose",
                    "X-RequestDigest": formDigestValue,
                    "content-length": buffer.byteLength
                },
                complete: function (data) {
                    //alert("upload complete.");
                    //console.log(data.responseJSON.d.ServerRelativeUrl);
                },
                error: function (err) {
                    //alert('failed');
                }
            }); 
        }
     };
     reader.readAsArrayBuffer(file);
}
function getFormDigestValue(){
    var digest="";
    $.ajax({
        url: siteUrl+"/_api/contextinfo",
        method: "POST",
        async:false,
        headers: { "Accept": "application/json; odata=verbose" },
        success:function(data){
            digest = data.d.GetContextWebInformation.FormDigestValue;   
        },
        error:function(data){
            console.log("error getting the digest value")
        }
    });
    return digest;
}
</script>

Answer 2

I would recommend using the postman tool, do a sample big file upload to SharePoint, then generate the equivalent code for the success upload, then use that code in your actual script or code file.

Here is details article how to work with postman tool :

https://global-sharepoint.com/sharepoint-online/in-4-steps-access-sharepoint-online-data-using-postman-tool/