jQuery File Upload – Basic solution with a callback

jQuery-File-Upload

How to use the basic solution from jQuery-File-Upload and make it work on every browser, with a special dedication to Internet Explorer.

The basic version has the advantage of not being overloaded with libraries, and above all it is much easier to import into a site that already exists.

Libraries

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="js/vendor/jquery.ui.widget.js">// <![CDATA[

// ]]></script><script type="text/javascript" src="js/jquery.iframe-transport.js"></script><script type="text/javascript" src="js/jquery.fileupload.js"></script><!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

The googlecode.com domain shut down in 2016, so the html5shim line above no longer loads anything. On a current project, html5shiv is available on cdnjs.

Setting up

To begin with, get the index you need from the plugin page:

<meta charset="utf-8" />jQuery File Upload Example
<input id="fileupload" type="file" multiple="multiple" name="files[]" data-url="server/php/" /><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="js/vendor/jquery.ui.widget.js"></script><script type="text/javascript" src="js/jquery.iframe-transport.js"></script><script type="text/javascript" src="js/jquery.fileupload.js"></script><script type="text/javascript">// <![CDATA[
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
// ]]></script>

Starting from this file, everything works properly. Unfortunately, when you want to read information in the done callback, on Internet Explorer, you get nothing usable.

The way around it is forceIframeTransport. That option is changed in the jquery.fileupload.js library. You also have to give the redirect that sends you back to the result.html file.

// Set the following option to true to force iframe transport uploads:

forceIframeTransport: true,
 // Set the following option to the location of a redirect url on the
 // origin server, for cross-domain iframe transport uploads:
 redirect: http://www.votreurl.com/result.html?<b>%s</b>",

The %s marks where the parameters go, so do not forget it.

Reading the information

The first check is to look at which URL is called. It should look like this:

http://www.votreurl.com/result.html?%7B%22files%22%3A%5B%7B%22name%22%3A%22Chrysanthemum%20%284%29.jpg%22%2C%22size%22%3A879394%2C%22type%22%3A%22image%5C%2Fjpeg%22%2C%22url%22%3A%22http%3A%5C%2F%5C%2Fwww.votreurl.com/%5C%2Fforum%5C%2Ffiles%5C%2FChrysanthemum%2520%25284%2529.jpg%22%2C%22thumbnail_url%22%3A%22http%3A%5C%2F%5C%2Fwww.votreurl.com/%5C%2Fforum%5C%2Ffiles%5C%2Fthumbnail%5C%2FChrysanthemum%2520%25284%2529.jpg%22%2C%22delete_url%22%3A%22http%3A%5C%2F%5C%2Fwww.votreurl.com/%5C%2Fforum%5C%2F%3Ffile%3DChrysanthemum%2520%25284%2529.jpg%22%2C%22delete_type%22%3A%22DELETE%22%7D%5D%7D

That is all the information you could wish for. Pasting this address into the browser should give you something like:

<meta charset="utf-8" />jQuery Iframe Transport Plugin Redirect Page
{"files":[{"name":"Chrysanthemum (4).jpg","size":879394,"type":"image/jpeg","url":"http://votreurl.com/files/Chrysanthemum%20%284%29.jpg","thumbnail_url":"http://votreurl.com/files/thumbnail/Chrysanthemum%20%284%29.jpg","delete_url":"http://www.votreurl.com/?file=Chrysanthemum%20%284%29.jpg","delete_type":"DELETE"}]}

Once you have all that, the base script only needs to parse this information as JSON and do whatever you want with it.

//fileupload button
$('#fileupload').fileupload({
add: function (e, data) {
  data.submit();
},
done: function (e, data) {
  console.log('done');
  //getting the url of the images
  var urlImage = "";
   var result = $( 'pre', data.result ).text();
   if( result != null && $.trim( result ) != '' ){
    var obj = JSON.parse(result);
    var urlImage = obj.files[0];
    urlImage = urlImage.url;
   }
  $('#messagePict').remove();
},
progressall: function (e, data) {
  console.log('progressing');

}
});