PictureSender = URLLoader med upload progress

Kategori: Tips og tricks | Kommentarer (2)
Gemt: 2009-02-11 14:50


I den Facebook applikation som vi er igang med i øjeblikket kan brugerne manipulere et billede, som vi tager et “screenshot” af og encoder med den glimrende PNGEncoder fra as3corelib - så langt, så godt.

Men, når det herefter skal sendes til serveren med URLLoader, så er det knapt så godt.

For det første, så har URLLoader ganske vidst en Event.PROGRESS som man kan lytte på, men den har kun med download af data af gøre og ikke upload, som det principielt er når vi sender billedet til serveren.
Det betyder så, at vi ikke har mulighed for at give nyttig feedback til brugeren i form af “10% uploaded”, og når der er tale om filer af en hvis størrelse, så kan der dermed sagtens gå både 5, 10 og 15 sekunder uden ordentligt feedback.

For det andet, så har der været et mærkeligt problem på brugere som har brugt en kombination af Mac+Safari, hvor der ganske enkelt engang imellem aldrig er kommet noget svar tilbage fra serveren, og det på trods af at jeg lytter på alle potentielle events, både IOError, HttpStatus, Open m.fl. - ingenting!
Og når jeg har haft kigget i serverloggen er det som om at den side der gemmer aldrig er blevet kaldt, som om at requesten simpelthen er forsvundet i den blå luft.
Med andre ord, så sidder brugeren bare og venter i en uendelighed uden at der sker noget, hvilket er meget langt fra optimalt.

Jeg har haft prøvet alle mulige forskellige måder at sende requesten på - binary, base64 encoded, GET, POST og meget andet - men altsammen med samme resultat, nogen gange fejler det bare på Mac+Safari når der sendes mange data.

Så, for at slå to fluer med et smæk, har jeg lavet min egen klasse, som både er i stand til at give feedback undervejs såvel som at eliminere problemet med Mac+Safari.
Ganske enkelt gør klassen det, at den deler billedet op i mange små bidder, som den sender én af gangen, og for hver sendt bid sender den en event, så man kan lave en nydelig upload progress.

På serveren er der så et php-script som laver en midlertidig fil, hvor den løbende gemmer de enkelte bidder, og når den sidste bid er modtaget, slettes den midlertidige fil og en rigtig billedfil, i dette tilfælde png, genereres.

Alt i alt, betyder det at billedet kan sendes med denne smule kode:

var pngStream:ByteArray = PNGEncoder.encode(pngSource);

var url:String = "http://www.server,dj/save_picture.php";
var filename:String = "mitbillede";
var steps:int = 20; //Antallet af bidder som billedet deles op i

var pictureSender:PictureSender = new PictureSender(url, filename, pngStream, steps);
pictureSender.addEventListener(pictureSender.UPLOAD_PROGRESS, uploadProgress);
pictureSender.addEventListener(Event.COMPLETE, loaderComplete);
pictureSender.send();

public function uploadProgress(_e:ProgressEvent) {
	trace("Upload " + String(Math.round((_e.bytesLoaded / steps) * 100)) + "%");
}

public function loaderComplete(_e:Event):void {
	trace("upload complete");
}

Jeg har samlet det nødvendige, både ActionScript og php, i en zip-fil som alle er velkomne til at downloade og bruge som de har lyst:
PictureSender.zip

Værd at bemærke er dog, at det er noget jeg hurtigt har bikset sammen til mig selv, så det kan helt sikkert både struktureres og dokumenteres bedre, men håber det kan bruges alligevel.

Note: Normalt bruger man FileReference når der tales om upload af filer, men da der i dette tilfælde er tale om data som Flash har genereret, frem for en fysisk fil fra brugerens harddisk, så kan den ikke bruges.


File upload i Flash aka FileReference

Kategori: Tips og tricks | Kommentarer (27)
Gemt: 2006-04-18 12:49


Lige siden jeg så at det i Flash 8 nu var blevet muligt at lave file upload 100% i Flash, uden nogle fuskede usynlige html-sider, har jeg haft glædet mig til at afprøve det.
Nu er der så dukket et projekt op hvor det er oplagt at bruge, og så er det jo at man begynder at få øje på alle de små problemer og irritationsmomenter.

Læs resten af dette indlæg