Faire de l'upload en Ajax

De Typo3 CMS / Documentation Typo3 / Support Typo3.

Uploadify

Uploadify est un plugin jQuery servant à l'upload asynchrone (ajax) de fichiers. Il dispose notamment d'une barre de progression et permet l'upload multiple.

Retrouvez la documentation ici: http://www.uploadify.com/documentation/

Sommaire


Utilisation

Téléchargez le package ici et décompressez les sources dans le répertoire web. Vous pouvez inclure uploadify dans vos pages de la manière suivante : 

<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>

Ensuite, vous pouvez initialiser une ou plusieurs balises input[type="file"] de la manière suivante : Sans oublier d'adapter les chemins et l'id de l'input. 

<script type="text/javascript">
$(document).ready(function() {
  $('#id-input-file').uploadify({
    uploader  : '/uploadify/uploadify.swf',
    script    : '/uploadify/uploadify.php',
    cancelImg : '/uploadify/cancel.png',
    //folder    : '/uploads',
    auto      : true
  });
});
</script>
 
<!--// Exemple d'input : -->
<input id="id-input-file" name="file_upload" type="file" />

Remarque : On s'abstient d'utiliser le paramètre folder ici car il laisse la possibilité à l'utilisateur de spécifier le chemin du répertoire d'upload. Le script /uploadify/uploadify.php utilise vraiment ce paramètre et créer donc une faille de sécurité majeur, l'exemple ne dois pas être reproduis.

Utilisation dans TYPO3, avec eID

Ceci est un exemple de comment mettre uploadify en place dans le contexte TYPO3 : utilisation des eID pour les performances et du flashVerifCode qui permet d'identifier le fe_user même au travers d'uploadify.

A adapter à vos besoins, notamment au niveaux des callbacks javascript et des actions à faire en PHP une fois le move_uploaded_file effectué.

Commencez par l'initialisation dans votre template : 

<script type="text/javascript">
 
$(document).ready(function() {
 
  $('#file_upload').uploadify({
    uploader  : '/uploadify/uploadify.swf',
    script    : '/?eID=tx_myext_upload',
    cancelImg : '/uploadify/cancel.png',
    fileExt   : '*.jpeg;*.jpg;*.gif;*.png', //Ici on autorise que les images
    scriptData : {
        'fe_typo_user': getCookie('fe_typo_user'),
        'vC': '###FLASH_VERIFCODE###'
    },
    //Callbacks
    onSelect : function(event,ID,fileObj){
        console.log('onSelect', event);
        return false;
    },
    onOpen : function(event, ID, fileObj){
        console.log('onOpen', event);
    },
    onComplete: function(event, ID, fileObj, response, data){
        console.log('onComplete', event);
    },
    onError : function (event,ID,fileObj,errorObj) {
        console.log('onError', event);
 
        //Error type
        var errorText = '';
        switch(errorObj.info){
           case 403 : //403 Forbidden
                        window.location.replace("###PAGE_BASEHREF###");
                        break;
           case 413 : //413 Request Entity Too Large
                        errorText = fileObj.name+' est trop gros.';
                        break;
           case 415 : //415 Unsupported Media Type
                        errorText = fileObj.name+' est d\'un type non-autoris&eacute;.';
                        break;
           case 500 : //500 Internal Server Error
                        errorText = fileObj.name+' n\'a pas &eacute;t&eacute; envoy&eacute; &agrave; cause d\'une erreur interne.';
                        break;
        }
        //Alert!!
        if(errorText.length > 0){
           alert(errorText);
        }
    }
  });
 
});
 
    //@see: http://www.w3schools.com/js/js_cookies.asp
    function getCookie(c_name) {
        var i,x,y,ARRcookies=document.cookie.split(";");
        for (i=0;i<ARRcookies.length;i++) {
            x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
            y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
            x=x.replace(/^\s+|\s+$/g,"");
            if (x==c_name) {
                return unescape(y);
            }
        }
    }
</script>

Remarque : Le marker ###FLASH_VERIFCODE### doit étre remplacer par la valeur de $TSFE->fe_user->veriCode().

Ensuite à vous de coder l'eID : 

<?php
//Vérifie que la page est appelée dans un contexte typo3
if (!class_exists('tslib_eidtools')) {
    die();
}
 
//Upload
tx_monext_eid_Upload(
    16 * 1024 * 1024,
    array('jpeg', 'jpg', 'gif', 'png')
);
 
function tx_monext_eid_Upload($maximumSize, $allowedExtensions){
    global $TSFE;
 
    //User auth verif
    if (isset($TSFE->fe_user->user) && !empty($TSFE->fe_user->user) && !empty($_FILES)) {
 
        //File size verification
        if($_FILES['Filedata']['size'] <= $maximumSize) {
 
            //File extension verification
            $fileExt =  strtolower(substr(strrchr($_FILES['Filedata']['name'],'.'),1));
            if(in_array($fileExt, $allowedExtensions)) {
 
                    //Store file as a temp file
                    $prefix = substr($_FILES['Filedata']['name'], 0, -1*(strlen($fileExt)+1));
                    $destination = t3lib_div::tempnam($prefix).'.'.$fileExt;
                    if(move_uploaded_file($_FILES['Filedata']['tmp_name'], $destination)) {
                        //Return file path
                        echo $destination;
                    } else {
                        tx_monext_eid_UploadError('move_file');
                    }
            } else {
                tx_monext_eid_UploadError('file_extension');
            }
        } else {
            tx_monext_eid_UploadError('file_size');
        }
    } else {
        tx_monext_eid_UploadError('user_login');
    }
 
}
 
function tx_monext_eid_UploadError($err){
    switch($err){
        case 'user_login' :
            header(t3lib_utility_Http::HTTP_STATUS_403); //403 Forbidden
            $txt = 'You have to be a registered user to upload.';
            break;
        case 'file_size' :
            header(t3lib_utility_Http::HTTP_STATUS_413); //413 Request Entity Too Large
            $txt = 'File is too large.';
            break;
        case 'file_extension' :
            header(t3lib_utility_Http::HTTP_STATUS_415); //415 Unsupported Media Type
            $txt = 'File extension is not allowed.';
            break;
        case 'move_file' :
            header(t3lib_utility_Http::HTTP_STATUS_500); //500 Internal Server Error
            $txt = 'Upload failed for internal reasons.';
            break;
    }
    echo $txt;
}
 
 
/**
 * Singleton for t3lib_basicFileFunctions
 * @see t3lib_basicFileFunctions
 */
function tx_monext_eid_getBasicFileFunctionObj(){
    static $obj = null;
    if(is_null($obj)){
        $obj = t3lib_div::makeInstance('t3lib_basicFileFunctions');
    }
    return $obj;
}

On n'oubliera pas de déclarer l'eID via le ext_localconf.php de l'extension.


Securité et performance

Le fichier "/uploadify/uploadify.php" est fourni pour exemple, comme ce fichier est une faille de sécurité, on prendra soin de le supprimer immédiatement, et de ne jamais le mettre sur les serveurs de productions.

Récupérée de « http://www.wiki-oblady.com/index.php/Faire_de_l%27upload_en_Ajax »

Formation Typo3 à Paris
Boite Oblady