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 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 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 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 …
<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 
$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);
}
6. That’s all ! Enjoy
Tags : ajax, fancy upload, installation, javascript, upload massif.
Le 18/11/2007 à 14:50
Hello,
merci,
mais cela ne fonctionne pas chez moi…
Le 18/11/2007 à 17:48
Détaille un peu ton problème, “ca marche pas”, ca peut etre tout ou rien
Le 20/11/2007 à 2:35
Euh, la démo est ou? Non parce que quand on fait un si beau tuto on aimerai bien voir un peu de “concret”
Le 20/11/2007 à 2:36
sinon pb avec un plugin de commentaire
Le 21/11/2007 à 22:00
Problème réglé
Le 28/11/2007 à 13:54
container: container: $(’swfcontainer’)
Il y a un container: en trop enfait
Le 28/11/2007 à 15:15
Corrigé
Un exemple est dispo ici !
Le 28/11/2007 à 17:00
Sympa mais c’est en anglais on comprend rien
Le 06/12/2007 à 20:17
Simpa d’avoir essayé de nous expliquer mais j’avoue que ça ne marche pas chez moi non plus , j’ai pourtant suivie etape par etape l’explication , voila certaines choses qui m’ont tout de meme paru etrange :
les ‘ ′ qui se trouvent dans le javascript et php ne sont elles pas sencées etre des ” ? Lorsque tu parle a l’etape 4 de la creation du fichier php tu entend un fichier exterieur a la page?Et si oui sous quel nom ? Je ne vois nulle part dans le code d’appelle a une page php .
voila le code de ma page :
Document sans nom
//
File d’attente
Vérifiez les fichiers puis commencez l’envoi
pourais tu me dire ou se trouve le probleme?Ou dans le pire des cas proposer un zip avec page example pour les ptits novices comme moi?
Le 06/12/2007 à 20:20
ha ben le code de la page est pas passé ^^ j’aurais du le prevoir tant pis pour le code , voila l’addresse du script que j’ai tenté de mettre en place :
http://kgftp.free.fr/fancy/
bref impossible de séléctionner plusieurs fichier , les fichiers ne s’affichent pas sur la liste d’attente a l’upload et bien entendu l’upload ne se fait pas correctement
Le 07/12/2007 à 16:32
Je regarde ca dès que j’ai un peu de temps, ce weekend surement
Le 09/12/2007 à 2:41
Merci beaucoup ^^
Le 10/12/2007 à 2:29
Voila j’ai encore essayé ce week end sans aucun resultat T_T , cette fois j’ai zippé mes pages histoire que vous puissiez voir ce qui cloche (c’est certainement moi qui cloche : ) )
voila l’adresse du zip contenant mes pages :
http://mindcrumb.free.fr/Fancyupload.zip
Le 13/12/2007 à 10:25
Il y a quelqu’un ? Je ne suis toujours pas parvenu a l’installer , pourtant il m’a l’air fichtrement bien d’ou la necessité absolue que vous m’epliquiez comment m’y prendre ou du moins vers quelle direction me tourner .
Le 13/12/2007 à 15:30
J’ai reussiiii !! Hourra !!
Bon donc j’ai melangé les exemples , les tutos et les apirateurs a sites pour tenter de cree rune version semblable a l’exemple , puis je l’ai traduit et resumé , voila ce que ça donne :
http://mindcrumb.free.fr/fancyIdle/
Pour télécharger cet exemple et tous les fichiers assosciés a cet exemple , le zip est ici :
http://mindcrumb.free.fr/Fancyupload.zip
J’espere que ça vous servira et que ça permettra a d’autres de moins galere que moi .
Le 27/12/2007 à 3:11
Bien sur que ça à servi ! et je t’en remercie car ça marche !
Enfin il reste un souci, toutes image de plus de 1 mo et quelques une de 500 à 600 ko s’envoie à 100% mais ne parviennent pas jusqu’aux serveur !!
Si d’autres sont dans la même impasse que moi …
Le 28/12/2007 à 0:35
pour le pb de taille
as tu regardé dans le php.ini la config suivante :
; Maximum allowed size for uploaded files.
upload_max_filesize = 2M
Le 30/12/2007 à 21:45
php.ini ?????? A bon je ne pas se fichier sur le serveur !
Le 31/12/2007 à 16:54
bonjour
Détection de la bonne version de Flash
tout fonctionne correctement …. à condition que la bonne version de flash soit installée
après avoir installé la détection de chez adobe, je viens de m’apercevoir qu’il exite une fonction Swiff.getVersion dans Swiff.base.js
je ne connais pas le js, quelqu’un pourrait-il m’indiquer comment utiliser cette fonction dans la page d’upload (je fais ensuite une redirection sur une page proposant de mettre à jour Flash)
merci Richard
Le 01/01/2008 à 21:35
Bonjour a tous et bonne annee 2008!!!
Je voulais savoir comment il etait possible, losque le(s) fichier(s) etait uploade, pour rafraichir la page (fct integree a fancyUpload?).
J aimerai de cette maniere ss action par le user que la page soit rafraichi et creer une miniature qui s afficherait et serait stockee.
Merci de votre aide.
Le 14/01/2008 à 19:44
Je tiens a dire que si on est pas manchot et qu’on sait lire ca se met en place tout seul.
2 choses à faire seulement pour que ca marche :
- changer les ` par les vrais guillemets (2 petits coups de rechercher remplacer et le tour est joué)
- faire attention de mettre les fichiers (js et swf) dans les bons repertoires
C’est tout. Comme quoi c’est pas sorcier mais faut juste se sortir un peu les doigts du cul et savoir lire le code.
A bon entendeur, bonsoir
Le 15/01/2008 à 12:12
Voila une remarque constructive et pleine de finesse ,
Il est regrettable qu’elle n’aboutisse à aucun résultat valable.
Merci pour votre participation Mathieu mais nous nous en passerons .
Le 15/01/2008 à 17:19
Aucun resultat vaalble pour toi, chez moi ca marche nikel ^^
Je te trouve dur en plus etant donné que je présice les points que j’ai du modifier moi meme pour que ca marche. Mais si ca te suffit pas je peux detailler tout ca :
- sur l’article de Tonylepsie les guillemets ne sont homologués (sans doute dû à Wordpress qui n’accepte pas les slashes). Il faut donc tous les modifier à la mano.
- attention à bien mettre les fichiers dans les bons repertoires. Le js mootools dans inc/js, les js fancy dans inc/fancyupload et le swf dans swiff. Attention sur le tuto il y a tantot /inc tantot inc ce qui est différent si votre repertoire inc n’est pas a la racine
-meme remarque pour le $path : bien creer le repertoire et attention au / devant le inc
Si là ca marche pas ba on peut rien pour toi
Petit remarque : si vous voulez uploader autre chose que des images (comme moi) il suffit juste d’ajouter les extensions voulues dans FancyUpload.js ligne 62
Le 17/01/2008 à 18:11
Bonjour, tous fonctionne très bien chez moi (merci a la personne ayant fourni un fichier zipé :p)
Par contre j’aurais une petite question, quand j’upload une image sur mon serveur celle-ci à comme attribut « RW » (Soit 600)
Impossible de changer son statut même en passant par mon gestionnaire de FTP.
Dans le code puisque je n’ai rien trouvé, y a t’il une modification à effectuer pour que ce fichier se retrouve en 777 directement lors de l’upload ?
Merci
Snipouse
Le 18/01/2008 à 3:38
Bonjour, je me suis un peu sorti les doigts du tuuut et j’ai aussi réussi à le faire fonctionner chez moi, merci à tous et particulièrement à Mathieu (qui m’a motivé à rentrer dedans) mais je dois vous dire que si je ne prenais que Les classes Class.Extras, Element.Event, Element.Selectors, Fx.Style et Fx.Transitions, je ne voyais entre autre pas les barres de progressions… un problème que je rencontre, cependant, c’est que sous Firefox, ça fonctionne mais pas sous IE6, j’ai une erreur 404 aussi bien en local que online.
Le 18/01/2008 à 5:53
C’est encore moi, je viens de me rendre compte que seuls les pages de script « mootools.js - FancyUpload.js - Swiff.Uploader.swf - index.php et upload.php » sont nécessaires… la preuve ici : http://etendard.fr/viktorlebelge/fancy.rar
Le 20/01/2008 à 4:33
Et bien décidément, hé oui c’est toujours moi, je sais que ça peut intéresser pas mal de monde, j’ai réussi à bidouiller une version avec génération de miniatures. (Fonctionne toujours pas sous IE6 (du moins à l’heure actuelle, je vais y travailler)).
http://etendard.fr/viktorlebelge/fancy.rar
Le 21/01/2008 à 4:13
Voilà, j’ai bidouillé les modifications nécessaires pour que ça fonctionne sous IE6 aussi (je ne sais pas tester sous IE7 (pour le moment)), le nom des images est aussi automatiquement converti en minuscule…
Testé en local et online, il est nécessaire de modifier le chemin (en chemin absolu) dans index.php.
Le 08/03/2008 à 11:48
Bonjour,
J’ai mis ma version à jour, elle se trouve ici : http://www.charlier-huy.be/viktorlebelge/upload.rar
Elle permet de choisir le dossier de destination, créer des miniatures, écrire dans une base de données (le script de création des tables se trouve dans le fichier « aide.txt »), et enfin, visualiser automatiquement les images envoyées.
N’oubliez pas de consulter le fichier « aide.txt », vous verrez, ce n’est pas compliqué à mettre en place et ça fonctionne.
Le 04/04/2008 à 17:05
Hello,
Nickel ton dev, ca fonctionne pour l’upload de photos.
Maintenant une autre question qui viendrait à compléter ton script : comment faire pour insérer l’upload de photo dans un formulaire avec d’autres champs ?
Ainsi il y aurait un fomrulaire avec plusieurs champs dont un pour l’ajout de photo et à la fin de celui-ci, un bouton “valider” qui permettrait l’insertion en BDD des champs remplis des formulaires et l’upload des photos.
Je m’arrache les cheveux depuis des jours et des jours….
Pourrais-tu me guider ?
Le 19/04/2008 à 18:30
bonjour,
je cherche egalement un moyen de rajouté des champs dans le formulaire, mais je ne parvient pas a récupéré les donnees de ce champs.
aidez-nous svp :d
Le 22/04/2008 à 19:08
Hey hello, un grand merci IdleMan !
Par contre je ne vois pas les fichiers sur mon serveur à la fin de l’upload?! Ils devraient pourtant se trouver dans le répertoire /temp
Merci de votre aide …
Le 25/04/2008 à 15:16
Bonjour,
Merci d’avance !
Je rejoins Peek et laquiche, ça serai intéressant d’avoir des infos sur l’ajout d’autres champs dans ce formulaire
Le 25/05/2008 à 0:40
je sui nouvo en webdev et j’aimerai avoir des explication sur l’installation. j’ai istalé mai je n’arrive pas a testet mes page en local erreur 404. si kelkin peu peu me donner la procedure complète d’instalation je sui partant
merci de m’aider
Le 15/06/2008 à 22:13
Mon message s’adresse a ViktorLeBelge. Avant toute chose merci pour ta participation… Moi même je ne suis pas développeur, cependant ta contribution ma beaucoup plus. Cependant certaines chose n’ont pas l’aire de fonctionner correctement… Les miniatures ne s’enregistre pas et l’affichage des images non plus… Est-ce dut à mon manque de compétence ou aurais-tu corrigé le problème ? En tout cas merci beaucoup !
Le 16/06/2008 à 15:54
Bonjour,
je demande si quelqu’un a réussi à coupler Fancy Upload avec un script de détection de Flash ?
J’aurais aimé utiliser SWFObject pour ceci mais celui-ci a besoin qu’on l’initialise avec une référence explicite vers le fichier swf, au moment même où le swf est appelé. Or je n’ai pas vraiment trouvé comment avoir la main sur cette référence vers le fichier swf car Fancy Upload la gère à notre place…
Le 29/06/2008 à 1:14
Bonjour tout le monde,
Merci Viktorlebelge, ça m’a éclairé sur certains point. Par contre je remarque que tu passes par un fichier pour stocker des variables .. Pour ma part cette solution n’est pas envisageable car trop de monde pourrait utiliser le script en même temps. Bref, j’ai essayer de faire des INPUT type HIDDEN dans le formulaire qui appelle la page upload.php mais je récupère aucune variable ..
Comment faire pour transmettre des infos autrement que par un fichier ? Quelqu’un a une idée ?
Merci d’avance.
Le 02/08/2008 à 4:15
Tu peux conserver des données et pouvoir les afficher sur toutes les pages en créant des $_SESSION.
Par exemple : $_SESSION[’pseudo’] = $_POST[’pseudo’]
si la page actuelle a été appelé par un formulaire
PS : il faut mettre session_start(); pour pouvoir te servir des variables $_SESSION.
PPS : les variables $_SESSION ne sont détruites que lorsque le visiteur ferme son navigateur.
Tu peux te servir des variables $_SESSION sur n’importe quelle page à partir du moment qu’elles ont été créées et que tu met session_start(); avant.
Si tu veux supprimer toutes les variables $_SESSION du visiteur d’un seul coup, il faut mettre session_destroy();.
Le 02/08/2008 à 4:16
edit : remplacer les guillemets obliques de mon exemple par des vrais apostrophes, sinon ça ne fonctionnera pas évidemment
Le 13/08/2008 à 16:05
Bonjour
Pouvez vous m’aidez car je commence à perdre mon calme et c’est pas bon pour ma santé ;.)
Je débute dans ajax et j’aimerais installé mootools pour m’aider mais rien n’y fait, impossible d’installer ce framework. Il n’y aucune explication sur le net et c’est le seul tuto. J’aimerez installer la derniere version 1.2. Y aurait il un lien ou je puisse telecharger un pack avec les fichiers necessaire. Ou m’expliquer sur la façon de l’installer.
J’ai essayé de suivre le tuto d’en haut, mais je dois faire les choses à ‘envers.
Merci de votre aide
Le 24/10/2008 à 1:43
site steven home student you head tree america mail america
Le 24/10/2008 à 4:58
jhon house go house england speed elephant all no keyboard free
Le 03/07/2009 à 0:28
Pour infos les sessions j’ai testé avec Fancy Upload, y a pas moyen si tu l’initialise dans la page qui contient ton formulaire d’upload … Par contre ma session de user est bien identifiée … Une autre solution envisageable ? J’ai vu le champ data dans le javascript mais pas moyen de lui faire passer des valeurs non plus !
Merci d’avance pour vos éclaircissements