File Upload Progress Event not firing, although file uploads

Question

I've seen a few posts on here with similar issues, but I can't seem to get this solved. Basically, I have an AJAX file uploader that doesn't seem to call the progress event. The other events fire just fine, and the file uploads exactly as I expect it, but the progress event isn't being called. The Javascript is shown below:

$('input[name=avatar_upload]').change(function(e) { // Get the Form var setupForm = $('#setup-member-form'); // Get the File Array var file = document.getElementById('avatar-upload').files[0]; // Show the File Upload Progress $('#avatar-upload-progress').show(); // Create a new Form Data Object var formData = new FormData(); // Add the File formData.append('avatar', file); // Create the AJAX Object var ajax = new XMLHttpRequest(); // Add the Event Listeners ajax.addEventListener("loadstart", function(evt) { // Do something in here... $('#output').append("upload starting...\n"); }, false); ajax.addEventListener("progress", function(evt) { var percentLoaded = (evt.loaded / evt.total) * 100; $('#output').append(percentLoaded + "% loaded\n"); $('#avatar-upload-progress .ui-progress-bar-inner').animate({'width' : percentLoaded + '%'}, 400); }, false); ajax.addEventListener("load", function(evt) { // Do something in here when loaded... $('#output').append("upload complete!"); }, false); // Open the Form ajax.open("POST", $('input[name=upload_handler]').val()); ajax.send(formData); });

At first I thought it might just be because the file was too small for the progress event to have a chance to fire, but I've tried it with larger files, and the load event fires, then there is a few seconds pause, then the complete event fires.

If anyone has any ideas, please let me know!

adeneo · Accepted Answer · 2014-01-31 01:02:42Z

Just tested this, and for uploads you have to use XMLHttpRequest.upload, as attaching the events directly to XMLHttpRequest only fires once when uploading.

It's also explained in the documentation on MDN

$('#avatar-upload').on('change', function () { var file = document.getElementById('avatar-upload').files[0]; $('#avatar-upload-progress').show(); var formData = new FormData(); formData.append('avatar', file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("loadstart", function (evt) { $('#output').append("upload starting...\n"); }, false); ajax.upload.addEventListener("progress", function (evt) { var percentLoaded = (evt.loaded / evt.total) * 100; $('#output').append(percentLoaded + "% loaded\n"); $('#avatar-upload-progress .ui-progress-bar-inner').animate({ 'width': percentLoaded + '%' }, 400); }, false); ajax.upload.addEventListener("load", function (evt) { $('#output').append("upload complete!"); }, false); ajax.open("POST", $('input[name=upload_handler]').val()); ajax.send(formData); });

In my case I am using XMLHttpRequest.upload but it's still not firing. Only if I force the debugger to stop by putting the word "debugger;" in my script, then it will fire, but otherwise it just blows right past.

Vincent · Accepted Answer · 2023-04-03 16:40:12Z

In my case the problem was the way I was creating the XMLHttpRequest object. Turns out I was missing the "window" object. I had this:

requestObject = new XMLHttpRequest(); requestObject.upload.addEventListener('progress', videoUploadProgress, false);

And changed it to this:

requestObject = new window.XMLHttpRequest(); requestObject.upload.addEventListener('progress', videoUploadProgress, false);

Now it works.

Collectives™ on Stack Overflow

File Upload Progress Event not firing, although file uploads

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related