AngularJS Fact : Angular for input type file

AngularJS memiliki kemampuan yang merupakan fitur yang mereka jual yaitu two-way data binding. Hal tersebut dimiliki baik di angular1 maupun angular2. Dengan kemampuan two data bindingnya angular telah melakukan pembindinga data secara otomatis sesuai dengan variable yang telah kita definisikan. Untuk lebih mengerti mengenai angular two-way data binding dapat di baca lebih lengkap pada tulisan saya yang lain. 

Walaupun demikian masih ada tipe input yang tidak memiliki binding otomatis dari angular. Salah satunya adalah untuk input type file. Jangan pernah berharap ng-model dapat digunakan pada input type file. Lalu apa yang bisa kita lakukan?

Ada beberapa cara agar file input dapat digunakan di controller : 

1. Mengirim langsung ke controller melalui method

   Pada saat apakah kita perlu mengirim file? Yap pada saat perubahan yang terjadi pada input type. Tetapi karena pada dasarnya karena input type file tidak disupport oleh angular, ng-change pun tidak dapat berjalan pada tag tersebut. Sehingga untuk mendeteksi perubahan yang terjadi kita dapat menggunakan onChange yang dimiliki oleh javascript.

Berikut adalah html yang digunakan untuk mengirim file ke controller menggunakan onchange : 

<input name="upload" id="coverImage" type="file" class="hidden" 
onchange="angular.element(this).scope().addImage(this)">

Dengan demikian kita hanya perlu membuat function addImage() yang akan menerima file untuk di binding pada scope. Berikut sample function yang perlu dibuat : 

self.addImage= function (ele) {
    $scope.file = ele.files[0],self.imageCoverObject;};

Note : 

Karena onChange bukan merupakan directive angular sehingga scope tidak dapat begitu saja di gunakan seperti biasanya. Untuk mendapatkan nama method yang di cari maka kita perlu menggunakan : 

angular.element(this).scope()

Dengan demikian sudah selesai pekerjaan kita untuk mendapatkan file di controller dengan cara pertama.

2. Membuat directive yang akan melakukan injection pada scope.

    Namanya saja Angular, rasanya kurang mantab apabila masih menggunakan javascript. Karenanya berikutnya saya akan menjelaskan bagaimana cara membinding file pada scope menggunakan directive. Untuk directive dengan tujuan input type file sudah banyak macamnya, karenanya saya akan lebih menjelaskan flownya.

Directive yang akan dibuat : 

Html : 

<input name="upload" id="inputFileSample" type="file" file-upload="fileUploads">

Dengan demikian file akan otomatis terbinding pada variable $scope.fileUploads.

Berikut adalah sample data yang akan didapat dengan cara diatas : 

Lengkap dengan info yang kita inginkan untuk di binding pada scope. :)

Demikan adalah cara yang dapat digunakan untuk mendapatkan file di controller. Keduanya tentu dapat dipakai dengan pertimbangan masing- masing.

Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang membutuhkan cara mendapatkan file di angular controller.

Happy Coding~ :D