Objectif :

Depuis Flash 8, une nouvelle API d’upload / download de fichiers est disponible, les classes de cet API se situent dans le répertoire flash.net.* Nous allons ensemble découvrir les classes et méthodes que Flash 8 propose pour gérer l’upload de fichiers sur un serveur distant. Au passage, nous utiliserons la notion d’écouteur.

Ce tutorial est la première partie d’un tout consacré à FileReference et ne traitera que de l’upload, nous verrons dans quelques semaines le donwload et les tips & tricks de FileReference ainsi que la classe FileReferenceList.

Niveau requis : Débutant Prog. AS 2.0 / Notions de serveurs Web
Auteur : Eric Ambrosi
Thèmes abordés : Installation du serveur Apache Wamp, configuration de wamp, utilisation de la classe FileReference
Notions abordées : Les écouteurs, les méthodes asynchrones, serveurs Web
Classes abordées : FileReference, Alert, PendingCall
Logiciels : Flash 8, un serveur apache type (wamp, easyphp, mamp (mac), IIS, etc)
Fichiers à télécharger :

Fichiers d’installation Wamp Server – site de WampServer

Qu’est-ce que WampServer ?

WampServer est un soft qui va nous permettre d’installer, sur un ordinateur windows, les services (ou daemons sous linux) apache et mysql.  Ces services vont être capables d’interpréter correctement les scripts de types php par exemple et si on en avait le besoin de nous permerttre de nous connecter à une base de donnée de type my-sql ou autre.

Pour réaliser un upload avec flash, il nous faudra utiliser un script php très simple qui sera interprété grâce à notre serveur apache. Wamp a de nombreux autres avantages et je vous invite à faire un tour sur leur site si vous souhaitez plus de détail sur cette technologie. D’autres très bonnes alternatives comme easyphp par exemple sont possibles pour réaliser cet exercice.

Installation et Configuration de WampServer

Tout d’abord télécharger et installer le server Wamp. Pour cela, il faut simplement suivre la procédure indiquer et valider tout le temps sans trop se poser de questions. Ce qui est vraiment intéressant par la suite est que wamp ne nécessite que très peu de configuration et permet le fonctionnement d’autres technologies comme remoting.

I – Création d’un nouveau répertoire

La première chose à faire est de vous créer un nouveau répertoire sur c: que nous allons appeler upFlash. C’est ici que nous allons stocker nos fla, swf, et notre fameux script php. Vous vous retouvez donc avec un répertoire c:\upFlash\.

Le problème que nous avons à ce stade est que si nous plaçons ici un fichier php, il ne pourra pas être interprété par un quelquonque navigateur. Pour cela il nous faut créer un alias dans wamp.

II – Mise en place d’un nouvel Alias

Définition d’un alias :

Un alias est en fait la relation qu’il y a entre l’accès au répertoire c:\upFlash\ et l’accès à ce même répertoire, mais cette fois, au sein d’un navigateur Internet.

Création de l’alias :

Pour créer un alias faites un clique gauche sur l’icone wamp dans la barre windows. Allez sur alias directories => add an alias (image ci-dessous)

Configuration de l’alias :

Une fenêtre DOS s’ouvre

a – Le premier paramètre est l’adresse su répertoire dans votre navigateur. Il faut simplement entrer le nom du répertoire que vous souhaitez configurer sous localhost. Je m’explique, à chaque fois que vous souhaiterez rendre accessible un dossier celui-ci sera accessible à l’adresse : http://localhost/nom/

Ici nom sera le premier paramètre que vous rentrez pour la création de l’alias. Entrons comme nom exoUpFlash.

Le répertoire c:\upFlash\ sera donc accessible à l’adresse: http://localhost/exoUpFlash/

b – Le second paramètre est l’adresse du répertoire sur le disque dur : il faut donc passer en paramêtre : c:\upFlash\ et faire Entrer. A ce stade wamp doit redémarrer si ce n’est pas fait, redémarrez le manuellement en cliquant gauche puis Stop All Services puis Start All Services.

Création d’un nouveau FLA

Créer un nouvel Fla (fichier Flash) et l’enregistrer sur c:\upFlash\exo.fla. Ensuite ouvrez votre navigateur préféré puis tapez dans la barre d’adresse  : http://localhost/exoUpFlash/. Vous y verrez votre exo.fla nouvellement créé.

III – Configuration du php.ini

Remarque : Cette étape est facultative dans la plus part des cas et l’upload de fichiers supéreurs à 8M peut fonctionner avec du wamp mais cette étape devient importante pour des serveurs de production.

• Nous allons maintenant configurer le fichier php.ini afin de travailler dans des conditions réelles, pour cela 2 variables du serveur sont à modifier.

post_max_size

upload_max_filesize

