jQuery File Upload – Solution basique avec un callback

jQuery-File-Upload

Comment utiliser la solution basique de jQuery-File-Upload et la faire fonctionner sur tous les navigateurs, avec une dédicace spéciale à Internet Explorer.

La version basique a l’avantage de ne pas être surchargée de librairies et surtout d’être bien plus simple à importer dans un site déjà construit.

Librairies

<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]-->

Le domaine googlecode.com a fermé en 2016 : la ligne html5shim ci-dessus ne charge plus rien. Sur un projet actuel, html5shiv se récupère sur cdnjs.

Mise en place

Pour commencer, récupérer l’index nécessaire sur la page du plugin :

<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>

En partant de ce fichier, tout fonctionne correctement. Malheureusement, quand on veut récupérer des informations dans le callback done, sur Internet Explorer, on ne reçoit rien d’utilisable.

La solution passe par forceIframeTransport. Cette option se change dans la librairie jquery.fileupload.js. Il faut aussi indiquer la redirection qui doit nous renvoyer vers le fichier result.html.

// 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>",

Le %s indique où seront les paramètres, il ne faut donc pas l’oublier.

Récupérer les informations

Le premier contrôle consiste à regarder quelle URL est appelée. Elle doit ressembler à ceci :

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

C’est toute l’information dont on rêve. En collant cette adresse dans le navigateur, on doit récupérer quelque chose comme :

<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"}]}

Si tout cela est là, il ne reste plus qu’à parser ces informations en JSON depuis le script de base et en faire ce que l’on veut.

//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');

}
});