0

I have a file upload form to Amazon S3 direct from the browser, the upload works fine but I am unable to track the progress of the upload - it instantly shows 100%.

The reason I think is because it is posting to an external domain, Amazon, and it reports 100% on the return of the initial OPTIONS request which is sent. Is there any way I can ignore this response and track the 'progress' event that follows?

    var xhr = new XMLHttpRequest();
    xhr.open("POST", s3Data.url);
    var postData = new FormData();
    for(key in s3Data.fields){
      postData.append(key, s3Data.fields[key]);
    }
    postData.append('file', file);



    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4){
        if(xhr.status === 200 || xhr.status === 204){
          // complete
        }
        else{
          alert("Could not upload file.");
        }
     }
    };

    xhr.upload.addEventListener("progress", function(evt){
         if (evt.lengthComputable) {
           var percentComplete = evt.loaded / evt.total;
           alert("Upload " + Math.round(percentComplete*100) + "% complete.");
         }
       }, false);

    xhr.send(postData);

The progress event just fires once and alerts 100%, which seems to be on response from the S3 URL, the next request in the browser is the POST which is the file upload

Any help would be greatly appreciated, I couldn't find any similar questions but apologies if I missed the obvious

Jon
  • 121
  • 5
  • Maybe the accepted answer to [this](https://stackoverflow.com/questions/14160308/xhr-upload-onprogress-doesnt-work) question is relevant. Please have a look. –  Apr 22 '20 at 16:03
  • @VedantBang, thanks, unfortunately it's the same with the 100% returning on first return of the OPTIONS response – Jon Apr 22 '20 at 16:18
  • Even after having declared the listener before opening the XMLHttpRequest? –  Apr 22 '20 at 16:19
  • @VedantBang yes, unfortunately ... the result is the same. 100% fires on return of the options http request – Jon Apr 22 '20 at 16:23

0 Answers0