masputih.com - OLD SITE

05 April 2008 in ActionScript 3, Tutorial | permalink

Membuat Image Uploader

Kali ini saya membahas tentang pembuatan aplikasi sederhana untuk upload file ke server. Walaupun demo yang saya buat hanya bisa digunakan untuk upload gambar, dengan sedikit modifikasi, sourcecode aplikasi ini dapat digunakan untuk berbagai file, juga bisa diubah dari uploader menjadi downloader. Berikut ini demonya :

Penting - Silakan coba upload gambar. Besar file maksimum 100KB ( bandwidth mahal ). Gambar yang Anda upload akan dihapus secara otomatis setiap jam. Dan ingat UU IT yang baru, jangan upload gambar jorok.

Komponen utama dari aplikasi ini adalah class FileReference. Class ini yang memungkinkan kita memilih dan meng-upload file yang kita inginkan. Detil tentang class ini bisa Anda baca sendiri di manual. Berikut ini methods dan beberapa tipe events yang akan kita gunakan :

• Event.SELECT
• Event.OPEN
• DataEvent.UPLOAD_COMPLETE_DATA
• FileReference.browse()
• FileReference.upload()
• FileReference.cancel()

Saya juga menggunakan beberapa tipe Events yang sifatnya opsional tetapi sangat bermanfaat, khususnya untuk debugging, yaitu :

• IOErrorEvent.IOError
• HTTPStatusEvent.HTTP_STATUS

Di sisi server, saya menggunakan sebuah skrip PHP sederhana yang bisa Anda cari sendiri di Internet, silakan tanya Om Google. Di manual Flash atau Flex juga ada contoh skrip serupa.

Diagram

Di bawah ini diagram aplikasi yang akan kita buat. Klik gambar untuk membuka gambar aslinya yang lebih besar.

Silakan unduh ImageUplader.zip dan buka file Uploader_starter.as. Ganti nama file ini dengan Uploader.as ( sama dengan nama class-nya yaitu Uploader). Buka juga file ImageUploader.fla.

Class Uploader (starter)

