Catégorie : Javascripts

Alors oui il s’agit d’une des fonctionnalités auquel vous n’allez pas y réchapper, à chaque fois on s’arrache les cheveux car :

Mes fichiers sont volumineux et le navigateur rame voir plante

Comment dealer proprement entre le réseau, notre serveur et notre navigateur.

L’idée de base c’est d’utiliser le format binaire blob et de l’envoyer sur le réseau par petits morceaux chunk de cette manière vous éviterez le fameux error 500 ou la page qui mouline à n’en plus finir.

Coté serveur il va falloir consolider l’ensemble de ces chunks pour retrouver notre fichier alors la c’est du boulot et qu’en est il si le fichier plante lors de son envoi est ce que l’on doit tout renvoyer à nouveau?

Bon je vous dévoile une librairie vraiment robuste que j’utilise dans certains projets et qui résout ces problèmes et en plus opensource voici le lien le développeur a vraiment bien taffé

https://github.com/blueimp/jQuery-File-Upload

Ce que je kiffe :

• Vous pouvez drag and dropper vos fichiers
• Uploader plusieurs fichiers
• Faire une pause sur l’envoi de fichier
• Vous pouvez limiter la taille des fichiers à envoyer
• Vérifier le type de fichier qui est envoyé

Très simple à utiliser elle repose sur Jquery

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: '/post/private/myfiles',
        autoUpload: false,
        singleFileUploads:true,
        sequentialUploads:true,
        acceptFileTypes: '@',
        maxChunkSize: 1000000,
        maxFileSize:{{@config("test.maxsize_filesupload")}},
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,});
 // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        ))
        .on('fileuploadadd', function (e, data) {
         

         }).on('fileuploadsubmit', function (e, data) {
    
         }).on('fileuploadfailed', function (e, data) {
          
         });
    
  
         
 });
 
});

Je la recommande car les exemples fournis avec sont vraiment complets

et je balance un peu elle s’intègre facilement avec vos frameworks favoris ..Laravel par exemple 😉

JQUERY est l’une des librairies Javascript qui permet de manipuler le DOM HTML intercepter des events de votre page tel que les clics pour soumettre des formulaires

bien utile bien que détrôner par des frameworks javascripts qui sont Reactjs ou Angular ou Vuejs qui proposent et uniformisent une architecture front pour manipuler les pages web intercepter les events et proposer un workflow de traitement

Jquery est une librairie bien utile dans certains cas bien que l’on avait tendance à tout faire avec avant l’apparition des frameworks ci dessus cela devenait vite un plat de spaghetti allez vous faites encore de la validation de formulaire avec Jquery?

Voici quelques morceaux de codes que je vous livre et que j’utilise souvent

Requêtes formulaires AJAX vers un backend :

requête de type post :
function postContent(form,action){
	$.post('/admin/content/'+action, form, function (data, textStatus) {
		if(textStatus=='success'){
			if(data!=null){
		             var parsed = data;
			      if(parsed['success']){
			      /**DO SOMETHING***/
                   }
                    else if(parsed['success']==false){
                          /**DO SOMETHING***/
                    }else{
			 /**DO SOMETHING***/	
		        alert('data problems');
			}
		}else{
			 /**DO SOMETHING***/
			alert('something mistake...problems');
		}
		
	 });
}

requête de type get :
 $.ajax({
                  type: 'get',
                  data : any2url('q',inputData),
                  dateType:'json',
                  url: "/admin/category/edit",
                   success: function(data) {
                	   console.log(data);
                       var parsed = JSON.parse(data);
                       window.location.href = parsed.datas.uri;
                  },
                  error: function(xhr, textStatus, thrownError) {
                      alert(thrownError);
                      alert('Something went to wrong.Please Try again later...');
                  }
                 
              });
    }

C’est très simple pas forcément besoin d’un framework Javascript pour certaines actions de la vie quotidienne l’inconvénient majeur c’est sur du long terme on a tendance à surcharger et cela peu devenir très vite compliquer à debugger mais cela reste une bonne librairie par sa simplicité d’utilisation.

https://jquery.com/