AngularJS Tips n Trick : Image preview

Berjumpa kembali dengan topik angular. Kalau sebelumnya kita perenah membahas mengenai upload multiple file. Kali ini Saya akan membahas menampilah preview ketika melakukan upload file image. Pada dasarnya untuk membuat sebuah preview kita perlu menaruh file tersebut menjadi sebuah link yang dapat di akses oleh tag image. Untuk mencapai hal tersebut kita tentunya memiliki beberapa cara. Untuk saat ini kita akan membahas 2 cara saja. Pertama, kita dapat mengupload file tersebut pada sebuah situs yang berfungsi sebagai image hosting atau bisa juga ke backend kita sendiri. Kedua, kita dapat menggunakan salah satu fungsi javascript yaitu readDataAsUrl() yang dimiliki oleh FileReader.

File Reader sendiri merupakan salah satu interface yang memiliki berbagai macam fitur untuk digunakan dalam modifikasi file untuk web. Untuk lebih lengkapnya mengenai File Reader dapat di baca saja di webnya :D .Karena pada kesempatan ini saya tidak akan membahas mengenai file reader, yang akan saya bahas adalah penggunaannya pada angular.

Dengan mengetahui adanya 2 cara yang cukup mudah dilakukan, berikut ilustrasi flow yang akan terjadi dengan menggunakan 2 cara tersebut.

1. Melakukan upload file ke backend atau file management lain.

 

2. Menggunakan File Reader untuk membaca file sebagai url.

Dari flow di atas dapat dilihat apabila kita menggunakan file management, maka file yang kita simpan akan dikirim terlebih dahulu. Dengan asumsi user dapat mengganti berkali-kali foto yang akan di gunakan maka tentunya akan menjadi boros bandwith. Itulah mengapa saya memutuskan untuk mengguankan file reader dan menggunakan fungsinya untuk mengubah file menjadi url. 

Bagaimana cara menggunakannya?  Sebenarnya bisa saja kita memasang javascript langsung untuk menggunakan FileReader. Tetapi karena saya bukan kubu pecinta javascript membuat saya memilih menggunakan angularJS yang tidak berbau javascript dan tentunya saya tidak tertarik mencoba menggunakan FileReader dalam format javascript. Apabila tertarik menggunakannya langsung dapat dilihat dari sini karena dsana cukup lengkap demo dan sourcenya. :D

Setelah mencari bower component untuk FileReader dan tidak menemukan yang memuaskan. Akhirnya saya menemukan sebuah source dari Plunker. Kemudian saya memutuskan untuk menggunakan Upload.js yang ada karena cukup sesuai dengan keinginan. 

Berikut adalah potongan code yang digunakan dengan sedikit penyesuaian : 

  1. HTML

    Seperti yang saya jelaskan pada blog lainnya bahwa angular tidak memiliki directive bawaan untuk menerima input type file. Sehingga kita perlu membuat sendiri directive tersebut. Kebetulan saya sudah memiliki directive tersebut sehingga saya menggunakan yang sudah ada yaitu directive file-model. Kemudian HTML akan menggunakan ng-if untuk mengecheck untuk mendapatkan url terbaru.

 2. Controller

    Pada controller terdapat method getImage() yang akan membuat url baru untuk setiap file baru yg tertampung pada scope. Url akan di tampung pada variable scope imageUrl yang akan di gunakan sebagai source di html.

  3. Upload.js

Berikut merupakan upload.js yang sudah disesuaikan dengan format yang biasa saya gunakan dalam project saya. Disana dapat dilihat method readAsDataURL() sebenarnya memanggil method FileReader readAsDataUrl.

Demikian cara penggunaan File Reader yang untuk angularJS. Hasilnya akan terlihat seperti berikut : 

Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang memiliki keinginan untuk melakukan display image yang ingin diupload.

Happy Coding~ :D