9 Cuplikan Bidang Unggah File Sumber Terbuka Khusus

Anda dapat menemukan alat luar biasa untuk meningkatkan formulir web, mulai dari kit UI hingga plugin jQuery tingkat lanjut.

Tetapi salah satu bidang input yang paling sulit untuk diedit adalah bidang unggah. Ini adalah elemen input HTML default dan memungkinkan pengguna mengunggah file dari komputer mereka. Menata ulang bidang unggahan merupakan tantangan besar dibandingkan dengan elemen formulir lainnya.

Jika Anda berharap untuk menyesuaikan masukan unggahan Anda, galeri ini akan membantu. Saya telah mengumpulkan 9 bidang unggahan buatan tangan dari CodePen yang membuktikan bahwa Anda dapat menata ulang bidang agar terlihat seperti yang Anda inginkan.

1. Unggah File Datar

Pengembang Wallace Erick membuat bidang unggah datar ini hanya dengan sedikit CSS dan JavaScript. Ini meminjam tren desain datar, yang menghindari gradien dengan berfokus pada warna tunggal – seringkali dengan skema warna monokromatik.

Anda dapat menambahkan desain unggah file ini ke halaman mana pun dan membuatnya tampak hebat. Yang harus Anda lakukan adalah mengubah skema warna dan memposisikannya dengan benar di dalam formulir Anda.

Ini berfungsi seperti yang Anda harapkan dan berjalan pada elemen input HTML standar. Jadi ini juga dapat digunakan dengan browser lama dan juga berfungsi di seluler.

2. Unggah File Khusus

Berikut desain yang menjadi sedikit lebih abstrak dengan bidang unggah. Pengembang Aaron Vanston membuat unggahan file ini sebagai replika dari yang kita lihat di situs web yang lebih besar.

Pikirkan tentang situs teknologi besar seperti Dropbox, Google+, dan Facebook. Mereka sering memiliki area seret dan lepas dengan ruang "klik di sini" yang besar untuk meluncurkan jendela unggah. Itulah tepatnya yang dilakukan Aaron dengan cuplikan ini.

Itu bergantung pada jQuery dan sejumlah besar JS/CSS untuk bekerja. Dan meskipun menggunakan bidang input HTML standar, ia juga menangani proses pengunggahan dengan fungsi JS khusus.

Jika Anda tahu jalan di sekitar JavaScript, ini bisa berfungsi sebagai template yang berguna untuk membangun UI unggahan file Anda sendiri.

3. Pengunggah Animasi Responsif

Jika Anda melakukan segala jenis desain web modern, maka Anda tahu bahwa Anda harus responsif. Pengguna seluler dapat mengunggah file ke web melalui formulir yang sama, jadi memanfaatkan bidang input responsif adalah ide bagus.

Lihat desain ini untuk contoh bidang unggah ramah seluler yang berkualitas. Ini sangat mendasar, hanya dengan ruang unggah persegi kecil dengan dukungan drag & drop.

Perhatikan bahwa ini tidak menggunakan elemen input – jadi tidak ada cara untuk mengklik untuk mengunggah. Saya pikir itu adalah mimpi buruk kegunaan, tetapi ini juga hanya cuplikan sampel yang digunakan untuk pengujian – jadi ini tidak diarahkan untuk kegunaan yang sempurna.

Jika Anda membawa cuplikan ini ke situs Anda, sebaiknya tambahkan bidang unggahan biasa di samping area seret & lepas.

4. Pengunggah Khusus

Proyek pengembangan harian adalah cara yang bagus untuk mempertajam keterampilan Anda. Drew Vosburg mengikuti pendekatan ini untuk membuat formulir unggahan manis yang dihosting secara gratis di CodePen.

Ini sangat disesuaikan dengan fungsi JavaScript yang menangani efek seret dan lepas. Tetapi bidang input ini sebenarnya dibuat untuk mendukung sentuhan dan klik, bersama dengan seret dan lepas.

