Utilisation des chargements et téléchargements de fichiers -- Flash CS3

La classe FileReference permet de charger et télécharger des fichiers entre un client et un serveur. Les utilisateurs sont invités à sélectionner le fichier à charger ou l'emplacement cible de téléchargement dans une boîte de dialogue (telle que la boîte de dialogue Ouvrir dans le système d'exploitation Windows).

Chaque objet FileReference que vous créez avec ActionScript se rapporte à un seul fichier sur le disque dur de l'utilisateur. L'objet a des propriétés qui informent sur la taille, le type, le nom et les dates de création et de modification du fichier.

Vous pouvez créer une occurrence de la classe FileReference de deux façons. Utilisez l'opérateur new, comme dans l'exemple suivant :

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

Vous pouvez aussi appeler la méthode FileReferenceList.browse(), qui ouvre une boîte de dialogue sur le système de l'utilisateur pour inviter ce dernier à sélectionner un fichier à transférer, puis crée un tableau d'objets FileReference si l'utilisateur sélectionne un ou plusieurs fichiers avec succès. Chaque objet FileReference représente un fichier sélectionné par l'utilisateur à partir de la boîte de dialogue. Un objet FileReference ne contient aucune donnée dans les propriétés FileReference (par exemple, name, size ou modificationDate) jusqu'à ce que l'un des événements suivants se produisent :

Pendant l'exécution d'un appel à la méthode FileReference.browse(), FileReferenceList.browse() ou FileReference.download(), la plupart des lecteurs poursuivent la lecture du fichier SWF.

Sous-rubriques

Classe FileReference

La classe FileReference permet de charger et télécharger des fichiers entre l'ordinateur d'un utilisateur et le serveur. Une boîte de dialogue du système d'exploitation invite l'utilisateur à sélectionner un fichier pour le charger ou à choisir un emplacement pour le télécharger. Chaque objet FileReference fait référence à un fichier unique sur le disque dur de l'utilisateur et inclut des propriétés contenant des informations sur la taille, le type, le nom, la date de création, la date de modification et le créateur du fichier.

Pour les opérations de chargement ou téléchargement, un fichier SWF peut uniquement accéder aux fichiers de son propre domaine, ce qui comprend tous les domaines spécifiés par un fichier de régulation interdomaine. Vous devez placer un fichier de régulation sur le serveur si le fichier SWF qui lance le chargement ou le téléchargement ne provient pas du même domaine que le serveur de fichiers.

Le script serveur qui gère le chargement doit attendre une requête HTTP POST comportant les éléments suivants :

POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache

------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6 
Content-Disposition: form-data; name="Filename"

sushi.jpg 
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Filedata"; filename="sushi.jpg"
Content-Type: application/octet-stream

Test File 
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Upload"

Submit Query
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
(actual file data,,,)

L'exemple suivant de requête HTTP POST envoie trois variables POST : api_sig, api_key et auth_token. Pour le chargement, elle utilise en outre la valeur de champ de données photo :

POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache

------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Filename"

sushi.jpg
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_sig"

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_key"

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="auth_token"

XXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="photo"; filename="sushi.jpg"
Content-Type: application/octet-stream

(actual file data,,,)
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Upload"

Submit Query
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7--

Chargement de fichiers sur un serveur

Pour charger des fichiers sur un serveur, commencez par appeler la méthode browse() pour permettre à l'utilisateur de sélectionner un ou plusieurs fichiers. Après appel de la méthode FileReference.upload(), le fichier sélectionné est transféré sur le serveur. Si l'utilisateur sélectionne plusieurs fichiers à l'aide de la méthode FileReferenceList.browse(), Flash Player crée un tableau de fichiers sélectionnés appelé FileReferenceList.fileList. Vous pouvez alors utiliser la méthode FileReference.upload() pour charger chaque fichier individuellement.

Par défaut, la boîte de dialogue de sélection de fichiers du système d'exploitation permet à l'utilisateur de choisir tout type de fichier sur l'ordinateur local. Les développeurs peuvent toutefois filtrer les types de fichier à l'aide de la classe FileFilter, en transmettant un tableau d'instances de filtres de fichiers à la méthode browse() :

var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);
var fileRef:FileReference = new FileReference();
fileRef.browse(allTypes);

Une fois que l'utilisateur a sélectionné les fichiers et cliqué sur le bouton Ouvrir du sélecteur de fichier du système, l'événement Event.SELECT est distribué. Si la méthode utilisée pour sélectionner le fichier à charger était FileReference.browse(), il faut utiliser le code suivant pour envoyer le fichier au serveur Web :

var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
try
{
    var success:Boolean = fileRef.browse();
}
catch (error:Error)
{
    trace("Unable to browse for files.");
}
function selectHandler(event:Event):void
{
    var request:URLRequest = new URLRequest("http://www.[yourdomain].com/fileUploadScript.cfm")
    try
    {
        fileRef.upload(request);
    }
    catch (error:Error)
    {
        trace("Unable to upload file.");
    }
}
function completeHandler(event:Event):void
{
    trace("uploaded");
}

