jQuery file Upload - Basique solution avec un callback

jQuery-File-Upload

Comment utiliser la solution basique de http://blueimp.github.com/jQuery-File-Upload/ et faire en sorte qu’elle fonctionne pour tous les navigateurs (spéciale dédicace à Internet Explorer).

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

Librairies

Mise en place

Pour commencer, il faut aller à l’adresse https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin afin de récupérer l’index nécessaire:

jQuery File Upload Example

Si on part de ce fichier, on constatera que tout fonctionne correctement. Malheureusement lorsque l’on veut récupérer des informations dans le callback done, sur Internet Explorer, on ne recevra rien d’utilisable.

La solution à ce problème est de passer par forceIframeTransport. Il est possible de modifier cette option dans la librairie jqueryfileupload.js. Il faut alors aussi indiquer le redirect qui doit nous rediriger 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?%s",

le %s indique où seront les paramètres, il est donc important de ne pas l’oublier.

Récupérer les informations

Le premier contrôle consiste à regarder quelle URL est appelée, cela devrait ressembler à:

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

Il s’agit de toutes les informations dont vous rêvez!

Si vous copiez-collez cette adresse dans votre navigateur, vous devez récupérer quelque chose comme:

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 vous avez tout cela, il suffit alors depuis votre script de base de parser cette information en JSON et d’en faire ce que vous voulez

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

}
});

jQuery file Upload – Basique solution avec un callback