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

Materialize VS Bootstrap

Pada kesempatan sebelumnya kita telah berkenalan dengan materialize. Pada kesempatan kali ini saya akan melihat sedikit beberapa atribut yang dimiliki baik oleh materialize maupun Bootstrap.

Sebelumnya kita bahas sedikit mengenai Bootstrap. Seperti halnya Materialize, Bootstrap juga merupakan sebuah framework atau lebih tepatnya html,css,js framework. Bootstrap mempermudah developer dalam membuat tampilan yang layak dilihat. Bootstrap sendiri di buat oleh Twitter dengan tujuan untuk mempermudah pembuatan responsive website. Sedangkan Materialize seperti sudah dijelaskan sebelumnya bahwa google mengusung kembali material design dalam bentuk web.

Apabila dilihat dari spesifikasinya, maka Bootstrap dan Materialize akan memiliki data seperti ini :

Atribut	Bootstrap	Materialize
IE	8+	10+
Firefox	support	support
Chrome	support	support
Opera	support	support
LESS	support ( drop on version 4 )	not support
SASS	support	support

Berikutnya mari kita mencoba beberapa component dari kedua framework tersebut.

1. Collapsible
   Yap, collapsible adalah hal yang cukup merepotkan untuk dibuat ketika kita masih tidak memiliki banyak pilihan framework. Saat ini banyak framework yang telah mempermudah kita dalam pembuatanannya termasuk Boostrap dan Materialize
   
   Boostrap Code :
   

   <div class="container">  
     <a href="#demo" class="btn btn-info" data-toggle="collapse">collapsible</a>
     <div id="demo" class="collapse">   
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam,    
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
     </div>
   </div>

   Result :
   
   
   
   
   
   Materialize 
   Html :
   

    <ul class="collapsible popout" data-collapsible="accordion">
       <li>
         <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
       <li>
         <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
       <li>
         <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
     </ul>

   Javascript :
   

    $(document).ready(function(){
       $('.collapsible').collapsible({
         accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
       });
     });

   Result  :
   
   
2.  Form
   Membuat web tentunya tidak terlepas dari form. Berikut merupakan sample pembuatan form dari kedua framework tersebut.
   BootstrapCode :
   

   <form role="form">
       <div class="form-group">
         <label for="email">Email:</label>
         <input type="email" class="form-control" id="email" placeholder="Enter email">
       </div>
       <div class="form-group">
         <label for="pwd">Password:</label>
         <input type="password" class="form-control" id="pwd" placeholder="Enter password">
       </div>
       <div class="checkbox">
         <label><input type="checkbox"> Remember me</label>
       </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>

   Result :
   Default form dari boostrap tidak terlalu banyak berbeda dari form yang telah disediakan html.
   
   
   
   
   Materialize
   Code :
   

   <div class="row">
       <form class="col s12">
         <div class="row">
           <div class="input-field col s6">
             <input id="first_name" type="text" class="validate">
             <label for="first_name">First Name</label>
           </div>
           <div class="input-field col s6">
             <input id="last_name" type="text" class="validate">
             <label for="last_name">Last Name</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input id="password" type="password" class="validate">
             <label for="password">Password</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input id="email" type="email" class="validate">
             <label for="email">Email</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input type="checkbox" id="test6" checked="checked" />
             <label for="test6">Yellow</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
             <label for="filled-in-box">Red</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <p class="range-field">
               <input type="range" id="test5" min="0" max="100" />
             </p>
           </div>
         </div>
       </form>
     </div>

   Result :
   Default Form yang di sediakan materialize lebih berkesan casual. Dan ada tambahan input menarik berupa range yang mirip seperti slider. Dan masih ada beberapa input type lain seperti switches yang dapat dilihat pada : http://materializecss.com/forms.html
   
   
   

   
   Masih banyak lagi atribut lain yang dimiliki keduanya. Dari sana kita bisa melihat perbedaan design yang diusung oleh kedua framework tersebut. Dari segi tampilan, apabila kita membandingkan antara materialize dan bootstrap maka tidak ada yang lebih baik antara satu dengan yang lainnya. Yang perlu dipikirkan adalah website seperti apa yang ingin di bangun. Dari situlah baru kita dapat menentukan framework apa yang sebaiknya kita gunakan.
   
   Sekian sekilas cerita dari saya. Happy eksploring~ :D