Multi upload file dan delete problem

Upload file merupakan salah satu tag html yang sudah ada cukup lama dalam dunia percodingan web. Sedangkan multi upload sendiri merupakan tag yang muncul pada html5. Lalu apa masalah yang Saya alami kali ini? :D

Saya memiliki fitur upload foto dalam jumlah banyak dengan menggunakan angular sebagai otaknya dan memiliki kemampuan menghapus foto yang tidak diinginkan dari list. Cukup mudah di aplikasikan bukan?

Demi mempercepat pengerjaan, Saya menggunakan dasar directive angular dari sini. Tinggal mempersiapkan cara untuk menghapusnya saja. Pada dasarnya directive tersebut akan mengisi $scope.files dengan kumpulan object file yang kita pilih. Saya hanya perlu menghilangkan object yang ingin di hapus dari array $scope.files.

Berikut potongan code yang digunakan untuk menghapus foto dari list :

$scope.deleteFromListUpload = function(dataForDelete){
    var index = $scope.files.indexOf(dataForDelete);    $scope.files.splice(index, 1);};

Sedangkan fungsi deleteFromListUpload akan di panggil dari html :

<table class="table">
     <thead>
        <td width="90%" class="text-center">Nama Foto</td>
        <td width="10%"></td>
     </thead>
     <tr ng-repeat="fotoForUpload in files">
        <td>
           <input type="text" class="form-control" ng-model="fotoForUpload.name" 
             ng-value="fotoForUpload.name">
        </td>
        <td>
          <button type="button" class="btn btn-default" 
            ng-click="deleteFromListUpload(fotoForUpload)">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
        </td>
     </tr>
</table>

Berikut tampilan halaman hasilnya :

Multi Upload

Setelah Data Terhapus

Fungsi hapus berhasil berfungsi dengan baik, hanya saja terlihat pada keterangan sebelah button mengenai jumlah file yang di pilih tidak berubah. Hal ini merupakan atribut yang dimiliki oleh tag input type file milik html5. Keterangan akan memberikan data mengenai berapa file yang terakhir dipilih oleh user / nama file yang dipilih apabila hanya 1 file yang dipilih.
Setelah mencari tahu bagaimana cara merubah tulisan tersebut dan hasilnya nihil. Maka saya berpikir bagaimana apabila saya menghilangkan saja tulisan itu agar client tidak merasa terganggu. Sayangnya secara default benda tersebut sudah ada dan tidak ada ditemukan tanda- tanda untuk menghilangkannya. Hingga saya teringat sebuah tag <label for="multiInput">Input</label>.

Yang akan dilakukan adalah : 

1.  Menambahkan label untuk input type file 
2.  Menghide input type

Yap sesimple itu. . .

Berikut adalah potongan code html setelah di beri trik : 

<input name="upload" id="multiFiles" type="file" ng-file-model="files" 
   multiple class="hidden" >
<label class="btn btn-default" for="multiFiles">Pilih Foto</label>

class="hidden" merupakan class milik Bootstrap yang saya gunakan untuk menghide input type. Setelah menambahkan code tersebut, hasilnya menjadi seperti ini :

Dengan demikian sudah tidak terlihat ada keterangan yang tidak mencerminkan data yang sebenarnya. Dan untuk mempercantik Saya menambahkan keterangan tambahan jumlah file yang dipilih dengan memanfaatkan data binding angular seperti berikut :

<input name="upload" id="multiFiles" type="file" ng-file-model="files" 
   multiple class="hidden" >
<label class="btn btn-default" for="multiFiles">Pilih Foto</label> 
File Terpilih : {{ files.length }}

 

Hasilnya jumlah yang tampil akan selalu sesuai dengan jumlah data yang ada..
Demikian adalah trik yang saya lakukan untuk menutupi kinerja keterangan tag yang tidak sesuai keinginan (Saya).
Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang memiliki perasaan yang sama terhadap fitur tag input tersebut.
Happy Coding~ :D

Pengenalan AngularJS part 2

Pada kesempatan sebelumnya kita sudah mencoba membuat sebuah halaman dengan menggunakan angular. Pada kesempatan kali ini kita akan mencoba memisahkan data dengan halaman html yang akan digunakan. Pada angular terdapat $scope yang merupakan variable perantara antara controller dengan view.

Mari kita mulai saja dengan membuat code di bawah ini pada file index.html dan tes.js:

index.html

tes.js

Dapat dilihat pada index.html kita mendeklarasikan tes.js sebagai salah satu source script untuk halaman tersebut. Pada index.html kita mendekalarsikan ng-app sebagai SeperatedData dan pada tes.js kita membuat variable app yang merupakan angular modul untuk SepatedData. Dalam app tersebut kita dapat mendeklarasikan beberapa controller yang nantinya dapat digunakan dalam halaman html SeparatedData.

Pada index.html kita tambahkan ng-controller="UsersController" dan ng="AbsenController" controller tersebut hanya akan berjalan di lingkup tag tempat dimana tag tersebut berada. Contohnya pada index.html UsersController pada tag id="usersData, maka lingkup controller tersebut hanya berada di tag div usersData saja.

Sedangkan untuk data, pada tes.js dapat dilihat data di declarasikan pada $scope. Seperti yang telah dijelaskan di atas bahwa $scope merupakan perantara atau data binding yang digunakan antara controller dengan view. Dengan mendeklarasikannya pada $scope, index html dapat mengakses data tersebut dengan memanggil nama variablenya saja. 

Hasilnya adalah seperti berikut : 

Demikian cara memisahkan data dan penggunaan $scope dalam controller. Semoga membantu.