Membuat Drag and Drop Upload Area dengan DropzoneJS

Hallo semuanya, pada kesempatan kali ini saya akan memberikan sebuah tutorial yang sangat berguna untuk memberikan inovasi website modern pada website yang kalian buat. Ketika kalian mengunjungo sebuah website file sharing atau penyimpanan file online pasti kalian menemukan bagian dimana ketika kalian ingin mengupload file, kalian hanya perlu men-drag atau menarik file ke area upload yang ada di halaman tersebut. Kali ini kita akan mencoba membuatnya.  

Sekarang kalian ikuti tutorial berikut.

Pertama kali kita akan berkenalan dengan Dropzone.js. Apa itu Dropzone JS? Dropzone JS merupakan library javascript yang bersifat open source yang penggunaanya dapat memungkinkan kita melakukan drag and drop upload file dengan preview gambar. Untuk lebih jelasnya kalian bisa kunjungi situs resminya padahalaman berikut http://www.dropzonejs.com/

Selanjutnya buka tautan berikut dan simpan dengan nama masing-masing seperti dibawah

- Dropzone.js

- dropzone.css

Letakan kedua file tersebut pada folder dropzone

Buat satu html serta juga hubungkan file css dan js diatas pada html berikut

Lalu buat satu file php untuk melengkapi proses yang akan dibuat. Seperti dibawah ini.

Baiklah sekarang kalian bisa jalankan dengan melalui browser dengan melalui localhost.

Untuk yang ingin file lengkap bisa kalian download di tautan berikut

DOWNLOAD