Chunker un fichier avec plupload

plupload

Présentation :

Plupload est un plugin javascript permettant de personnaliser le bouton de téléchargement de fichiers, d’effectuer un multiple téléchargement. Il offre aussi la possibilité d'envoyer les fichiers par morceaux sur le serveur.

L’envoie des fichiers par paquets sur les serveurs permettent de surmonter la LimiteRequestBody du serveur apache (limite taille maximale du corps de la requêtte http) et aussi celui du serveur PHP (upload_max_file et post_max_size). Pour upload_max_file et post_max_size, on peut les configurer directement par un ini_set() lors de l’exécution du script et si le corps de la requête elle-même  est limité par le serveur, il faut envoyer les fichiers  par morceaux ou par paquets afin de diminuer la taille de la requête .

Pourquoi choisir plupload ?

  • Facile à implémenter
  • Plusieurs options : Drag en Drop, téléchargement multiple, chunk, compression de fichiers, …
  • Open source
  • Multiplatformes

Prérequis :

Télécharger la librairie sur le site officiel : http://www.plupload.com/download/

Configuration de base pour activer chunks plupload :

// -----------------      Plupload  photo face pdv   ------------------//
var uploader = new plupload.Uploader({
    browse_button: 'browse',// selecteur bouton upload
    url: uploadfileUrl,
    chunk_size: size_chunk,
    multipart_params:{
        ref_photo : 'photo_face_pdv',
        id_pdv : id_pdv
    },filters: {
        mime_types: [{title: "image", extensions: extension}],
        max_file_size: max
    },
    max_retries: 3
});

Terminologie :

Petites explications des options nécessaires pour plupload

Browse_button : le sélecteur du bouton pour afficher l’explorateur de fichier

url : url pour le contrôleur de sauvegarde du fichier

chunk_size : Taille du paquet en bytes (les unités acceptées sont « b » et « kb »),  il doit être inférieur à la limite imposée sur le serveur, pour que le telechargement du paquet soit autorisé.

multipart_params : les paramètres nécessaires à poster dans l’url de contrôle

filters : filtre du fichier (taille maximale autorisée, extension, type). Pour plus d'informations sur les filtres personnalisés visitez le site custom file filters.

max_retries : nombre de tentatives en cas d’erreur

 

Initialisation de plupload :

uploader.init();

en cas d’erreur plupload.INIT_ERROR verifier que les paramètres browser_button et url sont bien définis.

Ajout du fichier :

uploader.bind('FilesAdded', function (up, files) {
    var html = '';
    document.getElementById('face_list').innerHTML='';
    document.getElementById('erreur_photo_face').innerHTML= '';
    plupload.each(files, function (file) {
        html += '<li id="' + file.id + '">'+ file.name + '(' + plupload.formatSize(file.size) + ') <b></b></li>';
    });
    document.getElementById('face_list').innerHTML += html;
    if(html!=''){
        document.getElementById('start-upload').style.display='inline';
    }

});

On ajoute dans « face_list » le fichier à uploader : format « nom_du_fciher.ext (taille_du_fichier)  S’il y en a on affiche le bouton UPLOADER

btn

Lancement de la téléchargement :

document.getElementById('start-upload').onclick = function () {
    uploader.start();
};

Aperçu de la progression :

uploader.bind('UploadProgress', function (up, file) {
    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});

Lorsque le fichier est téléchargé :

uploader.bind('FileUploaded', function(up, file, ret) {
    var response = eval('(' + ret.response + ')'); 
    if(response.status==4){
        document.getElementById(file.id).innerHTML += '<img src='+ image_uploader + ' class ="image_uploader">';
        document.getElementById('start-upload').style.display='none';
    }
});

 

Côté controlleur :

Le plus important dans le controlleur c’est l’écriture/lecteur des paquets

public function pluploadAction(){

    $extention      =   array('jpg','jpeg','png','bmp','gif');
    $photo_uploader =    $_REQUEST['ref_photo'];
    
    $ref_pdv        =   isset($_REQUEST['ref_pdv']) ? $_REQUEST['ref_pdv'] : null;    
    $ref_photo_bdd  =   isset($keys[$photo_uploader]) ? $keys[$photo_uploader] : "" ;
    $fileName       =   isset($_REQUEST["name"]) ? $_REQUEST["name"] :       $_FILES["file"]["name"];
    $ext            =   explode(".", trim($fileName));
    $ext            =   $ext[sizeof($ext) - 1];

    if (empty($_FILES) || $_FILES['file']['error']) {
        die('{"status": 0, "info": "Téléchargement du fichier échoué."}');
    }
    if(!in_array($ext,$extention)){
        die('{"status": 1, "info": "Vous devez uploader un fichier de type png, gif, jpg, jpeg,bmp."}');
    }

//  Vérification PDV sélectionner :

    if($ref_pdv!=null) {
// Récupération des pacquets
        $chunk      =   isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
        $chunks     =   isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;

       // lecture fichier temporaire
        $out = @fopen("{$filePath}.part", $chunk == 0 ? "wb" : "ab");
        if ($out) {
            $in = @fopen($_FILES['file']['tmp_name'], "rb");
            if ($in) {
                while ($buff = fread($in, 4096))
                    fwrite($out, $buff);
            } else {
                die('{"status": 2, "info": "Impossible d ouvrir le flux d entrée."}');
            }

            @fclose($in);
            @fclose($out);
            @unlink($_FILES['file']['tmp_name']);
        } else {
            die('{"status": 3, "info": "Impossible d ouvrir le flux de sortie."}');
        }


        // ----------   tester si le fichier est bien telecharger --------------- //
        if (!$chunks || $chunk == $chunks - 1) {
            rename("{$filePath}.part", $filePath);
                             // ----  sauvegarde BDD -----  //
            $pdv->setData('pieces_adm_pdv', Mage::helper('core')->jsonEncode($piece_adm));
            try{
                $pdv->save();
            } catch (Exception $ex) {
                Mage::getSingleton('core/session')->addError('Error Update');
            }
            die('{"status": 4, "info": "Téléchargement effectué."}');
        }
    }
}

Conclusion :

C’est juste une des multiples options de plupload, mais il offre encore plusieurs configurations que je vous laisse découvrir sur le site  plupload.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.