Je sais que peu de monde modifie ces variables, pour ma part j’ai travaillé sur la mise en place d’une appli de gestion de doc (hébergée sur un serveur Linux Debian) et sans la modification de ces variables l’upload des fichiers ne dépassait pas 8M.  8M étant la valeur par défaut spécifiée dans le php.ini.

Cliquer sur l’icone wampserver à nouveau et sélectionner configFile => php.ini, trouvez les lignes suivantes via CTRL+F

(image ci-dessous)

Modifier les lignes de cette façon :

upload_max_filesize = 300M

post_max_size = 300M

• Redémarrez WampServer en stoppant puis en relançant les services.

Vous avez fini de configurer la partie serveur . Mais à quoi peut bien servir de mettre 300M puisque FileReference est officiellement, selon Adobe, restreint à 100Mo . Je vous laisse faire vos propres test .

Mise en place du script php

Tout d’abord nous allons créer un sous répertoire c:\upFlash\uploads\. Il nous servira à stocker nos fichiers uploadés. Voici le script php que nous allons utiliser, c’est un script très simple que nous allons essayer de comprendre ensemble :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// $_FILES s'apparente à $_POST; en fait la classe de flash 8 FileReference
// utilise la méthode POST afin de transférer des fichiers à php,
// on récupère notre fichier via la propriété Filedata
// du Tableau associatif $_FILES
$file = $_FILES["Filedata"];
 
if ( isset ( $file ) ) //à l'arrivée de $file
{
// on transfert le fichier temporaire créé sur le serveur
// dans le répertoire uploads nouvellement créé
move_uploaded_file ( $file['tmp_name'], "./uploads/" .utf8_decode($file['name']));
}
 
// petite astuse donnée par Thibault / DickRivers
// pour mac et certains serveurs
// bug du onComplete jamais déclenché côte flash
// donc pour déclencher le onComplete sous mac faire un simple echo
// d'une chaine de caractère avec au moins 1 espace
echo " Script Ok !";

Enregistrer ce script directement dans le répertoire c:\upFlash\ avec comme nom : upload.php.
Ouvrez votre navigateur à l’adresse :  http://localhost/exoUpFlash/upload.php
Si votre script est correcte, vous devriez voir s’afficher le texte : Script Ok !
Si il y a une erreur alors souvent, il s’agit d’un point virgule ou d’une parenthèse manquante.

Remarque : la propriété Filedata ne s’écrit pas comme on s’y attendrait en flash fileData alors faites attention c’est une faute courante.

La classe FileReference de Flash 8  / Notre premier Upload

Ouvrez le fla que vous avez créé récemment exo.fla dans le répertoire c:\upFlash\ ou créez le si ce n’est déjà fait.

1 – Ajouter un nouveau calque et le nommer ‘action’, renommer l’ancien calque ‘contenu’. Notre code sera centralisé sur le calque action.

2 – Ouvrir le panneau des composants et déplacer 2 composants bouton sur la scene ainsi qu’un composant progressbar.
Nommer la progressbar ‘my_pb’, le premier bouton ‘upload_btn’ et le second bouton ‘cancel_btn’.
Dans l’onglet paramètres du premier bouton changer la propriété label en ‘UpLoader’.
Dans l’onglet paramètres du premier bouton changer la propriété label en ‘Annuler’.

3 – transférer un composant Alert dans votre bibliothèque, ce composant nous permettra d’afficher des messages d’alerte au sein de flash. Voici à quoi devrait ressembler votre scene sous Flash8 :

4 – Pour rappel : l’objectif de cette appli est de permettre d’uploader un fichier dans un répertoire cible, en l’occurence le répertoire de stockage sera c:\upFlash\uploads\ ou via notre navigateur internet http://localhost/exoUpFlash/uploads/.

5 – ouvrir le panneau action sur la frame du layer action (raccourci F9). Voici le code côté flash de notre application :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

// Nous commençons par importer dans flash la classe FileReference.
// Nous devons importer la classe FileReference car ce n'est pas une classe top level
// , c'est à dire qu'elle n'est pas importée par défaut par le compilateur
// au contraire de la classe MovieClip par exemple
 
import flash.net.FileReference;
 
//ensuite nous devons importer la classe Alert qui va nous permettre
//d'afficher des messages d'alertes sous forme de pop-up
//n'oubliez pas de transférer un composant Alert dans votre bibliothèque
import mx.controls.Alert;
 
//création d'un nouvel Objet FileReference
//c'est cet objet qui va nous permettre d'uploader un fichier vers le serveur
//avec la méthode upload
var myFileRefUpload:FileReference = new FileReference();
 
//configuration de la progress barre en mode manuel
//Ce paramêtrage peut aussi se faire à partir de l'IDE de flash
//en mode manuel nous pourrons fournir à la progressbar
//le nombre de bytes chargés et le nombre de bytes total
my_pb.mode = "manual";
 
//on crée ici un objet d'écoute
//cet objet va centraliser toutes les méthodes asynchrones de FileReference
var monEcouteurUpload:Object = new Object();
 
