在ajax beforeSend之前先解析一个函数

Question

I was trying to check the file first before I upload it using 'fileuploader', now on my beforeSend function:

beforeSend: function(item, listEl, parentEl, newInputEl, inputEl) {
            var file = item.file;

            let readfile = function(file){
                return new Promise(function(resolve, reject){
                console.log(file);
                    var reader = new FileReader();
                    var duration = 0;
                    reader.onload = function() {
                        var aud = new Audio(reader.result);
                        aud.onloadedmetadata = function(){
                            resolve(aud.duration);
                        }; 
                    };
                reader.readAsDataURL(file); 
                });
            }

          return readfile(file).then(function(res){ 
                if(res>60){ 
                    console.log('more than 60');
                    return false; 
                 }
                 else{
                    console.log('uploaded');
                    return true;
                 }

        }); 

        },

My readfile function actually waits for the promises to finish, but the beforeSend function is not pausing before the readfile function is done.

How do I do this please?

I know that its not returning false since an http request is still made even if I return false on my promises.

Answer 1

You can do this.

$(document).on('sendAjax',function(){
//Write your ajax code here
});

$(document).trigger("sendAjax");

Create custom event sendAjax, bind it with document and trigger the event after file is uploaded succesfully. Take file upload function in $(document).ready()

$(document).ready(function(){
 function myfunction(){
  var file = item.file;

            let readfile = function(file){
                return new Promise(function(resolve, reject){
                console.log(file);
                    var reader = new FileReader();
                    var duration = 0;
                    reader.onload = function() {
                        var aud = new Audio(reader.result);
                        aud.onloadedmetadata = function(){
                            resolve(aud.duration);
                        }; 
                    };
                reader.readAsDataURL(file); 
                });
            }

          return readfile(file).then(function(res){ 
                if(res>60){ 
                    console.log('more than 60');
                    return false; 
                 }
                 else{
                    console.log('uploaded');
                    $(document).trigger("sendAjax"); 
                    return true;
                 }

        }); 
 }
});

By this way ajax will be only send after file uploaded succesfully.

Hope it helps.

Answer 2

As per the jQuery code, beforeSend() does not use the returned value from the callback function other than to check if false was returned

https://github.com/jquery/jquery/blob/d7237896c79a5a10d85fcdec199c5657a469a92b/src/ajax.js#L652

 // Allow custom headers/mimetypes and early abort if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || completed ) ) { // Abort if not done already and return return jqXHR.abort(); } 

So not only is returning any value other than false not used, by the time your promise resolves the beforeSend callback will have already finished and the ajax request already started/finished.

If you want to do some async operation beforehand you will need to do it before the actual jQuery.ajax() call

Example:

new Promise((resolve,reject)=>{
   //...
}).then(()=>{
   return $.ajax({
     //....
   });
});