I've been working on an upload progress bar. The problem is, I can't seem to clean up the motion. It's jumpy, and I think it comes down to not understanding the finer details up the the upload process. What can I do to make this motion smoother?
This script has two movements, progressBarDisp is the target for the upload itself. Then it has a second bar for ajax upon files being processed and receiving a confirmation from the server.
My jumpy item is the progressBarDisp - I can't figure out why it's so jumpy.
$('input[type=file].dicomUpload').on("change", function() {
var files = $(this)[0].files;
//console.log(files);
var theCase = $(this).parent().find('input[name="theCase"]');
var casenum = $(this).parent().find('input[name="casenum"]');
var phase = $(this).parent().find('input[name="phase"]');
var vidnum = $(this).parent().find('input[name="vidNum"]');
processUpload(theCase, casenum, phase, files, vidnum);
});
function processUpload(theCase, casenum, phase, myfiles, vidnum) {
//console.log("Processing: "+vidnum.val());
var progressBox = $('#uploadDicomBox' + casenum.val() + '-' + vidnum.val()).find(".uploadprogress");
progressBox.slideDown();
var progressBarDisp = progressBox.find(".progressBarDisp");
var progressBarComp = progressBox.find(".progressBarComp");
var progressBarText = progressBox.find(".progressText");
progressBarText.text('Processing Upload.');
//run this in two parts - get the file sizes of the acceptable file types
var nBytes = 0;
var uploadedBytes = 0;
var completeBytes = 0;
var tempList = new Array();
$.each(myfiles, function(i, file) {
//console.log(file.name+" -- "+file.name.indexOf("."));
// do any file checking logic here
tempList.push(file);
});
myfiles = tempList;
$.each(myfiles, function(i, file) {
nBytes += file.size;
});
console.log("beginning uploads: " + theCase.val() + ", " + casenum.val() + ", " + phase.val() + ", " + nBytes + ", " + vidnum.val());
//console.log(myfiles);
if (myfiles.length < 1) {
progressBarText.text('No valid file types selected.');
}
//tracking variable
var maxup = 0;
$.each(myfiles, function(i, file) {
//file sizes are going to be an issue for me, these need to be individual file uploads
progressBarText.text('Upload Progress');
// Create a FormData object
var formData = new FormData();
formData.append('casenum', casenum.val());
formData.append('phase', phase.val());
formData.append('theCase', theCase.val());
formData.append('vidnum', vidnum.val());
formData.append('file', file);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
maxup = Math.max(maxup, evt.loaded);
var percentComplete = (maxup / evt.total) * 100;
//Do something with upload progress here
//console.log("Upload Status: "+evt.loaded+" / "+evt.total+" -- "+((evt.loaded/evt.total)*100)+"%");
progressBarDisp.width(percentComplete + '%');
progressBarText.text('Upload Progress: Uploading ' + myfiles.length + ' files');
if (percentComplete == 100) {
progressBarText.text('Upload Progress: Upload Complete. Now Processing.');
}
}
}, false);
return xhr;
},
type: 'POST',
url: BASE_URL,
cache: false,
contentType: false,
processData: false,
data: formData,
beforeSend: function(xhr) {
uploadedBytes += file.size;
//progressBarDisp.width(((uploadedBytes/nBytes)*100)+'%');
progressBarText.text('Upload Progress: Uploading ' + myfiles.length + ' files');
},
success: function(result) {
console.log(result);
var resJSON = JSON.parse(result);
if (resJSON.status == "success") {
completeBytes += file.size;
processed = Math.round((completeBytes / nBytes) * myfiles.length);
progressBarComp.width(Math.round((processed / myfiles.length) * 100) + '%');
progressBarText.text('Upload Progress: Processed ' + (processed) + ' of ' + myfiles.length + ' files');
/*if(myfiles.length == (i+1)){
progressBarText.text('Upload Progress: Complete');
}
else{
progressBarText.text('Upload Progress: Uploaded '+(i+1)+' of '+myfiles.length+' files');
}
*/
}
},
error: function(err) {
//console.log(err);
uploadedBytes += file.size;
progressBarDisp.width(((uploadedBytes / nBytes) * 100) + '%');
}
});
});
}
Related
I am trying to understand how the batch rest calls work.
I could not find any simple example on the internet. I have found the examples from https://github.com/andrewconnell/sp-o365-rest but can't run these examples or I have no idea how yet. I am guessing you have to deploy the app to a sharepoint site.
Given that, I am just looking for the simplest example of a add list item and update list item in bulk/batch. Also if anyone knows how I can make the app from that git to run will be really appreciated.
Thanks.
The github project is a add-in project so you need deploy the add-in project, then you can use it.
You could check below script from here.
My test result in this thread
(function () {
jQuery(document).ready(function () {
jQuery("#btnFetchEmployees").click(function () {
addEmployees();
});
});
})();
function addEmployees() {
var employeesAsJson = undefined;
employeesAsJson = [
{
__metadata: {
type: 'SP.Data.EmployeeInfoListItem'
},
Title: 'Geetanjali',
LastName: 'Arora',
Technology: 'SharePoint'
},
{
__metadata: {
type: 'SP.Data.EmployeeInfoListItem'
},
Title: 'Geetika',
LastName: 'Arora',
Technology: 'Graphics'
},
{
__metadata: {
type: 'SP.Data.EmployeeInfoListItem'
},
Title: 'Ashish',
LastName: 'Brajesh',
Technology: 'Oracle'
}
];
addEmployeeInfoBatchRequest(employeesAsJson);
}
function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
});
return uuid;
};
function addEmployeeInfoBatchRequest(employeesAsJson) {
// generate a batch boundary
var batchGuid = generateUUID();
// creating the body
var batchContents = new Array();
var changeSetId = generateUUID();
// get current host
var temp = document.createElement('a');
temp.href = _spPageContextInfo.webAbsoluteUrl;
var host = temp.hostname;
// iterate through each employee
for (var employeeIndex = 0; employeeIndex < employeesAsJson.length; employeeIndex++) {
var employee = employeesAsJson[employeeIndex];
// create the request endpoint
var endpoint = _spPageContextInfo.webAbsoluteUrl
+ '/_api/web/lists/getbytitle(\'EmployeeInfo\')'
+ '/items';
// create the changeset
batchContents.push('--changeset_' + changeSetId);
batchContents.push('Content-Type: application/http');
batchContents.push('Content-Transfer-Encoding: binary');
batchContents.push('');
batchContents.push('POST ' + endpoint + ' HTTP/1.1');
batchContents.push('Content-Type: application/json;odata=verbose');
batchContents.push('');
batchContents.push(JSON.stringify(employee));
batchContents.push('');
}
// END changeset to create data
batchContents.push('--changeset_' + changeSetId + '--');
// batch body
var batchBody = batchContents.join('\r\n');
batchContents = new Array();
// create batch for creating items
batchContents.push('--batch_' + batchGuid);
batchContents.push('Content-Type: multipart/mixed; boundary="changeset_' + changeSetId + '"');
batchContents.push('Content-Length: ' + batchBody.length);
batchContents.push('Content-Transfer-Encoding: binary');
batchContents.push('');
batchContents.push(batchBody);
batchContents.push('');
// create request in batch to get all items after all are created
endpoint = _spPageContextInfo.webAbsoluteUrl
+ '/_api/web/lists/getbytitle(\'EmployeeInfo\')'
+ '/items?$orderby=Title';
batchContents.push('--batch_' + batchGuid);
batchContents.push('Content-Type: application/http');
batchContents.push('Content-Transfer-Encoding: binary');
batchContents.push('');
batchContents.push('GET ' + endpoint + ' HTTP/1.1');
batchContents.push('Accept: application/json;odata=verbose');
batchContents.push('');
batchContents.push('--batch_' + batchGuid + '--');
batchBody = batchContents.join('\r\n');
// create the request endpoint
var endpoint = _spPageContextInfo.webAbsoluteUrl + '/_api/$batch';
var batchRequestHeader = {
'X-RequestDigest': jQuery("#__REQUESTDIGEST").val(),
'Content-Type': 'multipart/mixed; boundary="batch_' + batchGuid + '"'
};
// create request
jQuery.ajax({
url: endpoint,
type: 'POST',
headers: batchRequestHeader,
data: batchBody,
success: function (response) {
var responseInLines = response.split('\n');
$("#tHead").append("<tr><th>First Name</th><th>Last Name</th><th>Technology</th></tr>");
for (var currentLine = 0; currentLine < responseInLines.length; currentLine++) {
try {
var tryParseJson = JSON.parse(responseInLines[currentLine]);
$.each(tryParseJson.d.results, function (index, item) {
$("#tBody").append("<tr><td>" + item.Title + "</td><td>" + item.LastName + "</td><td>" + item.Technology + "</td></tr>");
});
} catch (e) {
}
}
},
fail: function (error) {
}
});
}
I have just javascript and css. But want to show the uploaded file name
Googled a lot
So I have this as css:
.metadata .filename{
font-size: 10px;
color: red;
display: inline-block;
}
and this is the js code:
var messagetext = '';
messagetext += '<span class="metadata">' + '<span class="filename">' + file.name + '</span>';
But if I do a console.log(file.name) then I see the name of the uploaded file in the console.
But I dont see it in the view.
Thank you
this is the whole function:
$('body').on('change', '#upload-input', function () {
var halloText = 'file';
var files = $(this).get(0).files;
if (files.length > 0) {
// create a FormData object which will be sent as the data payload in the
// AJAX request
var formData = new FormData();
// loop through all the selected files and add them to the formData object
for (var i = 0; i < files.length; i++) {
var file = files[i];
var message = buildMessage(myUserId, new Date().toISOString(), '<div class="imagepreview"><canvas id="progress' + imagecounter + '" width="80" height="80"></canvas><img id="image' + imagecounter + '"/></div>', 'sent');
message.classList.add('imagesender');
message.classList.add('imagesender' + imagecounter);
conversation.appendChild(message);
//processImages();
conversation.scrollTop = conversation.scrollHeight;
var myCanvas = document.getElementById('progress' + imagecounter);
var circle = new ProgressCircle({
canvas: myCanvas,
});
var percentComplete = 0.65;
circle.addEntry({
minRadius: 30,
fillColor: 'rgba(0, 0, 0, 0.5)',
progressListener: function () {
return percentComplete; // between 0 and 1
}
});
circle.start(33);
var extn = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.id = imagecounter;
reader.onload = function (e) {
var imageid = imagecounter;
document.getElementById("image" + e.currentTarget.id).src = e.target.result;
};
reader.readAsDataURL(file);
} else {
// No filereader support... so no preview
}
}
imagecounter++;
// add the files to formData object for the data payload
formData.append('uploads[]', file, file.name);
}
formData.append('Token', SessionInfo.ImageToken);
formData.append('RoomId', currentRoom.RoomId);
dbgMessage(formData);
$.ajax({
url: apipath + '/devices/UploadData',
type: 'POST',
data: formData,
processData: false,
contentType: false,
done: function (data) {
},
error: function(jqXHR, textStatus, errorThrown ){
//show error as a message
var message = buildMessage(myUserId, new Date().toISOString(), jqXHR.responseText, 'error');
conversation.appendChild(message);
conversation.scrollTop = conversation.scrollHeight;
},
xhr: function () {
// create an XMLHttpRequest
var xhr = new XMLHttpRequest();
// listen to the 'progress' event
xhr.upload.addEventListener('progress', function (evt) {
if (evt.lengthComputable) {
// calculate the percentage of upload completed
percentComplete = evt.loaded / evt.total;
if (percentComplete == 1) {
var messagetext = '';
messagetext += '<span class="metadata">' + '<span class="filename">' + file.name + '</span>';
// Handle complete
$('.imagesender').hide();
dbgMessage('Upload complete ');
console.log(file.name);
}
}
}, false);
return xhr;
}
});
}
});
So that the file name will be visible in the html view.
if I do this:
$('.messagewrapper').append('<span class="metadata">' + '<span class="filename">' + file.name + '</span>');
Then it works only after I upload file.
But When I refresh the page the image file is not visible anymore
Like this:
if (percentComplete == 1) {
// Handle complete
$('.imagesender').hide();
dbgMessage('Upload complete ');
}
$('.messagewrapper').append("<p>"+ file.name+"</p>")
append based on id like this should work:
$('#messagewrapper').append("<p>"+ file.name+"</p>")
You will append this only when the file is uploaded because it is inside the if statement:
percentComplete = evt.loaded / evt.total;
if (percentComplete == 1){ //==1 means uploaded
//your append is here
So move it outside the if statement.
I have read a lot of already existing questions on uploading a file to azure storage directly from client-side/browser. The one I am implementing is from this blog by gaurav mantri. In this blog he splits the SAS url into path and query and then append file name to the path and then stiched the query again to it. I have SAS url which doesn't have any query. I just have url like this
This SAS url has the file name also appended in it. In the blog he appends blockId and blockList etc. Do it really need to do that? If not how should I make PUT request? Just using my SAS url would work?
Update: I have included query parameter (SAS token) as "URL?SAS-TOKEN". Now I am getting error like this
Error
dll.vendor.js:44368 PUT https://triggerbackendnormal.blob.core.windows.net/backend-media/a07d312c-6…Vhgoxw/NmD2AeSo4qVhBntrI04xJo1tsqfKJA/7bmQ%3D&comp=block&blockid=undefined 400 (Value for one of the query parameters specified in the request URI is invalid.)CORS
CORS Rules Setup in portal:
JS code:
handleFileSelect(e) {
var that = this
maxBlockSize = 256 * 1024;
currentFilePointer = 0;
totalBytesRemaining = 0;
files = e.target.files;
selectedFile = files[0];
console.log(selectedFile.name)
console.log(selectedFile.size)
console.log(selectedFile.type)
var fileSize = selectedFile.size;
if (fileSize < maxBlockSize) {
maxBlockSize = fileSize;
console.log("max block size = " + maxBlockSize);
}
totalBytesRemaining = fileSize;
if (fileSize % maxBlockSize == 0) {
numberOfBlocks = fileSize / maxBlockSize;
} else {
numberOfBlocks = parseInt(fileSize / maxBlockSize, 10) + 1;
}
console.log("total blocks = " + numberOfBlocks);
// $("#fileName").text(selectedFile.name);
// $("#fileSize").text(selectedFile.size);
// $("#fileType").text(selectedFile.type);
var baseUrl = 'https://example.blob.core.windows.net/backend-m/a07d312c-6e7a-4281-9e4f-050f5afc4609.mp4?sr=b&se=2017-05-04T15%3A07%3A30Z&sp=w&sv=2016-05-31&sig=SVhgoxw/NmD2AeSo4qVhBntrI04xJo1qfKJA/7bmQ%3D'
submitUri = baseUrl
console.log(submitUri);
this.uploadFileInBlocks();
}
//var fileContent = selectedFile.slice(currentFilePointer, currentFilePointer + maxBlockSize);
//currentFilePointer =+ maxBlockSize;
uploadFileInBlocks() {
if (totalBytesRemaining > 0) {
console.log("current file pointer = " + currentFilePointer + " bytes read = " + maxBlockSize);
var fileContent = selectedFile.slice(currentFilePointer, currentFilePointer + maxBlockSize);
var blockId = blockIdPrefix + this.pad(blockIds.length, 6);
console.log("block id = " + blockId);
blockIds.push(btoa(blockId));
reader.readAsArrayBuffer(fileContent);
currentFilePointer += maxBlockSize;
totalBytesRemaining -= maxBlockSize;
if (totalBytesRemaining < maxBlockSize) {
maxBlockSize = totalBytesRemaining;
}
} else {
this.commitBlockList();
}
}
commitBlockList() {
var uri = submitUri + '&comp=blocklist';
console.log(uri);
var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
for (var i = 0; i < blockIds.length; i++) {
requestBody += '<Latest>' + blockIds[i] + '</Latest>';
}
requestBody += '</BlockList>';
console.log(requestBody);
$.ajax({
url: uri,
type: "PUT",
data: requestBody,
beforeSend: function (xhr) {
//xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
//xhr.setRequestHeader('Content-Length', requestBody.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
},
error: function (xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
pad(number, length) {
var str = '' + number;
while (str.length < length) {
str = '0' + str;
}
return str;
}
render(){
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
// xhr.setRequestHeader('Content-Length', requestData.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
console.log(percentComplete)
this.uploadFileInBlocks();
},
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
};
return (
<label htmlFor='myInput'>
<input id="myInput" type="file" ref={(ref) => this.upload = ref} style={{visibility: 'hidden'}} onChange={this.handleFileSelect.bind(this)}/>
<FloatingActionButton
className="floatingButton"
backgroundColor='#fb802a'
onClick={(e) => this.upload.click() }>
<ContentAdd />
</FloatingActionButton>
</label>
)
}
I have SAS url which doesn't have any query. I just have url like this
'https://exapmplename.blob.core.windows.net/backend/a074281-9e4f-050f5afc4609.mp4'
This is not a SAS URL. It is simply a URL for the blob. A SAS URL has Shared Access Signature parameters like sig, se, sv etc. appended to the URL as querystring parameters. I would suggest you create a SAS URL and use that. In order to upload a blob, the SAS URL must have Write permission.
In the blog he appends blockId and blockList etc. Do it really need to
do that?
It depends! If you're uploading blob without splitting the file in blocks using Put Blob REST API, then you need not do that. However if you need to split the file into blocks and use Put Block and Put Block List REST API, then you have to do that.
If not how should I make PUT request?
If your file is small and have good Internet speed, then you really need not split the file in smaller chunks and upload a file in one go using Put Blob REST API.
For ReactJS, this is how it should be done
handleFileSelect(e) {
var that = this
maxBlockSize = 256 * 1024;
currentFilePointer = 0;
totalBytesRemaining = 0;
files = e.target.files;
selectedFile = files[0];
console.log(selectedFile.name)
console.log(selectedFile.size)
console.log(selectedFile.type)
var fileSize = selectedFile.size;
if (fileSize < maxBlockSize) {
maxBlockSize = fileSize;
console.log("max block size = " + maxBlockSize);
}
totalBytesRemaining = fileSize;
if (fileSize % maxBlockSize == 0) {
numberOfBlocks = fileSize / maxBlockSize;
} else {
numberOfBlocks = parseInt(fileSize / maxBlockSize, 10) + 1;
}
console.log("total blocks = " + numberOfBlocks);
// $("#fileName").text(selectedFile.name);
// $("#fileSize").text(selectedFile.size);
// $("#fileType").text(selectedFile.type);
var baseUrl = 'https://example.blob.core.windows.net/backend-media/e7581d7b-a59d-47eb-b8aa-6b6799179b36.mp4?sv=2016-05-31&sr=b&se=2017-05-09T18%3A26%3A07Z&sp=w&sig=TlS/a9RgVT/j7BHztjFZSF2L2skno3Sko%3D'
submitUri = baseUrl
console.log(submitUri);
this.uploadFileInBlocks();
}
loadEnd(evt){
var that = this;
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
// xhr.setRequestHeader('Content-Length', requestData.length);
},
success: function (data, status) {
console.log(data);
console.log("hi" + status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
console.log(percentComplete)
that.uploadFileInBlocks();
},
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
}
uploadFileInBlocks() {
if (totalBytesRemaining > 0) {
console.log("current file pointer = " + currentFilePointer + " bytes read = " + maxBlockSize);
var fileContent = selectedFile.slice(currentFilePointer, currentFilePointer + maxBlockSize);
var blockId = blockIdPrefix + this.pad(blockIds.length, 6);
console.log("block id = " + blockId);
blockIds.push(btoa(blockId));
reader.readAsArrayBuffer(fileContent);
reader.onloadend = this.loadEnd.bind(this);
currentFilePointer += maxBlockSize;
totalBytesRemaining -= maxBlockSize;
if (totalBytesRemaining < maxBlockSize) {
maxBlockSize = totalBytesRemaining;
}
} else {
this.commitBlockList();
}
}
commitBlockList() {
var uri = submitUri + '&comp=blocklist';
console.log(uri);
var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
for (var i = 0; i < blockIds.length; i++) {
requestBody += '<Latest>' + blockIds[i] + '</Latest>';
}
requestBody += '</BlockList>';
console.log(requestBody);
$.ajax({
url: uri,
type: "PUT",
data: requestBody,
beforeSend: function (xhr) {
//xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
//xhr.setRequestHeader('Content-Length', requestBody.length);
},
success: function (data, status) {
console.log(data);
console.log("hi" + status);
},
error: function (xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
pad(number, length) {
var str = '' + number;
while (str.length < length) {
str = '0' + str;
}
return str;
}
render(){
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
// xhr.setRequestHeader('Content-Length', requestData.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
console.log(percentComplete)
this.uploadFileInBlocks();
},
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
};
return (
I am trying to use the FileReader API to upload files to a server.
File uploading works well. Although I am uploading the file in chunks, but the memory used by the FormData object is not freed after the upload, that is uploading a large file crashes the browser.
Here's my code:
I was wondering what it is that I am doing wrong?
function uid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
function parseFile(file) {
var fileSize = file.size;
var chunkSize = 10 * 1024 * 1024; // bytes
var offset = 0;
var block = null;
var doUpload = null;
var sendEndSignal = null;
var id = uid();
var chunks = {};
var r = new FileReader();
var xhr = new XMLHttpRequest();
var fd = new FormData();
var foo = function (evt) {
}
block = function (_offset, length, _file) {
var blob = _file.slice(_offset, length + _offset);
r.onload = foo;
r.onloadend = (
function (file, id, off) {
return function (evt) {
if (evt.target.error == null) {
off += chunkSize;
if (off >= fileSize) {
console.log("Done reading file");
return;
}
var fnc = block;
doUpload(file, evt.target.result, id, Math.floor(off / chunkSize), chunks, chunkSize, block, off);
} else {
alert("Read error: " + evt.target.error);
return;
}
}
})(_file, id, _offset);
r.readAsDataURL(blob);
}
doUpload = function (file, data, id, chunk, chunks, chunkSize,nx,off) {
xhr = new XMLHttpRequest();
fd = new FormData();
fd.append(file.name + "-----" + id + "-----" + String(chunk), data);
xhr.open("post", "Handler1.ashx", true);
xhr.send(fd);
xhr.addEventListener('readystatechange',
function (e) {
if (this.readyState === 4) {
chunks[Math.floor(chunk)] = 1;
var cnt = 0;
var cntDone = 0;
for (var key in chunks) {
if (chunks.hasOwnProperty(key)) {
cnt++;
if (chunks[key] === 1)
cntDone += 1;
}
}
if (nx)
nx(off,chunkSize,file);
if (cnt === Math.ceil(file.size / chunkSize) && cnt === cntDone)
sendEndSignal(file, id, cnt - 1);
}
});
}
sendEndSignal = function (file, id, num) {
fd = new FormData();
xhr = new XMLHttpRequest();
fd.append("Done-----" + file.name + "-----" + id, num);
xhr.open("post", "Handler1.ashx", true);
xhr.send(fd);
}
block(offset, chunkSize, file);
}
Thank you.
Update:
I solved my problem using jquery post instead of XMLHttpRequest and FormData.
Here's What I have done:
<script type="text/javascript">
function uid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
function parseFile(file,index) {
var fileSize = file.size;
var chunkSize = 10 * 1024 * 1024; // bytes
var offset = 0;
var block = null;
var doUpload = null;
var sendEndSignal = null;
var id = uid();
var chunks = {};
var r = new FileReader();
var foo = function (evt) {
}
block = function (_offset, length, _file) {
var blob = _file.slice(_offset, length + _offset);
var div = document.getElementById("file-" + String(index));
div.innerHTML = div.innerHTML + "*";
r.onload = foo;
r.onloadend = (
function (file, id, off) {
return function (evt) {
if (evt.target.error == null) {
doUpload(file, evt.target.result, id, Math.floor(off / chunkSize), chunks, chunkSize, block, off,index);
} else {
alert("Read error: " + evt.target.error);
return;
}
}
})(_file, id, _offset);
r.readAsDataURL(blob);
}
doUpload = function (file, data, id, chunk, chunks, chunkSize, nx, off,ind) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm1.aspx/ProcessData",
data: "{'data':'" + data + "','name':'" + file.name + "-----" + id + "-----" + String(chunk) + "'}",
success: function (dd) {
debugger;
chunks[Math.floor(chunk)] = 1;
var cnt = 0;
var cntDone = 0;
for (var key in chunks) {
if (chunks.hasOwnProperty(key)) {
cnt++;
if (chunks[key] === 1)
cntDone += 1;
}
}
if (cnt === Math.ceil(file.size / chunkSize) && cnt === cntDone)
sendEndSignal(file, id, cnt - 1,ind);
if (nx) {
debugger;
off += chunkSize;
if (off >= file.size) {
return;
}
nx(off, chunkSize, file);
}
},
error: function (result) {
alert(JSON.stringify(result));
}
});
}
sendEndSignal = function (file, id, num,ind) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm1.aspx/ProcessData",
data: "{'data':'" + num + "','name':'" + "Done-----" + file.name + "-----" + id + "'}",
success: function (dd) {
var div = document.getElementById("file-" + String(ind));
div.innerHTML = "<b>" + file.name + "</b> => DONE!!!!";
},
error: function (result) {
alert(JSON.stringify(result));
}
});
}
block(offset, chunkSize, file);
}
function xx(inp) {
var i = 0;
var file;
var node = document.getElementById("dupl");
debugger;
while (node.hasChildNodes())
node.removeChild(node.lastChild);
for (i = 0; i < inp.files.length; i++) {
file = inp.files[i];
var dd = document.createElement("div");
dd.id = "file-" + String(i);
dd.innerHTML = "<b>" + file.name + "</b>";
document.getElementById("dupl").appendChild(dd);
}
for (i = 0; i < inp.files.length; i++) {
file = inp.files[i];
parseFile(file,i);
}
}
</script>
Hope It will be useful for someone.
When I try push some element to array and display random element, browser return that array is not define. Where is problem?
var dir = "./images/radovi/";
var ext = ".png";
var slike = [];
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + ext + ")").each(function () {
var ime_slike = this.href.replace(window.location.host, "").replace("http:///", "");
slike.push(dir + ime_slike + ext);
});
}
});
$('<img src="' + slike[Math.floor(Math.random() * slike.length)] + '">').appendTo('#radovi');
AJAX is Asynchronous. The code that populates your array is being called after the code that uses the array. Move the code that creates the image into the success handler:
var dir = "./images/radovi/";
var ext = ".png";
var slike = [];
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + ext + ")").each(function () {
var ime_slike = this.href.replace(window.location.host, "").replace("http:///", "");
slike.push(dir + ime_slike + ext);
});
if (slike.length) {
$('<img src="' + slike[Math.floor(Math.random() * slike.length)] + '">').appendTo('#radovi');
}
}
});