jQuery-File-Upload iframe fallback detection

Question

Using blueimp's jQuery-File-Upload at https://github.com/blueimp/jQuery-File-Upload

My application is running on many older browsers. File uploading has a long list of compatibility constraints. I'd like to simply detect when the fileuploader has gracefully fallen back to using iframe transport. I would like to detect this in the jQuery where the fileupload is being used similar to this example:

var using_iframe_transport = false;

this_file_input.fileupload({
  dataType: 'json',
  url: "http://api.cloudinary.com/v1_1/my_account/image/upload",

  //as we send the file upload, record whether it is using iframe
  send: function (e, data) {
    if (e.iframe_fallback){ //is there a variable like this that exists in the plugin?
      using_iframe_transport = true;
    }
  }
});//end fileupload

if (using_iframe_transport){
  //do something
}

It is possible to use this code in the 'progress', 'done', or 'always' callback:

...
  progress: function(e){ //or 'done' or 'always'
    if($('iframe').length){
      using_iframe_transport = true;
    }
  }
...

However these callbacks are not always made as reported at https://github.com/blueimp/jQuery-File-Upload/issues/461#issuecomment-9299307

My biggest concerns are supporting IE6 and Android 2.3 default browser. Thanks!

Tal Lev-Ami · Accepted Answer · 2013-05-30 13:22:23Z

3

Looks like the method that controls whether iframe is used or not is _initDataSettings which uses _isXHRUpload to determine whether to use it or not. Since this is a private method and cannot be called externally, you can use the following:

options = this_file_input.fileupload('option');
use_xhr = !options.forceIframeTransport &&
            ((!options.multipart && $.support.xhrFileUpload) ||
            $.support.xhrFormDataFileUpload);

If use_xhr is false iframe transport is used.

Alternatively, if you are ok with waiting until the send event, you can look at data.dataType, if it starts with "iframe", you are using the iframe fallback.

answered May 30, 2013 at 13:22

Tal Lev-Ami

1,45710 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tomcounsell Over a year ago

using if(data.dataType.indexOf('iframe') >= 0) in the send event works perfectly. Thanks!

CITguy · Accepted Answer · 2013-05-30 13:43:38Z

0

It's possible. However, it must be done within the asynchronous context of the fileupload plugin. If you wish to use your boolean variable using_iframe_transport, it must be used in the context of a callback within the plugin. Use a console.log in each block to see which executes first.

I would try using the add callback, as it is called as soon as a file is added.

var using_iframe_transport = false;

this_file_input.fileupload({
  dataType: 'json',
  url: "http://api.cloudinary.com/v1_1/my_account/image/upload",

  //as we send the file upload, record whether it is using iframe
  send: function (e, data) {
    if (e.iframe_fallback){ //is there a variable like this that exists in the plugin?
      /*
        This is being set within the asynchronous context of the plugin.
      */
      using_iframe_transport = true;
    }
  }
});//end fileupload

/*
  This is a synchronous process and is being evaluated prior 
  to the plugin callbacks being executed. This logic needs to be
  used within a callback function.
*/
if (using_iframe_transport){
  //do something
}

answered May 30, 2013 at 13:43

CITguy

3081 gold badge3 silver badges10 bronze badges

1 Comment

tomcounsell Over a year ago

That's an important point. My example code is a poor example as is.

Collectives™ on Stack Overflow

jQuery-File-Upload iframe fallback detection

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related