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