Area yang dapat diklik adalah label HTML yang ditata dengan CSS. Elemen label itu dilampirkan ke bidang input, yang disembunyikan di luar halaman. Ini berfungsi seperti bidang yang dapat diklik. Jelas ide yang cerdas dan sepenuhnya semantik untuk boot.

5. Antarmuka Unggah Foto Stok

Inilah salah satu cuplikan paling kompleks, namun mengesankan yang pernah saya lihat di CodePen. Ini memungkinkan Anda mengunggah foto ke galeri langsung dari komputer Anda. Dengan setiap foto yang Anda unggah, itu akan menampilkan pratinjau langsung di halaman.

Ini bekerja dengan menarik gambar melalui JavaScript, lalu mengubahnya menjadi base64 untuk disematkan ke CSS.

Setiap kali Anda mengunggah gambar ke server, mereka akan menghasilkan file sementara. Di server Anda sendiri, Anda dapat menggunakan file sementara ini untuk menampilkan gambar. Tapi sekarang CSS mendukung base64, ini adalah alternatif lain.

Antarmuka sangat bersih dan fitur unggah menyatu.

6. UI Unggah Biru Sederhana

Jika Anda mencari bidang unggahan bebas JS, lihat contoh ini, yang dibuat oleh Stephen Baker.

Ini menggunakan CSS3 murni untuk mengubah gaya input menjadi satu tombol besar. Ini bekerja dengan ikon unggahan Font Awesome dan hanya membungkus seluruh area melingkar di sekitar bidang unggahan.

Anda dapat mengubah gaya, warna, ikon, atau apa pun agar ini cocok dengan situs Anda. Ini pada dasarnya adalah alternatif super bersih untuk gaya input default dan berjalan pada CSS3 murni.

7. Input Unggah File Kustom jQuery

Pengembang Terry Young mengambil sedikit jQuery dan menggunakannya untuk meningkatkan beberapa bidang unggahan yang ada. Ini adalah hasilnya (dan ini adalah hasil yang luar biasa, jika saya bisa mengatakannya).

Melalui gaya ini Anda dapat mengubah teks bidang unggah, ukuran, warna tombol atau menghapus bidang teks hanya dengan menggunakan satu tombol.

Perhatikan bahwa ini memang membutuhkan jumlah jQuery yang baik karena sebagian besar fitur ini tidak dapat diubah dengan CSS. Jika Anda tidak keberatan bekerja dengan jQuery, opsi ini sangat fenomenal.

8. File Input UI Datar

Berikut adalah bidang unggah datar yang sedikit berbeda yang dibuat oleh Geoffrey Crofte. Yang ini juga bergantung pada beberapa JavaScript, tetapi menata seluruh input dengan properti CSS3.

Karena ini adalah cuplikan sampel, Anda sebenarnya tidak dapat mengunggah file di mana pun. Tapi, itu cukup mudah untuk diubah jika Anda memindahkannya ke situs Anda sendiri. Desain dan pengaturan inti benar-benar memberi cuplikan ini kehidupan.

Fungsi pengembalian berjalan dalam JavaScript, jadi di situlah Anda akan menangani unggahan file, perubahan di layar, atau apa pun.

Yang terbaik dari semuanya, kode-kode ini berfungsi di browser yang berasal dari IE 8! Jadi ini adalah opsi yang cukup solid jika Anda khawatir tentang aksesibilitas.

9. Bidang Multi-Unggah

Inilah satu bidang kustom terakhir dengan twist: tampilannya cukup sederhana secara estetika – tetapi hadiah sebenarnya ada pada fungsionalitasnya.

Bidang unggahan ini dirancang untuk mendukung banyak file sekaligus. Anda biasanya tidak melihat ini dengan bidang input – atau setidaknya tidak secara default. Pengguna harus memilih beberapa file di jendela yang sama dan backend perlu mendukungnya.

Dengan cuplikan ini, Anda dapat mencantumkan semua nama file dalam satu bidang unggahan. Anda bahkan dapat menggunakan JavaScript untuk menambahkan nama file tersebut di tempat lain pada halaman dalam tampilan biasa.