Microsoft 365 – SharePoint Online – Uploading file using REST API – resolving error – code:-2130575251 Microsoft.SharePoint.SPException – The security validation for this page is invalid and might be corrupted. Please use your web browsers Back button to try your operation again

Hi All,

Greetings for the day!!! Today new issue 🙂 and Solution 🙂

Background

• For one of my project, I am working on document upload functionality using REST API – <WEB URL>/_api/Web/GetFolderByServerRelativeUrl(‘<DOCUMENT LIBRARY NAME>’)/Files/add(url='<FILE NAME>’)
• I have my respective JS file and HTML code
• I am using PnP Script Editor web part to reference the my HTML code and JS file
• PnP script editor webpart can be downloaded from – https://handsontek.net/Downloads/Power%20BI/pnp-script-editor.zip.
• I have extracted the “pnp-script-editor.zip” and uploaded package to my app catalog site as

• I am using “File” HTML input control for getting file from the file system and button to call “upuploadDocument” method which uses SharePoint REST API to upload document as

<input id = "documents" type = "file" multiple />

<button  id = "fileuploadbutton" type = "button" onclick = "uploadDocument()">Upload Document</button>

• Code referred in PnP script editor webpart

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://knowledgejunction1.sharepoint.com/SiteAssets/fileupload.js"></script>
<div>   <input id = "documents" type = "file" multiple />  
       <br/>   
        <div>       
           <button  id = "fileuploadbutton" type = "button" onclick = "uploadDocument()">Upload Document</button>
           </div>  
           </div>

• Few steps are
  • Getting all files from “File” HTML input control
  • Getting local file as array buffer

//uploadFile - file object - read from "File" HTML input control
function getFileArrayBuffer(uploadFile) {  
    //alert("getFileBuffer called");
 var deferred = jQuery.Deferred();
 var fileReader = new FileReader();
 fileReader.onloadend = function(e) {
     deferred.resolve(e.target.result);
 }
 fileReader.onerror = function(e) {
    //alert("Get file buffer failed");
     deferred.reject(e.target.error);
 }
 fileReader.readAsArrayBuffer(uploadFile);
 return deferred.promise();
}

• Once we have file array buffer, we will call our SharePoint REST API as
• We are using REST API – <WEB URL>/_api/Web/GetFolderByServerRelativeUrl(<DocumentLibray name>)/Files/add(url=<file name>)”

//uploadFile - file object - read from "File" HTML input control
var file = getFileArrayBuffer(fileObject);

// Adding file to SharePoint  
        file.done(function(fileArrayBuffer) {  
            $.ajax({  
                url: "https://knowledgejunction1.sharepoint.com/_api/Web/GetFolderByServerRelativeUrl('Demolibrary')/Files/add(url='PrashamSabadra_Speaker_.docx')",  
                type: "POST",  
                data: fileArrayBuffer,  
                processData: false,  
                async: false,  
                headers: {  
                    "accept": "application/json;odata=verbose",  
                    "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),  
                },  
                success: function(data) {  
                    alert("File uploaded successfully")
;
                },  
                error: function(error) {  
                    alert(error.responseText);
                }  
            });  
        });  
       }

• As we executing code, clicking on “Upload Document” we get an exception

Issue / Error

{“error”:{“code”:”-2130575251, Microsoft.SharePoint.SPException”,”message”:{“lang”:”en-US”,”value”:”The security validation for this page is invalid and might be corrupted. Please use your web browser’s Back button to try your operation again.”}}}

• This error generally occurs when we dont include request digest in request or missing or expired form digest
•  If we do not using OAuth to authorize our requests, we require the server’s request form digest value as the value of the X-RequestDigest header
• But I have already included request digest in request as

headers: {  
                    "accept": "application/json;odata=verbose",  
                    "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),  
                }

Solution

• We will acquire new form digest value by making a POST request – “/_api/contextinfo” – – “https://knowledgejunction1.sharepoint.com/_api/contextinfo”
• So updated code is

function getFormDigest(webUrl) {
    return $.ajax({
        url: webUrl + "/_api/contextinfo",
        method: "POST",
        headers: { "Accept": "application/json; odata=verbose" }
    });
}

return getFormDigest("https://knowledgejunction1.sharepoint.com").then(function (data) {
 //uploadFile - file object - read from "File" HTML input control
var file = getFileArrayBuffer(fileObject);

// Adding file to SharePoint  
        file.done(function(fileArrayBuffer) {  
            $.ajax({  
                url: "https://knowledgejunction1.sharepoint.com/_api/Web/GetFolderByServerRelativeUrl('Demolibrary')/Files/add(url='PrashamSabadra_Speaker_.docx')",  
                type: "POST",  
                data: fileArrayBuffer,  
                processData: false,  
                async: false,  
                headers: {  
                    "accept": "application/json;odata=verbose",  
                    "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),  
                },  
                success: function(data) {  
                    alert("File uploaded successfully")
;
                },  
                error: function(error) {  
                    alert(error.responseText);
                }  
            });  
        }); }

I hope this will help and will save time

Thanks for reading ! HAVE a FANTASTICE LEARNING AHEAD 🙂 LIFE IS BEAUTIFUL 🙂