While Uploading Multiple Files with two upload control , want some Progress bar or any loader type at time of uploading moment.
As at the time of uploading, user don't get any notification that his file is still uploading.
Note : i am using two control for uploading
Plz suggest in the below code.
var ItemID=newItem.get_id();
//createfolderStructure(ItemID);
var elementId1=$("#PERSONAL0id").val();
var elementId2=$("#PERSONAL1id").val();
if(elementId1!="")
{
controle1="Y";
}
if(elementId2!="")
{
controle2="Y";
}
if(controle1=="Y")
{
var Control="P";
var Flag1="1";
uploadMFBySearch(ItemID,Control,Flag1);
}
if(controle2=="Y")
{
var Control="S";
var Flag1="2";
if(document.getElementById("PERSONALSid").files.length > 0){
uploadMFBySearch(ItemID,Control,Flag1);
}
}
//debugger;
//alert(ItemID);
var serverRelativeUrlToFolder = 'docLibrary/';
var fileInput = jQuery('#PERSONAL'+Control+'id');
var newName ="mulDoc";
var docType="muldocument";
var filerename="muldocument";
var fileCount = fileInput[0].files.length;
var serverUrl = _spPageContextInfo.webAbsoluteUrl;
var filesUploaded = 0;
for (var i = 0; i < fileCount; i++) {// Initiate method calls using jQuery promises. // Get the local file as an array buffer.
var getFile = getFileBufferMF(i);
getFile.done(function (arrayBuffer, i) { // Add the file to the SharePoint folder.
var addFile = addFileToFolderMF(arrayBuffer, i,ItemID);
addFile.done(function (file, status, xhr) {//Get ID of File uploaded //mFclear();
var getfileID =getItem(file.d.ListItemAllFields.__deferred.uri);//var getfileID =getItem(file.d); //getListItem(file.d.ListItemAllFields.__deferred.uri);//getItem(file.d);
getfileID.done(function (fResult) {
var colObjectMF = new Object();
colObjectMF["DocumentCategory"] = "yo";//var changeItem = updateFileMetadataMF(libraryName, fResult.d, colObject);
var changeItem = updateFileMetadataMF(fResult.d.__metadata,docType,newName,filerename,i,fileInput,ItemID,Control,Flag1);
// alert(newName);
changeItem.done(function (result) {
filesUploaded++;
//alert("HI");
if (fileCount == filesUploaded) {
//alert("All files uploaded successfully");
filesUploaded = 0;
if( document.getElementById("PERSONALSid").files.length == 0){
alert("Your Request has been Successfully Submitted! Request No: 100"+ItemID);
window.location.reload();
}
else {
//alert(Flag1);
if(Flag1=="2"){
alert("Your request has been successfully submitted! Request No: 100"+ItemID);
window.location.reload();
}
}
//ClearPersonalMF(Control);
}
});
changeItem.fail(function (result) {
});
}, function () { });
});
addFile.fail(onErrorMF);
});
getFile.fail(onErrorMF);
}
//This function will return the id of item uploaded.
function getItem(fileListItemUri) {
return jQuery.ajax({
url: fileListItemUri,
type: "GET",
headers: { "accept": "application/json;odata=verbose" }
});
}
function getFileBufferMF(i) {// Get the local file as an array buffer.
var deferred = jQuery.Deferred();
var reader = new FileReader();
reader.onloadend = function (e) {deferred.resolve(e.target.result, i);}
reader.onerror = function (e) {deferred.reject(e.target.error);}
reader.readAsArrayBuffer(fileInput[0].files[i]);
return deferred.promise();
}
function addFileToFolderMF(arrayBuffer, i,ItemID) { // Add the file to the file collection in the Shared Documents folder.
var index = i;
fileNameMF1 = fileInput[0].files[index].name;
fileNameMF2="100"+ItemID+fileNameMF1;
// alert(fileNameMF2);
//fileNameMF.push(fileInput[0].files[index].name);// Get the file name from the file input control on the page. // Construct the endpoint.
var fileCollectionEndpoint = String.format("{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files/add(overwrite=true, url='{2}')",serverUrl, serverRelativeUrlToFolder, fileNameMF2);
// Send the request and return the response.// This call returns the SharePoint file.
return jQuery.ajax({
url: fileCollectionEndpoint,
type: "POST",
data: arrayBuffer,
//async:false,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
"content-length": arrayBuffer.byteLength
}
});
}
}
function onErrorMF(error) {
console.log("mf:"+error.responseText);
//alert("mf:"+error.responseText);
}
function updateFileMetadataMF(item,docType,newName,filerename,i,fileInput,ItemID,Control) {
//alert("updateFileMetadataMF");
//debugger;
//var dt = new Date;
// var f1=filerename+"_"+fileInput[0].files[i].name.split('.')[0]+"_"+dt.format("dd_MMM_yyyy");
ItemID1="100"+ItemID;
// alert(ItemID1);
var body = String.format("{{'__metadata':{{'type':'{0}'}},'Title':'{1}','DocumentType':'{2}'}}",item.type,ItemID1,Control);
return jQuery.ajax({
url: item.uri,
type: "POST",
//async:false,
data: body,
headers: {
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
"content-type": "application/json;odata=verbose",
"content-length": body.length,
"IF-MATCH": item.etag,
"X-HTTP-Method": "MERGE"
}
});
return dfd.promise();
}
Shiv Sharma