Plugin Unggah File JavaScript ES5 / ES6 Gratis - Uppy

Salah satu input bentuk paling sulit untuk desain adalah unggah file. Ini memiliki gaya HTML default, tetapi itu bukan hal yang tercantik di dunia.

Uppy membawa unggahan file ke tingkat yang sama sekali baru dengan a antarmuka khusus dan a proses pemuatan gaya Ajax yang dinamis.

Saya t berjalan pada kode ES5 / ES6, sehingga Anda dapat membangun aplikasi web dengan standar JavaScript terbaru. Dan bahkan mendukung unggahan file dari situs penyimpanan cloud seperti Dropbox atau Google Drive, jadi itu a skrip pengunggahan file multifaset untuk web.

Uppy adalah sepenuhnya gratis dan open-source, dengan repo di GitHub. Namun, cara termudah untuk menginstal plugin ini adalah melalui npm atau Yarn, jadi Anda bisa jalankan seperti paket nyata.

Setelah Anda mendapatkan file yang ditambahkan ke situs web Anda, Anda baru saja termasuk file Uppy.js dan kode CSS. Kemudian, Anda menargetkan bidang input apa pun yang Anda inginkan dan Uppy menangani sisanya.

Ini memiliki antarmuka yang unik terlihat seperti satu penempatan persegi besar untuk menarik & melepaskan file. Anda juga bisa pilih item dari hard drive Anda atau bahkan unggah file dari jarak jauh dari URL eksternal. Gila sekali!

Anda dapat menemukan seluruh proses pengaturan pada halaman dokumentasi, tetapi itu memang membutuhkan setidaknya beberapa pemahaman tentang ECMAScript 6. Pustaka ini melihat ke masa depan scripting dan bukan hal termudah untuk digunakan dengan JavaScript vanilla murni.

Tapi, jika Anda serius tentang pengembangan web, ada baiknya mempelajari ES6. Kamu dapat menemukan banyak sumber daya online untuk belajar mandiri dan Anda bahkan dapat menggunakan Uppy sebagai yang pertama “nyata” proyek untuk menyelam & mulai belajar.

Lihat Contoh Dasbor untuk lihat Uppy dalam aksi. Untuk halaman ini, halaman unggahan disembunyikan di balik tombol pemicu, di mana Anda mengklik tombol untuk menampilkan bidang unggahan modal.

Dari sana, Anda dapat memilih apakah Anda ingin mengunggah gambar dari komputer Anda, dari web, atau bahkan dari webcam Anda!

Halaman Contoh menawarkan banyak untuk dilihat, termasuk a seret & letakkan contoh, bersama dengan halaman demo diinternasionalkan.

Tapi, untuk benar-benar mempelajari cara kerjanya, saya sarankan membaca dokumen dan menjelajah melalui repo GitHub utama. Anda juga dapat berbagi pemikiran dengan para pencipta di Twitter @transloadit.