Si vous essayez de charger un fichier à l'aide de la méthode FileReference.upload(), l'un des événements suivants peut être distribué :

Si vous créez un script serveur dans ColdFusion de manière à accepter les chargements de fichier en provenance de Flash Player, vous pouvez utiliser un code semblable à celui-ci :

<cffile action="upload" filefield="Filedata" destination="#ExpandPath('./')#" nameconflict="OVERWRITE" />

Ce code ColdFusion charge le fichier envoyé par Flash Player et l'enregistre dans le même répertoire que le modèle ColdFusion, en écrasant tout fichier existant du même nom. Cet exemple présente le minimum de code nécessaire à l'acceptation du chargement d'un fichier ; ce script ne doit pas être utilisé dans un environnement de production. Dans l'idéal, il faudrait ajouter un mécanisme de validation des données pour garantir que les utilisateurs chargent uniquement des types de fichiers autorisés, par exemple une image plutôt qu'un script côté serveur potentiellement dangereux.

Le code ci-après présente le chargement de fichiers via PHP, avec validation des données. Le script limite le nombre de fichiers chargés dans le répertoire cible à 10, vérifie que le fichier fait moins de 200 Ko et autorise uniquement le chargement et l'enregistrement de fichiers JPEG, GIF ou PNG.

<?php
$MAXIMUM_FILESIZE = 1024 * 200; // 200KB
$MAXIMUM_FILE_COUNT = 10; // keep maximum 10 files on server
echo exif_imagetype($_FILES['Filedata']);
if ($_FILES['Filedata']['size'] <= $MAXIMUM_FILESIZE)
{
    move_uploaded_file($_FILES['Filedata']['tmp_name'], "./temporary/".$_FILES['Filedata']['name']);
    $type = exif_imagetype("./temporary/".$_FILES['Filedata']['name']);
    if ($type == 1 || $type == 2 || $type == 3)
    {
        rename("./temporary/".$_FILES['Filedata']['name'], "./images/".$_FILES['Filedata']['name']);
    }
    else
    {
        unlink("./temporary/".$_FILES['Filedata']['name']);
    }
}
$directory = opendir('./images/');
$files = array();
while ($file = readdir($directory))
{
    array_push($files, array('./images/'.$file, filectime('./images/'.$file)));
}
usort($files, sorter);
if (count($files) > $MAXIMUM_FILE_COUNT)
{
    $files_to_delete = array_splice($files, 0, count($files) - $MAXIMUM_FILE_COUNT);
    for ($i = 0; $i < count($files_to_delete); $i++)
    {
        unlink($files_to_delete[$i][0]);
    }
}
print_r($files);
closedir($directory);

function sorter($a, $b)
{
    if ($a[1] == $b[1])
    {
        return 0;
    }
    else
    {
        return ($a[1] < $b[1]) ? -1 : 1;
    }
}
?>

Vous pouvez transmettre des variables supplémentaires au script de chargement à l'aide de la méthode de requête POST ou GET. Pour envoyer des variables POST au script de chargement, vous pouvez utiliser le code suivant :

var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.browse();
function selectHandler(event:Event):void
{
    var params:URLVariables = new URLVariables();
    params.date = new Date();
    params.ssid = "94103-1394-2345";
    var request:URLRequest = new URLRequest("http://www.yourdomain.com/FileReferenceUpload/fileupload.cfm");
    request.method = URLRequestMethod.POST;
    request.data = params;
    fileRef.upload(request, "Custom1");
}
function completeHandler(event:Event):void
{
    trace("uploaded");
}

L'exemple précédent crée un objet URLVariables à transmettre au script côté serveur distant. Dans les versions précédentes d'ActionScript, il était possible de transmettre des variables au script de chargement en passant des valeurs dans la chaîne de requête. ActionScript 3.0 vous permet de transmettre des variables au script distant à l'aide de l'objet URLRequest. Vous pouvez ainsi transmettre des données à l'aide de la méthode POST ou GET, ce qui simplifie et rationalise le transfert de gros volumes de données. Pour spécifier si les variables sont transmises à l'aide de la méthode de requête GET ou POST, il est possible de définir la propriété URLRequest.method sur URLRequestMethod.GET ou URLRequestMethod.POST, respectivement.

ActionScript 3.0 vous permet de remplacer le nom de champ par défaut du fichier à charger (Filedata) en ajoutant un deuxième paramètre à la méthode upload(), comme illustré dans l'exemple précédent (dans lequel la valeur par défaut Filedata est remplacée par Custom1).

Par défaut, Flash Player n'essaie pas d'effectuer un chargement de test ; vous pouvez toutefois le faire en transmettant la valeur true comme troisième paramètre de la méthode upload(). L'objectif du test est de vérifier que le chargement véritable se fera sans problème et que l'authentification du serveur, si nécessaire, réussira.

Téléchargement de fichiers à partir d'un serveur

