Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Upload et Download avec FileReference

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Compatible PHP. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash 8. Cliquer pour en savoir plus sur les compatibilités.Le 13 septembre 2005

Etape 1 : Les éléments du tutoriel

Nous allons créer trois éléments sur la scène :

  • une DataGrid que nous appelerons grid
  • deux compos bouton :
    1. up_bt pour l'upload
    2. dn_bt pour le download

Etape 2 : L'upload

Nous allons créer une première instance de la classe FileReference. C'est cette classe qui permet à la foi l'upload et le download. Elle se trouve dans le package flash.net, d'où les deux lignes suivantes

import flash.net.FileReference;
 
var fr:FileReference = new FileReference();

Pour la suite, il faut bien comprendre les étapes d'un upload :

  • une fenetre de choix de fichier s'ouvre
  • l'utilisateur choisit le fichier
  • on envoie le fichier au serveur
  • on apprend que le fichier a bien été envoyé. Simultanément, le serveur traite la réception du fichier

Etape 2-1 : Ouverture de la fenêtre de selection

Le choix a été fait de prendre un compo bouton, donc il faut déclarer un listener de click

up_bt.addEventListener("click",this.clickEvent);

Nous avons donc une fonction clickEvent qui correspont à l'appui sur le bouton Upload. FileReference dispose d'une méthode qui s'appelle browse qui fait apparaitre une et une seul fenêtre de choix de fichier. FileReference.browse prend en parametre un tableau de filtres de fichiers. Un filtre est un objet présentant trois propriétés :

  • une description
  • un filtre d'extensions : un string delimité par des ”;” et avec des valeurs intermédiaires en *.ext (*.jpg,*.swf)
  • un filtre de types mac : ex : SWFL pour les fichiers SWF

Cette méthode retourne un booléen pour dire si la fenetre a bien été créée, et deux évènements pour la validation et l'annulation. Ces évènements doivent être écoutés via un listener :

var ecouteur:Object = new Object();
 
fr.addListener(ecouteur);
 
ecouteur.onSelect = function(file:FileReference) {
	//...//
}

et donc pour notre appui sur le bouton Upload, on a le code suivant :

var filters:Array = new Array();
filters.push({description:"Image files ( .jpg, .gif, .png)", extension:"*.jpg;*.gif;*.png", macType:"JPEG;jp2_;GIFF"});
filters.push({description:"Flash Movies", extension:"*.swf", macType:"SWFL"});
 
function clickEvent() {
	if (fr.browse(filters)) {
		trace("Bien créé la dialog");
	} else {
		trace("Erreur de création de dialog");
	}
}

Etape 2-2 : Uploader le fichier

Deuxième méthode importante de FileReference : upload(url) cette méthode fonctionne un peu comme le submit d'un formulaire html : elle upload le fichier sur le serveur sur lequel se trouve le script. Celui ci peut ensuite traiter le fichier uploadé. Il vous faut donc de l'autre coté un script php qui gerera le tout. On l'appelera upload.php dans notre cas.

ecouteur.onSelect = function(file:FileReference) {
	file.upload("http://monserveur/monsite/upload.php");
}

upload génère une série d'évènements. Vous pourrez vous référer à la doc pour les comprendre. Ici nous ne parlerons que de onComplete qui est déclenché une fois que le fichier est bien sur le serveur.

Etape 2-3a : gestion du fichier sur le serveur

Pour cette exemple, nous supposerons que vous disposez dans un même répertoire le répertoire upload accessible en écriture et le script upload.php suivant :

<?
 
$file = $_FILES['Filedata'];
copy($file['tmp_name'],"./upload/".$file['name']);
 
?>

Voici comment il s'explique : le fichier est décrit pour le script comme un fichier temporaire dont les informations se trouvent dans le tableau $_FILES['Filedata'] La référence 'Filedata' est une donnée de la méthode d'upload de Flash. $_FILES contient une foule d'informations, le type MIME de fichier, sa date de création etc. Nous ne nous interesserons qu'à deux d'entre elles :

  • tmp_name qui est l'uri du fichier temporaire uploadé sur le serveur
  • name qui est le nom du fichier.

La deuxième ligne vous l'aurez compris ne fait que copier le fichier temporaire uploadé dans le répertoire upload avec son bon nom de fichier.

Etape 2-3b : Affichier le fichier dans la dataGrid

Nous allons pour cela utiliser l'évènement onComplete, et utiliser quelques attributs de FileReference

  • FileReference.name qui est le nom du fichiers
  • FileReference.creationDate qui est sa date de création
  • FileReference.type qui est le type du fichier (attention ce n'est pas un type MIME !)

Il en existe d'autres, je vous laisse vous reporter à l'aide

ecouteur.onComplete = function(file:FileReference) {
	var item:Object = new Object();
	item.FileName = file.name;
	item.Date = file.creationDate;
	item.type = file.type;
	grid.addItem(item);
}

Voila pour l'upload

Etape 3 : Downloader un fichier uploadé

Bon, cet exemple est idiot vu qu'il nous servira juste à télécharger un fichier que l'on vient tout juste d'uploader, il est juste bon pour l'explication.

Nous allons tout d'abord écouter l'évènement souris du bouton Download

dn_bt.addEventListener("click",this.downClickEvent);

puis créer une FileReference pour le download :

var dl:FileReference = new FileReference();

FileReference contient en fait une autre méthode qui est download(url,nom)

  • Le premier paramètre est l'URL du fichier à télécharger
  • Le deuxième un nom par défaut pour ce fichier

donwload retoure true si tout s'est bien passé et l'invite de download s'est bien affichée, false dans tous les cas contraires. Nous allons télécharger l'objet selectionné de la grille, d'où la fonction suivante :

function downClickEvent() {
	if(dl.download("http://localhost/upload/"+grid.selectedItem.FileName,grid.selectedItem.FileName)) {
		trace("download ok")
	}
	else trace("download error");
}

A noter également que download génère toute une série d'évènements pour gérer les erreurs, la progression etc.

Voila pour les bases sur cette toute nouvelle classe bien pratique. Vous trouverez avec ce tutorial :

  • un fla
  • deux classes simplifiant la gestion des filtres.
  • le script php

filereference.zip