CODEWITHSUNDEEP
javascriptjqueryajaxnode.jsxmlhttprequest
Jim
Jim

Reputation: 141

XMLHttpRequest: need to use success and error functions from ajax

I have this ajax post function run when an upload button is clicked, the files get uploaded to the server, the server sees for any errors and if there are erros, it notifies the user with the req.end(); function. The problem is, since then, I've moved to XMLHttpRequest() (to use the onprogress functions that it provides) but I still need to use those success and error functions from ajax. Is there a way to use them somehow with XMLHttpRequest? Thank you!

This is the code I have so far:

var xhrVideo = new XMLHttpRequest();
xhrVideo.open('POST', '/uploadVideo', true);
xhrVideo.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    $('.videoProgress').html(((e.loaded / e.total) * 100).toFixed(0)+'%');
  }
};
var videoForm = new FormData($('.videoUploadForm')[0]);
xhrVideo.send(videoForm);

And the ajax code:

var videoData = new FormData($('.videoUploadForm')[0]);
$.ajax({
  url: '/uploadVideo',
  type: 'POST',
  data: videoData,
  cache: false,
  contentType: false,
  processData: false,
  mimeType:"multipart/form-data",
  success: function(data){
    switch(data){
      case '1':
        alert('Wrong Video File Extension');
        break;
      case '2':
        alert('Wrong Image File Type');
        break;
    }
  },
  error: function(data){
    alert('Something went wrong! Please reload this page')
  }
});

Upvotes: 2

Views: 5207

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

Personally , I like to use jquery ajax instead of pure javascript .. so you can use xhr with ajax and catch the progress and load event as well

xhr (default: ActiveXObject when available (IE), the XMLHttpRequest otherwise) Type: Function() Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.

in your code you can use it like this 

$.ajax({
        xhr: function(){
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                      //Do something with upload progress
                        $('.videoProgress').html(Math.round(percentComplete)+"% uploaded");
                    }
                }
            }, false);
            xhr.upload.addEventListener("load", function(evt){
                evt.preventDefault();

            },false);
           return xhr;
        },
        // reset of your ajax code

Upvotes: 1

Jakub Rożek
Jakub Rożek

Reputation: 2130

Use listeners for load and error events.

Example adding a listener for success event.

xhrVideo.addEventListener('load', function(e) {

NOTE: the listeners must be added before the send() function

Also, I advise you to read the entire article about using XMLHttpRequest().

Upvotes: 3

Related Questions