Vous pouvez autoriser les utilisateurs à télécharger des fichiers à partir d'un serveur grâce à la méthode FileReference.download(), qui prend deux paramètres : request et defaultFileName. Le premier paramètre est l'objet URLRequest contenant l'URL du fichier à télécharger. Le second est facultatif ; il permet de spécifier un nom de fichier par défaut qui apparaîtra dans la boîte de dialogue de téléchargement. Si vous ignorez le second paramètre, defaultFileName, le nom de fichier utilisé est dérivé de l'URL.

Le code suivant télécharge un fichier nommé index.xml à partir du même répertoire que le document SWF :

var request:URLRequest = new URLRequest("index.xml");
var fileRef:FileReference = new FileReference();
fileRef.download(request);

Pour utiliser currentnews.xml comme nom par défaut au lieu de index.xml, spécifiez le paramètre defaultFileName, comme le montre l'extrait de code suivant :

var request:URLRequest = new URLRequest("index.xml");
var fileToDownload:FileReference = new FileReference();
fileToDownload.download(request, "currentnews.xml");

Le changement de nom du fichier peut s'avérer très utile si le nom du fichier sur le serveur est peu évocateur ou s'il a été généré automatiquement. Il est également judicieux de spécifier le paramètre defaultFileName lorsque vous téléchargez un fichier à l'aide d'un script côté serveur, au lieu d'effectuer un téléchargement direct. Par exemple, il est nécessaire de spécifier le paramètre defaultFileName si vous utilisez un script côté serveur qui télécharge des fichiers en fonction des variables URL qui lui sont transmises. Autrement, le nom par défaut du fichier téléchargé est le nom du script côté serveur.

Vous pouvez également envoyer des données au serveur avec l'appel de la méthode download() en ajoutant des paramètres à l'URL pour que le script serveur les analyse. L'extrait de code ActionScript 3.0 ci-après télécharge un document en fonction des paramètres transmis à un script ColdFusion :

package
{
    import flash.display.Sprite;
    import flash.net.FileReference;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.URLVariables;

    public class DownloadFileExample extends Sprite
    {
        private var fileToDownload:FileReference;
        public function DownloadFileExample()
        {
            var request:URLRequest = new URLRequest();
            request.url = "http://www.[yourdomain].com/downloadfile.cfm";
            request.method = URLRequestMethod.GET;
            request.data = new URLVariables("id=2");
            fileToDownload = new FileReference();
            try
            {
                fileToDownload.download(request, "file2.txt");
            }
            catch (error:Error)
            {
                trace("Unable to download file.");
            }
        }
    }
}

Le code suivant présente le script ColdFusion download.cfm, qui télécharge l'un des deux fichiers stockés sur le serveur en fonction de la valeur d'une variable URL :

<cfparam name="URL.id" default="1" />
<cfswitch expression="#URL.id#">
    <cfcase value="2">
        <cfcontent type="text/plain" file="#ExpandPath('two.txt')#" deletefile="No" />
    </cfcase>
    <cfdefaultcase>
        <cfcontent type="text/plain" file="#ExpandPath('one.txt')#" deletefile="No" />
    </cfdefaultcase>
</cfswitch>

Classe FileReferenceList

La classe FileReferenceList permet à l'utilisateur de sélectionner un ou plusieurs fichiers à charger dans un script côté serveur. Le chargement de fichiers est géré par la méthode FileReference.upload(), qui doit être appelée pour chaque fichier sélectionné.

Le code suivant crée deux objets FileFilter (imageFilter et textFilter) et les transmet sous forme de tableau à la méthode FileReferenceList.browse(). Ainsi, la boîte de dialogue du système d'exploitation propose deux types de fichiers possibles.

var imageFilter:FileFilter = new FileFilter("Image Files (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textFilter:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var fileRefList:FileReferenceList = new FileReferenceList();
try
{
    var success:Boolean = fileRefList.browse(new Array(imageFilter, textFilter));
}
catch (error:Error) 
{
    trace("Unable to browse for files.");
}

L'utilisation de la classe FileReferenceList pour autoriser le chargement de fichiers est semblable à l'utilisation de FileReference.browse(), sauf que FileReferenceList permet de sélectionner plusieurs fichiers. En cas de sélection de fichiers multiples, il est nécessaire de charger chacun des fichiers choisis à l'aide de FileReference.upload(), comme le montre le code suivant :

var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();

function selectHandler(event:Event):void
{
    var request:URLRequest = new URLRequest("http://www.[yourdomain].com/fileUploadScript.cfm");
    var file:FileReference;
    var files:FileReferenceList = FileReferenceList(event.target);
    var selectedFileArray:Array = files.fileList;
    for (var i:uint = 0; i < selectedFileArray.length; i++)
    {
        file = FileReference(selectedFileArray[i]);
        file.addEventListener(Event.COMPLETE, completeHandler);
        try
        {
            file.upload(request);
        }
        catch (error:Error)
        {
            trace("Unable to upload files.");
        }
    }
}
function completeHandler(event:Event):void
{
    trace("uploaded");
}

Etant donné que l'événement Event.COMPLETE s'ajoute à chaque objet FileReference dans le tableau, Flash Player appelle la méthode completeHandler() à la fin du chargement de chacun des fichiers.