HTML5 - Gestion des fichiers (Files API)

Après une exploration rapide des attributs contenteditable et draggable, je vous propose cette fois d'explorer les bases de l'API de gestion de fichiers qui sera introduite par la norme HTML5.

L'idée n'est pas ici d'être exhaustif, car les possibilités sont vastes, mais de donner un apperçu des possibilités offertes par cette API.

Gestion de fichiers multiples

Vous souvenez vous d'interfaces web d'upload de fichiers à base de multiples input afin de contourner la limitation actuelle: un seul fichier peut être sélectionné à partir d'une balise input en (X)HTML? Dans certains services, cette limitation étaient aussi contourner via des applets JAVA.

HTML5 introduit la possibilité d'uploader de multiples fichiers à partir d'une seule balise grâce à l'attribut: multiple

Upload de fichier unique:

<input type="file" id="inputsimple" name="inputsimple">

Upload de fichier multiples:

<input type="file" id="inputmultiple" name="inputmultiple" multiple>

Événement change de la balise input

Avant l'envoi d'un/des fichier(s), il est possible (entre autre) d'en récupérer des informations via l'événement change propagé par la balise input.

<input type="file" id="inputsimple" name="inputsimple" onchange="filesInputHandler(this.files)">
<input type="file" id="inputmultiple" name="inputmultiple" multiple onchange="filesInputHandler(this.files)">

function filesInputHandler(fileList) {
    /* 
       Here, you can get infos from fileList[i]:
        - fileList[i].fileName, 
        - fileList[i].fileSize
        etc...
    */
    if (fileList.length == 1) {
        /* Only one file selected */
    } else {
        /* Several files selected */
    }
}

Drag and drop de fichiers

Une autre possibilité intéressante offerte par HTML5 repose sur les notions de drag and drop abordées dans un précédent article et la gestion de fichier. En effet, en combinant ces deux nouveautés, on peut créer une zone "cible" permettant de recevoir des fichiers "dropés" depuis un navigateur de fichier (Explorer pour Windows, Nautilus pour Gnome etc...) voir de les uploader.

L'exemple ci-dessous se limite à donner des informations sur les fichiers sélectionnés de cette manière.

On crée la zone qui acceptera et réagira au drag&drop de fichiers:

<div ondragover="dragOverHandler(event)"
     ondragenter="dragEnterHandler(event)"
     ondrop="dropHandler(event)">

    <p ><strong>Drop files from your file browser to this box</strong></p>
    <p><em>(This test page doesn't realy upload files. It just handle the filename for display)</em></p>
    <ul id="fileslist" ></ul>
</div>

Gestion du drag and drop des fichiers:

function dragOverHandler(event) {
    event.preventDefault();
    event.stopPropagation();
    /* Do nothing */
}

function dragEnterHandler(event) {
    event.preventDefault();
    event.stopPropagation();
    /* Do nothing */
}

function dropHandler(event) {
    event.preventDefault();
    event.stopPropagation();

    /* Put files informations in 'files' */
    var data = event.dataTransfer;
    var files = data.files;

    /* Add file informations in target list */
    for(var i = 0; i < files.length;i++) {
        li = document.createElement('li');
        li.innerHTML = files[i].fileName;
        document.getElementById('fileslist').appendChild(li);
    }
}

Exemple

Références de l'article

• La balise input type="file" sur le site du W3C
• Une démo de drag and drop de fichiers sur html5demos.com qui m'a largement inspirée pour cet article
• Aller plus loin avec les ressources du labo Mozilla
• La démo HTML5 qui a servi de base à l'article