10 tips unggah file HTML yang berguna untuk pengembang web – Kemampuan untuk mengunggah file merupakan persyaratan utama untuk banyak aplikasi web dan seluler. Dari mengunggah foto Anda di media sosial hingga memposting resume Anda di situs web portal pekerjaan, file uploadada di mana-mana. Sebagai pengembang web, kita harus tahu bahwa HTML menyediakan dukungan pengunggahan file asli dengan sedikit bantuan dari JavaScript.
10 tips unggah file HTML yang berguna untuk pengembang web
sourcefiles – Dengan HTML5File API ditambahkan ke DOM. Dengan menggunakan itu, kita bisa membaca FileListdan File Objek di dalamnya. Ini menyelesaikan banyak kasus penggunaan dengan file, yaitu memuatnya secara lokal atau mengirim melalui jaringan ke server untuk diproses, dll.
Pada artikel ini, kita akan membahas 10 penggunaan dukungan upload file HTML tersebut. Semoga bermanfaat.
1. Unggah file sederhana
Kami dapat menentukan jenis input untuk filemenggunakan fungsionalitas pengunggah file di aplikasi web. Jenis file input memungkinkan pengguna dengan tombol untuk mengunggah satu atau lebih file. Secara default, ini memungkinkan mengunggah satu file menggunakan browser file asli sistem operasi.
Saat unggahan berhasil, File APImemungkinkan untuk membaca Fileobjek menggunakan kode JavaScript sederhana. Untuk membaca Fileobjek, kita perlu mendengarkan acara changepengunggah file. Pertama, dapatkan instance pengunggah file dengan id, Kemudian tambahkan changependengar acara untuk membaca objek file saat unggahan selesai.
Kami mendapatkan informasi file yang diunggah dari event.target.filesproperti. Amati output di konsol browser. Perhatikan FileListlarik dengan Fileobjek yang memiliki semua informasi metadata tentang file yang diunggah.
2. Beberapa unggahan file
Kami dapat mengunggah banyak file sekaligus. Untuk melakukan itu, kita hanya perlu menambahkan atribut yang disebut, multipleke tag file masukan. Sekarang, browser file akan memungkinkan Anda mengunggah satu atau lebih file untuk diunggah.
Sama seperti contoh sebelumnya, Anda dapat menambahkan changeevent handler untuk menangkap informasi tentang file yang diunggah. Pernahkah Anda memperhatikan, ini FileListadalah sebuah array? Benar, untuk multipleunggahan file, array akan memiliki informasi sebagai,
3. Ketahui tentang metadata file
Setiap kali kami mengunggah file, Fileobjek tersebut memiliki informasi metadata seperti nama file, ukuran, waktu pembaruan terakhir, jenis, dll. Informasi ini dapat berguna untuk validasi lebih lanjut, pengambilan keputusan.
4. Tahu tentang acceptproperti file
Kita dapat menggunakan acceptatribut untuk membatasi jenis file yang akan diunggah. Anda mungkin hanya ingin menampilkan jenis gambar yang diizinkan untuk ditelusuri saat pengguna mengunggah gambar profil. Pada kode di atas, browser file hanya akan mengizinkan file dengan ekstensi jpgdan png.
Perhatikan, dalam hal ini, browser file secara otomatis menyetel jenis pemilihan file sebagai kustom, bukan semua. Namun, Anda selalu dapat mengubahnya kembali ke semua file, jika diperlukan.
5. Kelola konten file
Anda mungkin ingin menampilkan konten file setelah berhasil mengunggahnya. Untuk foto profil, akan membingungkan jika kami tidak segera menampilkan foto yang diunggah ke pengguna setelah diunggah.Kita dapat menggunakan FileReaderobjek untuk mengonversi file menjadi string biner. Kemudian tambahkan loadpendengar acara untuk mendapatkan string biner pada unggahan file yang berhasil.
6. Validasi ukuran file
Seperti yang telah kita lihat, kita dapat membaca metadata ukuran file, kita benar-benar dapat menggunakannya untuk validasi ukuran file. Anda dapat mengizinkan pengguna mengunggah file gambar hingga 1MB. Mari kita lihat bagaimana mencapainya.
7. Tampilkan kemajuan pengunggahan file
Kegunaan yang lebih baik adalah memberi tahu pengguna Anda tentang kemajuan unggahan file. Kami sekarang mengetahui FileReaderdan acara untuk membaca dan memuat file. Ada FileReaderacara lain yang dipanggil, progressuntuk mengetahui berapa banyak yang telah dimuat.
Kita dapat menggunakan tag HTML5 progressuntuk membuat progress bar dengan informasi ini. Bagaimana kalau Anda mencoba mengunggah file yang lebih besar dan melihat bilah progres berfungsi di CodePen.
Baca Juga : 5 Solusi Pengunggah File Terbaik di 2023
8. Bagaimana dengan pengunggahan direktori?
Bisakah kita mengunggah seluruh direktori? Yah, itu mungkin tetapi dengan beberapa batasan. Ada atribut non-standar (setidaknya, saat menulis artikel ini) yang disebut, webkitdirectoryyang memungkinkan kita mengunggah seluruh direktori.
Meskipun awalnya diimplementasikan hanya untuk browser berbasis WebKit, direktori webkit juga dapat digunakan di Microsoft Edge serta Firefox 50 dan yang lebih baru. Namun, meskipun memiliki dukungan yang relatif luas, itu tetap tidak standar dan tidak boleh digunakan kecuali Anda tidak memiliki alternatif lain.
Anda dapat menentukan atribut ini sebagai, Ini akan memungkinkan Anda untuk memilih folder (alias, direktori), Pengguna harus memberikan konfirmasi untuk mengunggah direktori. Setelah pengguna mengklik tombol Unggah, pengunggahan dilakukan.
Satu hal penting yang perlu diperhatikan di sini. Array FileListakan memiliki informasi tentang semua file di direktori yang diunggah sebagai struktur datar. Tapi kuncinya adalah, untuk setiap Fileobjek, webkitRelativePathatributnya akan memiliki jalur direktori.
9. Mari seret, lepas, dan unggah
Tidak mendukung drag-and-drop untuk mengunggah file agak kuno, bukan? Mari kita lihat bagaimana mencapainya dengan beberapa langkah sederhana. Pertama, buat drop zone dan opsional bagian untuk menampilkan konten file yang diunggah. Kami akan menggunakan gambar sebagai file untuk drag and drop di sini. Dapatkan dropzone dan area konten dengan id masing-masing.
Tambahkan dragoverevent handler untuk menunjukkan efek dari sesuatu yang akan disalin. Selanjutnya, tentukan apa yang ingin kita lakukan saat gambar dijatuhkan. Kami akan membutuhkan droppendengar acara untuk menanganinya. Coba seret dan lepas file gambar dalam contoh CodePen di bawah ini dan lihat cara kerjanya. Jangan lupa untuk melihat kode untuk merender gambar yang dijatuhkan juga.
10. Tangani file dengan objectURL
Ada metode khusus yang disebut, URL.createObjectURL()untuk membuat URL unik dari file tersebut. Anda juga dapat melepaskannya dengan menggunakan URL.revokeObjectURL()metode. DOM URL.createObjectURL()dan URL.revokeObjectURL () metode memungkinkan Anda membuat string URL sederhana yang dapat digunakan untuk mereferensikan data apa pun yang dapat dirujuk menggunakan objek File DOM, termasuk file lokal di komputer pengguna.
Penggunaan sederhana dari URL objek adalah, Gunakan CodePen ini untuk menjelajahi URL objek lebih jauh. Petunjuk: Bandingkan pendekatan ini dengan pendekatan yang disebutkan di #5 sebelumnya.
Kesimpulan
Saya benar-benar percaya ini, sering kali fitur HTML asli mungkin cukup bagi kita untuk menangani kasus penggunaan yang ada. Saya menemukan, file uploadadalah salah satu yang menyediakan banyak opsi keren secara default.