Mixing
ajax FormData upload - multiple progress events in Chrome and Firefox, only one in Safari?
up vote
0
down vote
favorite
**EDIT: does work in Firefox
I am just starting to work with submitting forms through XMLHttpRequest. I enhanced a standard form to submit this way, based on code found on this site and in other tutorials. The form includes a file input, and the enhancement is intended to display the upload percentage (as text and a progress bar). This works perfectly in Chrome and Firefox, but in Safari it seems like the progress event only fires once, at the beginning of the upload. The form submission does go through correctly, but the percentage stays close to 0% until the upload is finished.
Is there some trick to doing this in Safari? I've been searching for hours and cannot find any special instructions. I've tried demos of progress bar code and all seem to work properly in Safari. I am thinking now that maybe it is related to something on the server, but I'm not sure where to look if that might be the issue... Any tips would be much appreciated.
Here is the code:
function enhanceFormWithUploadProgress(form, progress, text, fill) {
//form : the HTML form element to enhance.
//progress : an HTML element that will display upload progress.
//testing browser support. if no support for the required js APIs, the form will just be posted naturally with no progress showing.
var xhr = new XMLHttpRequest();
if (!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)) || !window.FormData) {
return;
}
form.addEventListener('submit', function(e) {
//prevent regular form posting
e.preventDefault();
xhr.upload.addEventListener('loadstart', function(e) {
//initializing the progress indicator (here we're displaying an element that was hidden)
progress.style.display = 'flex';
}, false);
xhr.upload.addEventListener('progress', function(e) {
//displaying the progress value as text percentage, may instead update some CSS to show a bar
if (e.lengthComputable) {
//var percent = (100 * event.loaded / event.total);
var percent = Math.floor((e.loaded / e.total) * 100);
console.log(percent);
fill.style.width = percent + '%';
text.innerText = 'Uploading: ' + percent + '%';
}
}, false);
xhr.upload.addEventListener('load', function(e) {
//this will be displayed while the server is handling the response (all upload data has been transmitted by now)
text.innerText = 'Completed...';
}, false);
xhr.addEventListener('readystatechange', function(e) {
console.log(xhr.readyState + ' - ' + xhr.status + ': ' + xhr.statusText);
if (e.target.readyState == 4 && e.target.responseText) {
//we got a response from the server and we're replacing the whole current document content with it, simulating a page reload
var newDocument = document.open('text/html', 'replace');
newDocument.write(e.target.responseText);
newDocument.close();
}
}, false);
//posting the form with the same method and action as specified by the HTML markup
xhr.open(this.getAttribute('method'), this.getAttribute('action'), true);
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.send(new FormData(this));
});
};
javascript ajax safari upload
asked 2 days ago
bwalsh
11
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
**EDIT: does work in Firefox
I am just starting to work with submitting forms through XMLHttpRequest. I enhanced a standard form to submit this way, based on code found on this site and in other tutorials. The form includes a file input, and the enhancement is intended to display the upload percentage (as text and a progress bar). This works perfectly in Chrome and Firefox, but in Safari it seems like the progress event only fires once, at the beginning of the upload. The form submission does go through correctly, but the percentage stays close to 0% until the upload is finished.
Is there some trick to doing this in Safari? I've been searching for hours and cannot find any special instructions. I've tried demos of progress bar code and all seem to work properly in Safari. I am thinking now that maybe it is related to something on the server, but I'm not sure where to look if that might be the issue... Any tips would be much appreciated.
Here is the code:
function enhanceFormWithUploadProgress(form, progress, text, fill) {
//form : the HTML form element to enhance.
//progress : an HTML element that will display upload progress.
//testing browser support. if no support for the required js APIs, the form will just be posted naturally with no progress showing.
var xhr = new XMLHttpRequest();
if (!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)) || !window.FormData) {
return;
}
form.addEventListener('submit', function(e) {
//prevent regular form posting
e.preventDefault();
xhr.upload.addEventListener('loadstart', function(e) {
//initializing the progress indicator (here we're displaying an element that was hidden)
progress.style.display = 'flex';
}, false);
xhr.upload.addEventListener('progress', function(e) {
//displaying the progress value as text percentage, may instead update some CSS to show a bar
if (e.lengthComputable) {
//var percent = (100 * event.loaded / event.total);
var percent = Math.floor((e.loaded / e.total) * 100);
console.log(percent);
fill.style.width = percent + '%';
text.innerText = 'Uploading: ' + percent + '%';
}
}, false);
xhr.upload.addEventListener('load', function(e) {
//this will be displayed while the server is handling the response (all upload data has been transmitted by now)
text.innerText = 'Completed...';
}, false);
xhr.addEventListener('readystatechange', function(e) {
console.log(xhr.readyState + ' - ' + xhr.status + ': ' + xhr.statusText);
if (e.target.readyState == 4 && e.target.responseText) {
//we got a response from the server and we're replacing the whole current document content with it, simulating a page reload
var newDocument = document.open('text/html', 'replace');
newDocument.write(e.target.responseText);
newDocument.close();
}
}, false);
//posting the form with the same method and action as specified by the HTML markup
xhr.open(this.getAttribute('method'), this.getAttribute('action'), true);
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.send(new FormData(this));
});
};
javascript ajax safari upload
asked 2 days ago
bwalsh
11
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
**EDIT: does work in Firefox
I am just starting to work with submitting forms through XMLHttpRequest. I enhanced a standard form to submit this way, based on code found on this site and in other tutorials. The form includes a file input, and the enhancement is intended to display the upload percentage (as text and a progress bar). This works perfectly in Chrome and Firefox, but in Safari it seems like the progress event only fires once, at the beginning of the upload. The form submission does go through correctly, but the percentage stays close to 0% until the upload is finished.
Is there some trick to doing this in Safari? I've been searching for hours and cannot find any special instructions. I've tried demos of progress bar code and all seem to work properly in Safari. I am thinking now that maybe it is related to something on the server, but I'm not sure where to look if that might be the issue... Any tips would be much appreciated.
Here is the code:
function enhanceFormWithUploadProgress(form, progress, text, fill) {
//form : the HTML form element to enhance.
//progress : an HTML element that will display upload progress.
//testing browser support. if no support for the required js APIs, the form will just be posted naturally with no progress showing.
var xhr = new XMLHttpRequest();
if (!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)) || !window.FormData) {
return;
}
form.addEventListener('submit', function(e) {
//prevent regular form posting
e.preventDefault();
xhr.upload.addEventListener('loadstart', function(e) {
//initializing the progress indicator (here we're displaying an element that was hidden)
progress.style.display = 'flex';
}, false);
xhr.upload.addEventListener('progress', function(e) {
//displaying the progress value as text percentage, may instead update some CSS to show a bar
if (e.lengthComputable) {
//var percent = (100 * event.loaded / event.total);
var percent = Math.floor((e.loaded / e.total) * 100);
console.log(percent);
fill.style.width = percent + '%';
text.innerText = 'Uploading: ' + percent + '%';
}
}, false);
xhr.upload.addEventListener('load', function(e) {
//this will be displayed while the server is handling the response (all upload data has been transmitted by now)
text.innerText = 'Completed...';
}, false);
xhr.addEventListener('readystatechange', function(e) {
console.log(xhr.readyState + ' - ' + xhr.status + ': ' + xhr.statusText);
if (e.target.readyState == 4 && e.target.responseText) {
//we got a response from the server and we're replacing the whole current document content with it, simulating a page reload
var newDocument = document.open('text/html', 'replace');
newDocument.write(e.target.responseText);
newDocument.close();
}
}, false);
//posting the form with the same method and action as specified by the HTML markup
xhr.open(this.getAttribute('method'), this.getAttribute('action'), true);
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.send(new FormData(this));
});
};
javascript ajax safari upload
asked 2 days ago
bwalsh
11
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
**EDIT: does work in Firefox
I am just starting to work with submitting forms through XMLHttpRequest. I enhanced a standard form to submit this way, based on code found on this site and in other tutorials. The form includes a file input, and the enhancement is intended to display the upload percentage (as text and a progress bar). This works perfectly in Chrome and Firefox, but in Safari it seems like the progress event only fires once, at the beginning of the upload. The form submission does go through correctly, but the percentage stays close to 0% until the upload is finished.
Is there some trick to doing this in Safari? I've been searching for hours and cannot find any special instructions. I've tried demos of progress bar code and all seem to work properly in Safari. I am thinking now that maybe it is related to something on the server, but I'm not sure where to look if that might be the issue... Any tips would be much appreciated.
Here is the code:
function enhanceFormWithUploadProgress(form, progress, text, fill) {
//form : the HTML form element to enhance.
//progress : an HTML element that will display upload progress.
//testing browser support. if no support for the required js APIs, the form will just be posted naturally with no progress showing.
var xhr = new XMLHttpRequest();
if (!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)) || !window.FormData) {
return;
}
form.addEventListener('submit', function(e) {
//prevent regular form posting
e.preventDefault();
xhr.upload.addEventListener('loadstart', function(e) {
//initializing the progress indicator (here we're displaying an element that was hidden)
progress.style.display = 'flex';
}, false);
xhr.upload.addEventListener('progress', function(e) {
//displaying the progress value as text percentage, may instead update some CSS to show a bar
if (e.lengthComputable) {
//var percent = (100 * event.loaded / event.total);
var percent = Math.floor((e.loaded / e.total) * 100);
console.log(percent);
fill.style.width = percent + '%';
text.innerText = 'Uploading: ' + percent + '%';
}
}, false);
xhr.upload.addEventListener('load', function(e) {
//this will be displayed while the server is handling the response (all upload data has been transmitted by now)
text.innerText = 'Completed...';
}, false);
xhr.addEventListener('readystatechange', function(e) {
console.log(xhr.readyState + ' - ' + xhr.status + ': ' + xhr.statusText);
if (e.target.readyState == 4 && e.target.responseText) {
//we got a response from the server and we're replacing the whole current document content with it, simulating a page reload
var newDocument = document.open('text/html', 'replace');
newDocument.write(e.target.responseText);
newDocument.close();
}
}, false);
//posting the form with the same method and action as specified by the HTML markup
xhr.open(this.getAttribute('method'), this.getAttribute('action'), true);
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.send(new FormData(this));
});
};
javascript ajax safari upload
javascript ajax safari upload
asked 2 days ago
bwalsh
11
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
bwalsh
11
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited yesterday
asked 2 days ago
bwalsh
11
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
bwalsh
11
asked 2 days ago
bwalsh
11
11
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
bwalsh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
bwalsh is a new contributor. Be nice, and check out our Code of Conduct.
bwalsh is a new contributor. Be nice, and check out our Code of Conduct.
bwalsh is a new contributor. Be nice, and check out our Code of Conduct.
bwalsh is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364558%2fajax-formdata-upload-multiple-progress-events-in-chrome-and-firefox-only-one%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
