I follow this Upload a file by using the REST API and jQuery and this is code

function uploadFile(){ $("#statusTxt").text(""); var serverRelativeUrlToFolder = 'Shared Documents';var fileInput = jQuery('#getFile'); var departMent = jQuery('#department option:selected').val(); var getItemId = null; var loader = null; var serverUrl = _spPageContextInfo.webAbsoluteUrl; // Initiate method calls using jQuery promises. // Get the local file as an array buffer. var getFile = getFileBuffer(); getFile.done(function (arrayBuffer) { // Add the file to the SharePoint folder. var addFile = addFileToFolder(arrayBuffer); addFile.done(function (file, status, xhr) { //console.log(file.d.ListItemAllFields.__deferred.uri); //Get the list item that corresponds to the uploaded file. var getItem = getListItem(file); getItem.done(function (listItem, status, xhr) { getItemId = listItem.d.ID; console.log(getItemId); // Change the display name and title of the list item. var changeItem = updateListItem(listItem.d.__metadata); changeItem.done(function (data, status, xhr) { $("#statusTxt").text("up load file complete"); }); changeItem.fail(onError); }); getItem.fail(onError); }); addFile.fail(onError); }); getFile.fail(onError); // Get the local file as an array buffer. function getFileBuffer() { var deferred = jQuery.Deferred(); var reader = new FileReader(); reader.onloadend = function (e) { deferred.resolve(e.target.result); } reader.onerror = function (e) { deferred.reject(e.target.error); } reader.readAsArrayBuffer(fileInput[0].files[0]); return deferred.promise(); } // Add the file to the file collection in the Shared Documents folder. function addFileToFolder(arrayBuffer) { //console.log(arrayBuffer); // Get the file name from the file input control on the page. var parts = fileInput[0].value.split('\\'); var fileName = parts[parts.length - 1]; // Construct the endpoint. var fileCollectionEndpoint = String.format( "{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" + "/add(overwrite=true, url='{2}')", serverUrl, serverRelativeUrlToFolder, fileName); console.log(fileCollectionEndpoint); // Send the request and return the response. // This call returns the SharePoint file. return jQuery.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; loader = parseInt(percentComplete * 100); $("progress").val(loader);
} }, false);
return xhr; }, url: fileCollectionEndpoint, type: "POST", data: arrayBuffer, processData: false, headers: { "accept": "application/json;odata=verbose", "content-type": "application/json;odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() } }); } // Get the list item that corresponds to the file by calling the file's ListItemAllFields property. function getListItem(fileListItemUri) { console.log(fileListItemUri); // Send the request and return the response. return jQuery.ajax({ url: fileListItemUri.d.ListItemAllFields.__deferred.uri, type: "GET", headers: { "accept": "application/json;odata=verbose" } }); } // Change the display name and title of the list item. function updateListItem(itemMetadata) { //console.log(itemMetadata); // Define the list item changes. Use the FileLeafRef property to change the display name. // For simplicity, also use the name as the title. // The example gets the list item type from the item's metadata, but you can also get it from the // ListItemEntityTypeFullName property of the list. //console.log(department); var body = String.format("{{'__metadata':{{'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}','Department':'{3}'}}", itemMetadata.type, departMent+""+getItemId, departMent+""+getItemId, departMent); //console.log("body : "+body); // Send the request and return the promise. // This call does not return response content from the server. return jQuery.ajax({ url: itemMetadata.uri, type: "POST", data: body, headers: { "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(), "content-type": "application/json;odata=verbose", "IF-MATCH": "*", "X-HTTP-Method": "MERGE" } }); } } // Display error messages. function onError(error) { console.log(error.responseText); $("#statusTxt").text("can not upload file"); } }

When I upload ะwice it's work perfect but when I upload to thrice it show item ID of number 2 I do not know why. anyone can fix this please help thank in advance

this image show result when uploading thrice enter image description here


I think you tried to upload the same document which you uploaded the second time. Try with a different document or different document name

  • Yeah but I changed file name every time that I uploaded – Kem Bardly Mar 2 '17 at 10:30
  • i copy code from link in my question and I got same result – Kem Bardly Mar 2 '17 at 10:32
  • It is working for me.Can you check the library if 3 files are uploaded or only 2 – rjv91 Mar 2 '17 at 11:16
  • I have checked. it working when I upload a different document but if I want to update my old document so I edit it and upload again but function getListItem return old uri. – Kem Bardly Mar 2 '17 at 11:20
  • when I delete document in library and upload again console will show the file was deleted by someone – Kem Bardly Mar 2 '17 at 11:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.