//l'évènement onSelect est déclenché lorsque l'utilisateur a sélectionné
//un fichier présent dans un répertoire
monEcouteurUpload.onSelect = function(pFile:FileReference)
{
	//pFile est un objet de type FileReference, c'est l'objet passé en paramètre
	//qui contient en propriété le nom du fichier que l'on souhaite uploader
	for (var z in pFile)
	{
		trace(z+" :: "+pFile[z]);
	}//<= toujours passer le chemin absolu pour que cela fonctionne dans flash
	var lienUpload = "http://localhost/exoUpFlash/upload.php";
	pFile.upload(lienUpload);
};
//L'évènement onProgress est déclenché lors de l'upload de fichier et renvoie 3 paramêtres
//dont 2 qui récupèrent l'état du téléchargement en cours
monEcouteurUpload.onProgress = function(pFile:FileReference, pBytesLoaded:Number, pBytesTotal:Number)
{
	//la méthode setProgress affecte des valeurs à la progressbar
	//à chaque fois que l'upload se met à jour
	my_pb.setProgress(pBytesLoaded,pBytesTotal);
};
//évènement déclenché lorsque l'upload est terminé
monEcouteurUpload.onComplete = function(pFile:FileReference)
{
	//on ouvre un pop-up pour signifier que l'upload est terminé
	var nomFichier = pFile.name;
	Alert.show("Le fichier "+nomFichier+" a été correctement uploadé !","Upload Terminé");
};
//la méthode cancel se déclenche uniquement lorsque l'utilisateur annule l'upload dans
//la fenêtre parcourir ( lors du browse() )
monEcouteurUpload.onCancel = function(pFile:FileReference)
{
	//la méthode show de la classe Alert permet d'afficher un pop-up
	Alert.show("L'upload du fichier a été annulé !","Upload Annulé!!");
	trace('toto');
};
//la méthode onIOError se déclenche lorsque l'utilisateur annule l'upload ou le download
//une fois que ceux-ci sont en cours et signale de façon plus général une interuption du flux
monEcouteurUpload.onIOError = function(pFile:FileReference)
{
	if (pFile.name != undefined)
	{
		var nomFichier = pFile.name+" ";
	}
	Alert.show("Upload en cours du fichier "+nomFichier+" a été annulé par l'utilisateur!","Annulation Utilisateur !");
};
//myFileRefUpload souscrit à l'écouteur monEcouteurUpload
//Bizarrement Adobe n'a pas utiliser le modele évèenementiel d'AS2.0 avec
//addEventListener, mais cela est corrigé en AS3.0
myFileRefUpload.addListener(monEcouteurUpload);
 
/////////////////////////////////////////////////////////////////////////////
 
//gestion des boutons
//la méthode browse de FileReference peut prendre un tableau d'objet ( tableau associatif )
//en paramêtre ou bien aucun paramêtre. Lorsqu'aucun argument n'est fourni, tous les types
//de fichiers sont sélectionnables pour l'upload, aucun filtre n'est appliqué.
//voici un exemple de tableau à passer comme argument à la méthode
//browse pour filtrer le type de fichiers que l'on souhaite rendre accessibles.
var monTabType:Array = [{description:"Divers Formats Images [*.gif,*.GIF,*.tga,*.TGA,*.bmp,*.BMP]", extension:"*.gif;*.GIF;*.tga;*.TGA;*.bmp,*.BMP"}, {description:"JPEG", extension:"*.jpeg;*.JPEG"}, {description:"PNG", extension:"*.png;*.PNG"}, {description:"Vidéo AVI", extension:"*.avi;*.AVI"}, {description:"Vidéo QuickTime [*.mov,*.MOV,*.mpeg]", extension:"*.mov;*.MOV;*.mpeg"}, {description:"MSI", extension:"*.msi;*.MSI"}, {description:"Exécutable", extension:"*.exe;*.EXE"}, {description:"Tous les fichiers", extension:"*.*"}];
 
//on utilise ici un raccourci avec Handler
upload_btn.clickHandler = function()
{
	//déclenchement de la méthode browse pour parcourir notre disque
	//à la recherche d'un fichier cobaye
	myFileRefUpload.browse(monTabType);
};
//on annule l'upload grâce à la méthode cancel
cancel_btn.clickHandler = function()
{
	//déclenchement de la méthode cancel manuellement
	//l'évènement onIOResult et non l'évènement onCancel sera déclenché par cette méthode
	myFileRefUpload.cancel();
};
<a href="http://www.flashxpress.net/_wp/wp-content/uploads/2008/11/illus_tuto_upload.jpg">
</a>

Ca y est tout est en place pour que notre petite appli fonctionne .

Il ne suffit plus que de faire un ctrl+enter et vous pourrez vous lancer dans des back-offices incluant du FileReference

Voici les sources