Fancy Upload : installation

Suite à notre présentation du plugin Fancy Upload, voici (à la demande générale ^^) une procédure d’installation simplifiée, étape par étape !

1. Téléchargement et installation de mootools : rendez vous tout d’abord sur la page de téléchargement de mootools, et téléchargez la dernière version en cours (v1.1 ou supérieure nécéssaire).
Les classes Class.Extras, Element.Event, Element.Selectors, Fx.Style, Fx.Transitions sont nécéssaires.
Une fois téléchargée, placez la à l’endroit désiré sur votre serveur et appellez le de la manière suivante :

Script javascript

    <script src="inc/mootools-release-1.11.js"></script>

2. Téléchargement et installation de Fancy Upload : téléchargez les fichiers FancyUpload.js, Swiff.Base.js, Swiff.Uploader.js, Swiff.Uploader.swf chez digitarald.de.
De la même manière que précedemment, on appelle les trois premiers fichiers

Script javascript

    <script type="text/javascript" src="/inc/fancyupload/Swiff.Base.js"></script>
    <script type="text/javascript" src="/inc/fancyupload/Swiff.Uploader.js"></script>
    <script type="text/javascript" src="/inc/fancyupload/FancyUpload.js"></script>

D’une manière globale, je conseille l’installation du plugin Firebug pour Firefox, qui vous permet notemment de vérifier si tous les éléments appelés par votre page ont étés correctement chargés (de toute façon, c’est un super plugin il fait partie de notre selection)

Voila, on passe aux choses sérieuses

3. Initialisation de l’uploader :
Primo, installer cette fonction javascript dans le header de votre page

Script javascript

<script type="text/javascript">
                //<![CDATA[

                window.addEvent(‘load’, function()
                {
                        /*
                         * ! Attention, si vous changez les noms de classes, ne pas oublier de les changer dans cette fonction également !
                         */
                        var input = $(‘photoupload-filedata-1′);

                        /*
                         * swf: chemin vers le swf
                         * container: les infos seront stockées dans ce conteneur
                         *
                         */
                        var uplooad = new FancyUpload(input, {
                                swf: ’swiff/Swiff.Uploader.swf’,
                                queueList: ‘photoupload-queue’,
                                container: $(’swfcontainer’)
                        });

                        $(‘photoupload-status’).adopt(new Element(‘a’, {
                                href: ‘javascript:void(null);’,
                                events: {
                                        click: uplooad.clearList.bind(uplooad, [false])
                                }
                        }).setHTML(‘Clear Completed’));

                        var uplooad2 = new FancyUpload($(‘photoupload2-filedata-1′), {
                                swf: ’swiff/Swiff.Uploader.swf’,
                                queueList: ‘photoupload-queue-2′
                        });
                });

                //]]>
        </script>

Secundo, préparer dans le corps de votre page un élément conteneur, de préférence vide, qui va permettre de stocker des informations.
Dans notre exemple, nous avons créé une balise div appellée “swfcontainer”. Placez le de préférence avant ce qui va suivre.
Tertio, il vous faudra préparer un formulaire …

Script xhtml

    <div id="swfcontainer"></div>
    <form action="mass_upload.php" method="post" id="photoupload" enctype="multipart/form-data">
        <input type="file" name="Filedata" id="photoupload-filedata-1" />
        <div class="halfsize">
                <fieldset>
                        <legend>File d’attente</legend>
                        <div class="note" id="photoupload-status">Vérifiez les fichiers puis commencez l’envoi</div>
                        <ul class="photoupload-queue" id="photoupload-queue">
                                <li style="display: none" />
                        </ul>
                </fieldset>
        </div>
       <div class="footer">
                <input type="submit" class="submit" id="profile-submit" value="Commencer l’upload"/>
        </div>
     </form>

Ne pas oublier de changer les noms de classes appellées dans la fonction Javascript précédente, si vous les changer dans ce formulaire.

4. Création du fichier Php d’upload :
Il vous faudra enfin créer le fichier php qui sera appellé par Fancy Upload pour envoyer les fichiers sur le serveur.
Voici pour exemple une procédure d’installation simple & classique, à vous de faire comme vous les sentez

Script php

$path = ‘/inc/data/upload/’;

// upload image
 if (is_uploaded_file($_FILES[‘Filedata’][‘tmp_name’])) {
    $source_file = $path.($_FILES[‘Filedata’][‘name’]);
    move_uploaded_file($_FILES[‘Filedata’][‘tmp_name’], $source_file);
    }