package { import fl.controls.Button; import fl.controls.ProgressBar; import flash.display.MovieClip; import flash.display.StageScaleMode; import flash.display.Sprite; import flash.events.Event; import flash.events.DataEvent; import flash.events.ProgressEvent; import flash.events.HTTPStatusEvent; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLRequest; import flash.text.TextField; import flash.ui.Mouse; public class Uploader extends Sprite { //on-stage objects public var container:MovieClip; //UI private var _browseButton:Button; private var _uploadButton:Button; private var _cancelButton:Button; private var _filename_txt:TextField; private var _progressBar:ProgressBar; private var _status:TextField; //file reference private var _fileRef:FileReference; private var _imageFilter:FileFilter; private var _fileTypes:Array; private var _filename:String; public function Uploader() { stage.scaleMode = StageScaleMode.NO_SCALE; initFileReference(); init(); } private function init():void { //UI _filename_txt = container.filename; _browseButton = container.browseButton; _uploadButton = container.uploadButton; _uploadButton.enabled = false; _cancelButton = container.cancelButton; _cancelButton.visible = false; //progress bar _progressBar = container.progressBar; _progressBar.indeterminate = false; _progressBar.mode = "manual"; _progressBar.minimum = 0; _progressBar.visible = false; //status text _status = container.status; _browseButton.addEventListener(MouseEvent.CLICK, browseFile); _uploadButton.addEventListener(MouseEvent.CLICK, uploadFile); _cancelButton.addEventListener(MouseEvent.CLICK, cancelUpload); } private function browseFile(e:MouseEvent):void { _status.text = ""; } private function uploadFile(e:MouseEvent):void { } private function cancelUpload(e:MouseEvent):void { _status.text = "upload cancelled"; } /** * initialize FileReference object */ private function initFileReference():void { } private function fileRefListener(e:Event):void { } private function errorListener(e:IOErrorEvent):void { _status.text = "IO Error"; } private function httpListener(e:HTTPStatusEvent):void { _status.text = e.status.toString(); } } }

Instance Variables

Kita definisikan dulu beberapa instance variable dan konstanta. Kita mulai dengan konstanta berupa alamat URL skrip PHP dan direktori tempat gambar disimpan serta ukuran maksimum file gambar yang bisa di-upload.

private const UPLOAD_URL:String = "http://masputih-labs.com/phpscripts/imageUpload/upload.php"; private const IMAGE_DIR:String = "http://masputih-labs.com/phpscripts/imageUpload/images/"; private const MAX_SIZE:uint = 102400; //100KB

Berikutnya adalah instance variable yang berkaitan dengan objek FileReference.

//file reference private var _fileRef:FileReference; private var _imageFilter:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png"); private var _fileTypes:Array = new Array(_imageFilter); private var _filename:String;

Apa hubungan antara objek FileReference dan FileFilter ? Silakan Anda baca sendiri di manual atau di livedocs.

Inisialisasi

Proses inisialisasi kita bagi dalam dua bagian yaitu inisialisasi FileReference : initFileRef( )  dan inisialisasi UI : init ( ). Kenapa? Biar nggak ruwet.

Inisialisasi FileReference

Di dalam function initFileRef( ), kita buat sebuah objek FileReference dan kita definisikan pula event handler untuk objek ini.

private function initFileReference():void { _fileRef = new FileReference(); // _fileRef.addEventListener(Event.OPEN, fileRefListener); _fileRef.addEventListener(Event.SELECT, fileRefListener); // _fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileRefListener); _fileRef.addEventListener(ProgressEvent.PROGRESS, fileRefListener) // _fileRef.addEventListener(IOErrorEvent.IO_ERROR, errorListener); _fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpListener); }

Mari kita lihat beberapa event di atas :

• Event.OPEN : di-broadcast pada saat FileReference membuka koneksi dengan server
• Event.SELECT : di-broadcast pada saat kita memilih sebuah file
• DataEvent.UPLOAD_COMPLETE_DATA : di-broadcast pada saat file selesai di-upload . Untuk upload data, event ini lebih cocok digunakan daripada Event.COMPLETE.
• ProgressEvent.PROGRESS : di-broadcast selama proses upload berlangsung
• IOErrorEvent.IOError : di-broadcast jika terjadi masalah penulisan/pembacaan data
• HTTPStatusEvent.HTTP_STATUS : di-broadcast pada saat FileReference menerima respon dari server. Event ini sangat berguna untuk debugging komunikasi antara Flash dengan server.

Untuk efisiensi, empat event yang pertama, kita handle saja dengan satu listener function. Sedangkan dua yang terakhir, kita handle dengan dua function yang berbeda karena kedua event ini lebih banyak berperan dalam proses komunikasi dengan server dan supaya bisa digunakan untuk keperluan debugging jika Anda ingin memodifikasi sourcecode untuk membuat aplikasi yang lebih kompleks.

Sekarang kita lihat function fileRefListener() yang akan meng-handle keempat event di atas.

Class Event adalah induk ( superclass ) dari semua event yang lain. Jadi, dengan mendeklarasikan class ini sebagai argumen fileRefListener() kita telah membuat event handler yang bisa menangani berbagai macam event. Dan karena semua event memiliki properti type kita tinggal menggunakan properti ini untuk mendeteksi jenis event yang diterima oleh fileRefListener(). Karena event.type yang mungkin diterima oleh fileRefListener() ada lebih dari dua macam, lebih efisien kalo kita menggunakan statemen switch-case.

private function fileRefListener(e:Event):void { switch(e.type) { case Event.OPEN: _status.text = "Opening connection ..."; _progressBar.visible = true; break; case Event.SELECT: _status.text = ""; if ( _fileRef.size > MAX_SIZE) { _status.text = "Max file size is 100KB"; return; } _filename = _fileRef.name; _filename_txt.text = _filename; _uploadButton.enabled = _uploadButton.selected = true; break; case DataEvent.UPLOAD_COMPLETE_DATA: _progressBar.visible = false; _uploadButton.enabled = _browseButton.enabled = true; _status.htmlText = "upload complete <br><a href='"+IMAGE_DIR+_filename +"'><b>Click here to see the uploaded image</b></a>"; break; case ProgressEvent.PROGRESS: //set progress bar max value _progressBar.maximum = ProgressEvent(e).bytesTotal; //manually set progress bar's width _progressBar.setProgress(ProgressEvent(e).bytesLoaded, _progressBar.maximum); // _uploadButton.enabled = _browseButton.enabled = false; // _status.text = "uploading " + Math.ceil(_progressBar.percentComplete) + " %"; break; } _cancelButton.visible = _progressBar.visible; }

Blok case I : menampilkan komponen ProgressBar jika Event.type adalah Event.OPEN.

Blok case II : pada saat kita (user) memilih sebuah file atau dengan kata lain pada saat Event.type yang diterima adalah Event.SELECT, maka yang pertama dilakukan oleh fileRefListener() adalah mengecek ukuran/besar file tersebut. Jika ukurannya melebihi ukuran maksimum, maka baris di bawah if tidak akan diproses karena statemen return akan membatalkan eksekusi blok case ini. Jika ukuran file masih di bawah ukuran maksimum, maka yang pertama dilakukan oleh function ini adalah mengambil nilai dari properti name milik objek FileReference. Properti ini bertipe string dan berisi nama file yang dipilih.

Directory path dari file ini tidak bisa diakses dengan alasan sekuriti. Kita hanya bisa mengakses directory path jika kita membuat aplikasi untuk Adobe AIR.

Kemudian, karena sudah ada file yang dipilih, maka uploadButton akan diaktifkan. Nama file yang telah dipilih ditampilkan di filename_txt.

Blok case III : saat function ini menerima DataEvent.UPLOAD_COMPLETE_DATA, ProgressBar disembunyikan dan semua tombol diaktifkan kembali. Sebuah link yang menunjuk pada alamat URL gambar yang baru di-upload ditampilkan di TextField _status.

Blok case IV :  selama proses upload berjalan, tombol browseButton  dan uploadButton di-nonaktifkan. Hanya ada satu tombol yang bisa diklik, yaitu cancelButton. Selama proses ini pula, ProgressBar dimanipulasi sedemikian rupa sehingga lebar bar-nya menunjukkan perbandingan antara jumlah bytes yang sudah selesai di-upload dengan besar file total.

Inisialisasi UI

Nggak ada yang spesial dari function ini. Di sini kita hanya perlu mendefinisikan beberapa instance variable , men-disable beberapa tombol, melakukan inisialisasi terhadap komponen ProgressBar, dan mendefinisikan event handler untuk uploadButton dan browseButton.

private function init():void { //UI _filename_txt = container.filename; _browseButton = container.browseButton; _uploadButton = container.uploadButton; _uploadButton.enabled = false; _cancelButton = container.cancelButton; _cancelButton.visible = false; //progress bar _progressBar = container.progressBar; _progressBar.indeterminate = false; _progressBar.mode = "manual"; _progressBar.minimum = 0; _progressBar.visible = false; //status text _status = container.status; _browseButton.addEventListener(MouseEvent.CLICK, browseFile); _uploadButton.addEventListener(MouseEvent.CLICK, uploadFile); _cancelButton.addEventListener(MouseEvent.CLICK, cancelUpload); } private function browseFile(e:MouseEvent):void { //open the file dialog window _fileRef.browse(_fileTypes); _status.text = ""; } private function uploadFile(e:MouseEvent):void { //start uploading process _fileRef.upload(new URLRequest(UPLOAD_URL)); } private function cancelUpload(e:MouseEvent):void { //stop uploading process _fileRef.cancel(); _cancelButton.visible = _progressBar.visible = false; _browseButton.enabled = _uploadButton.enabled = true; _status.text = "upload cancelled"; }

That's all, folks!

Uploader.as (final)

/************************************************** created by Anggie Bratadinata | www.masputih.com ***************************************************/ package { import fl.controls.Button; import fl.controls.ProgressBar; import flash.display.MovieClip; import flash.display.StageScaleMode; import flash.display.Sprite; import flash.events.Event; import flash.events.DataEvent; import flash.events.ProgressEvent; import flash.events.HTTPStatusEvent; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLRequest; import flash.text.TextField; import flash.ui.Mouse; public class Uploader extends Sprite { private const UPLOAD_URL:String = "http://masputih-labs.com/phpscripts/imageUpload/upload.php"; private const IMAGE_DIR:String = "http://masputih-labs.com/phpscripts/imageUpload/images/"; private const MAX_SIZE:uint = 102400; //100KB //on-stage objects public var container:MovieClip; //UI private var _browseButton:Button; private var _uploadButton:Button; private var _cancelButton:Button; private var _filename_txt:TextField; private var _progressBar:ProgressBar; private var _status:TextField; //file reference private var _fileRef:FileReference; private var _imageFilter:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png"); private var _fileTypes:Array = new Array(_imageFilter); private var _filename:String; public function Uploader() { stage.scaleMode = StageScaleMode.NO_SCALE; initFileReference(); init(); } private function init():void { //UI _filename_txt = container.filename; _browseButton = container.browseButton; _uploadButton = container.uploadButton; _uploadButton.enabled = false; _cancelButton = container.cancelButton; _cancelButton.visible = false; //progress bar _progressBar = container.progressBar; _progressBar.indeterminate = false; _progressBar.mode = "manual"; _progressBar.minimum = 0; _progressBar.visible = false; //status text _status = container.status; _browseButton.addEventListener(MouseEvent.CLICK, browseFile); _uploadButton.addEventListener(MouseEvent.CLICK, uploadFile); _cancelButton.addEventListener(MouseEvent.CLICK, cancelUpload); } private function browseFile(e:MouseEvent):void { //open the file dialog window _fileRef.browse(_fileTypes); _status.text = ""; } private function uploadFile(e:MouseEvent):void { //start uploading process _fileRef.upload(new URLRequest(UPLOAD_URL)); } private function cancelUpload(e:MouseEvent):void { //stop uploading process _fileRef.cancel(); _cancelButton.visible = _progressBar.visible = false; _browseButton.enabled = _uploadButton.enabled = true; _status.text = "upload cancelled"; } /** * initialize FileReference object */ private function initFileReference():void { _fileRef = new FileReference(); // _fileRef.addEventListener(Event.OPEN, fileRefListener); _fileRef.addEventListener(Event.SELECT, fileRefListener); // _fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileRefListener); _fileRef.addEventListener(ProgressEvent.PROGRESS, fileRefListener) // _fileRef.addEventListener(IOErrorEvent.IO_ERROR, errorListener); _fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpListener); } private function fileRefListener(e:Event):void { switch(e.type) { case Event.OPEN: _status.text = "Opening connection ..."; _progressBar.visible = true; break; case Event.SELECT: _status.text = ""; if ( _fileRef.size > MAX_SIZE) { _status.text = "Max file size is 100KB"; return; } _filename = _fileRef.name; _filename_txt.text = _filename; _uploadButton.enabled = _uploadButton.selected = true; break; case DataEvent.UPLOAD_COMPLETE_DATA: _progressBar.visible = false; _uploadButton.enabled = _browseButton.enabled = true; _status.htmlText = "upload complete <br><a href='"+IMAGE_DIR+_filename +"'><b>Click here to see the uploaded image</b></a>"; break; case ProgressEvent.PROGRESS: //set progress bar max value _progressBar.maximum = ProgressEvent(e).bytesTotal; //manually set progress bar's width _progressBar.setProgress(ProgressEvent(e).bytesLoaded, _progressBar.maximum); // _uploadButton.enabled = _browseButton.enabled = false; // _status.text = "uploading " + Math.ceil(_progressBar.percentComplete) + " %"; break; } _cancelButton.visible = _progressBar.visible; } private function errorListener(e:IOErrorEvent):void { _status.text = "IO Error"; } private function httpListener(e:HTTPStatusEvent):void { _status.text = e.status.toString(); } } }

Links

• Sourcecode : ImageUplader.zip
• Adobe Livedocs : FileReference class

Next article:

Text2Bitmap

Previous article:

Away3D : Mempersiapkan Project dengan FlashDevelop, Flash CS3, dan FlexBuilder 3