Tempel untuk Mengunggah di React

Sejak saya pertama kali membuat blog tentang rilis React-Uploady tahun lalu, perpustakaan telah memperoleh basis pengguna yang substansial, beberapa ratus bintang di Github (jika Anda belum membintangi, Anda tahu apa yang harus dilakukan ️️), dan ribuan unduhan sebulan.

Cara baru untuk mengunggah file di React

Saat Uploady bergerak menuju rilis 1.0.0, dengan senang hati saya katakan bahwa API-nya, dan telah, stabil untuk beberapa saat. Karena itu saya tidak melihat perubahan yang melanggar bergerak maju.

Dalam posting ini saya ingin membagikan paket terbaru untuk bergabung dengan jajaran komponen, kait, dan utilitas berguna yang dibawa oleh Uploady — rpldy/upload-paste . Membuatnya sepele untuk memulai unggahan dari acara tempel.

Whatsapp Web adalah contoh bagus dari tindakan paste-to-upload . Anda dapat mengklik tombol untuk membuka dialog pemilihan file, seret & lepas file untuk mulai mengunggah, atau cukup salin file ke clipboard Anda dan tempel sambil fokus pada UI. Melakukannya akan memulai aliran unggahan, yang sangat nyaman.

Sekarang Anda dapat menambahkan paste-to-upload ke aplikasi React Anda dengan mudah. @rpldy/upload-paste menyediakan HOC (higher-order-component) serta custom hook untuk mengaktifkan ini dengan komponen Anda sendiri, hanya membutuhkan beberapa baris kode.

Kode untuk contoh di atas dapat ditemukan di kotak pasir ini:

Kode Waktu

Mari kita lihat contoh yang menggabungkan fungsi drag&drop Uploady dan fungsi paste-to-upload yang baru. Hasilnya adalah pengalaman pengguna yang sangat menyenangkan, di mana pengguna dapat memulai pengunggahan dengan berbagai cara.

Kode di atas menggunakan UploadDropZone (dari @rpldy/upload-drop-zone ) dan membungkusnya dengan HOC withPasteUpload . Itu benar-benar semua yang ada untuk itu. Komponen baru kami — PasteUploadDropZone — sekarang menerima file baik dengan menjatuhkan atau menempelkan.

withPasteUpload dapat membungkus hampir semua komponen React. Komponen yang dihasilkan menerima beberapa props dasar (id, classname) dan prop khusus yang disebut extraProps . Prop ini (sebuah objek) dapat berisi prop lain yang ingin Anda teruskan ke komponen dasar yang dibungkus. Ini penting karena komponen baru juga akan menerima semua opsi Upload yang biasa (mis: autoUpload, params, dll.) seperti yang dapat dilihat di atas.

Tapi tunggu, masih ada lagi… Kait khusus!

Jika Anda ingin mengaktifkan paste-to-upload di seluruh halaman atau elemen khusus, usePasteUpload adalah untuk Anda.

Kode di atas menunjukkan bagaimana custom hook dapat digunakan untuk mengaktifkan paste-to-upload pada elemen tertentu.

Semua parameter fungsi kait adalah opsional .

Parameter pertama adalah objek Opsi Unggahan yang dapat Anda lewati untuk diganti/digabungkan dengan props yang diteruskan ke penyedia <Uploady> sebelumnya di aplikasi Anda.

Parameter kedua adalah elemen ref. Jika ref dihilangkan, hook akan mendengarkan acara paste pada objek global (jendela).

Parameter ketiga adalah fungsi yang akan dipanggil setelah unggahan dimulai oleh peristiwa tempel. Diberikan sebuah objek dengan bentuk: { count: number } . Hitungan adalah jumlah file yang ditempelkan.

Hook mengembalikan objek dengan dua metode: toggle & getIsEnabled. Yang pertama akan mengaktifkan pendengar sehingga Anda dapat mengontrol mendengarkan pasta tanpa harus meng-unmount. yang terakhir, seperti namanya, mengembalikan nilai true jika pendengar aktif dan false jika tidak.

Misi React-Uploady adalah membuatnya sesederhana mungkin untuk menambahkan fungsionalitas unggah file ke aplikasi React. Ia melakukannya sambil juga menyediakan banyak opsi penyesuaian dan ekstensibilitas. Oleh karena itu, saya pikir paket unggah-tempel yang baru sangat cocok dengan fungsi Unggahan yang ada.

Cobalah , dan saya ingin mendengar tentang pengalaman Anda.