Cara Simple Membuat Drag and Drop Image Upload

Drag and Drop Upload File

Halo sobat bacaanringan.id.

Di kesempatan ini kami mau share tentang trik yang cukup simple dalam membuat sebuah fitur kecil yang biasa dibutuhkan di dalam sebuah form pada sebuah aplikasi. Fitur kecil ini namanya Drag and Drop Image Upload. Sebuah fitur yang memberikan user experience melakukan drag dan drop file gambar untuk menguploadnya di dalam sebuah form aplikasi.

Dalam membuat fitur Drag and Drop Image Upload ini kita cukup menggunakan HTML, CSS, jQuery dan code javascript yang sederhana. Dan bahkan kita tidak perlu menggunakan AJAX request untuk melakukan upload file gambarnya ke server. Karena coba deh kalau kamu cari contoh-contoh plugin atau script-script di internet, kebanyakan solusi uploadnya menggunakan AJAX request. Nah, kali ini justru kita mau membuat tanpa AJAX request dan menggunakan submit form biasa, menggunakan enctype multipart/form-data. Its so simple.

Sebelum kita lanjut, yang mau lihat penampakan hasil akhirnya lihat aja gambar di bawah ini.

Drag and Drop Upload File

Drag and Drop Upload File

Inti dari trik di sini ada 3 hal:

  1. Bagaimana kita memperlebar area <input type="file" /> dan membuatnya tidak terlihat dengan menggunakan code CSS. Kenapa begitu ? karena basically tag input dengan type file milik HTML pun bisa menangkap file yang kita drag ke UI input tersebut. 
  2. Menyiapkan area div untuk menampilkan / preview file image yang akan diupload.
  3. Code javascript untuk membaca stream file image dan memasukkannya ke object FileReader.

Dengan melakukan 3 hal di atas maka hakikatnya kita seperti menggunakan <input> tag biasa dalam sebuah form. Implementasi yang sangat mudah semisal kamu sudah memiliki sebuah form yang menggunakan action submit biasa dan mau menambahkan fitur kecil ini ke dalam form kamu. Kamu tinggal meletakkan <input type="file" /> ini dan tidak perlu mengubah mekanisme submit form sama sekali. Jangan lupa menyisipkan CSS dan Javascript nya tentunya.

HTML

CSS

Javascript

Buat kamu yang mau mencoba langsung bisa juga clone di Github ini. Jangan lupa install file-file dependency juga ya, bisa pakai command NPM atau Yarn. Buat kamu yang lihat demo hasil akhir dari source code di atas, silakan bisa lihat di video screencast di bawah ini.

Nah sobat bacaanringan.id, mudah bukan?
Jangan lupa, like, comment dan share artikel ini ya.

 

Comments

comments