uppy
Uppy 4.9.0
Uppy adalah pengunggah file JavaScript modular yang ramping yang terintegrasi mulus dengan aplikasi apa pun. Ini cepat, memiliki API yang dapat dipahami dan memungkinkan Anda khawatir tentang masalah yang lebih penting daripada membangun pengunggah file.
Kode yang digunakan dalam contoh di atas:
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import RemoteSources from '@uppy/remote-sources'
import ImageEditor from '@uppy/image-editor'
import Webcam from '@uppy/webcam'
import Tus from '@uppy/tus'
const uppy = new Uppy ( )
. use ( Dashboard , { trigger : '#select-files' } )
. use ( RemoteSources , { companionUrl : 'https://companion.uppy.io' } )
. use ( Webcam )
. use ( ImageEditor )
. use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
. on ( 'complete' , ( result ) => {
console . log ( 'Upload result:' , result )
} )Cobalah secara online atau baca dokumen untuk detail lebih lanjut tentang cara menggunakan Uppy dan pluginnya.
npm install @uppy/core @uppy/dashboard @uppy/tus Tambahkan css uppy.min.css, baik ke halaman html Anda <head> atau sertakan dalam js, jika bundler pilihan Anda mendukungnya.
Atau, Anda juga dapat menggunakan bundel pra-dibangun dari TransLoadIt's CDN: Smart CDN. Dalam hal ini Uppy akan melampirkan dirinya ke objek window.Uppy global.
️ Bundel ini terdiri dari sebagian besar plugin Uppy, jadi metode ini tidak disarankan untuk produksi, karena pengguna Anda harus mengunduh semua plugin ketika Anda kemungkinan hanya menggunakan beberapa.
<!-- 1. Add CSS to `<head>` -->
< link
href =" https://releases.transloadit.com/uppy/v4.9.0/uppy.min.css "
rel =" stylesheet "
/>
<!-- 2. Initialize -->
< div id =" files-drag-drop " > </ div >
< script type =" module " >
import {
Uppy ,
Dashboard ,
Tus ,
} from 'https://releases.transloadit.com/uppy/v4.9.0/uppy.min.mjs'
const uppy = new Uppy ( )
uppy . use ( Dashboard , { target : '#files-drag-drop' } )
uppy . use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
</ script > Dashboard - UI universal dengan pratinjau, bilah kemajuan, editor metadata dan semua hal keren. Diperlukan untuk sebagian besar plugin UI seperti webcam dan instagramProgress Bar - Bilah kemajuan minimal yang mengisi dirinya sendiri saat mengunggah berkembangStatus Bar - Kemajuan yang lebih rinci, Tombol Jeda/Resume/Batal, Persentase, Kecepatan, Ukuran Diunggah/Total (Termasuk secara default dengan Dashboard )Informer - Kirim pemberitahuan seperti "senyum" sebelum mengambil selfie atau "unggah gagal" ketika semua hilang (juga disertakan secara default dengan Dashboard )Drag & Drop - Area Seret dan Jatuhkan PlainFile Input - Tombol "Pilih File" yang lebih jelasWebcam - Snap dan rekam selfie itu?Google Drive - Impor file dari Google DriveDropbox - Impor file dari DropboxBox - Impor file dari kotakInstagram - Impor gambar dan video dari InstagramFacebook - Impor gambar dan video dari FacebookOneDrive - Impor file dari Microsoft OneDriveImport From URL - Impor URL Langsung dari mana saja di web Mark ⓒ berarti bahwa @uppy/companion , komponen sisi server, diperlukan agar plugin berfungsi.
Tus - Upload yang dapat dilanjutkan melalui standar TUS OpenXHR Upload - Upload reguler untuk setiap backend di luar sana (seperti Apache, nginx)AWS S3 - Unggah Plain ke AWS S3 atau Layanan KompatibelAWS S3 Multipart -Upload "multipart" gaya S3 ke AWS atau layanan yang kompatibelTransloadit - Dukungan untuk pengunggahan file dan pengkodean file yang kuat TransLoadItGolden Retriever - mengembalikan file setelah browser macet, seperti bukan apa -apaThumbnail Generator - Menghasilkan Pratinjau Gambar (disertakan secara default dengan Dashboard )Form - Mengumpulkan metadata dari <form> tepat sebelum unggahan yang tinggi, lalu secara opsional menambahkan hasil kembali ke formulirRedux - Untuk kebutuhan perjalanan waktu Anda yang baru muncul Kami bertujuan untuk mendukung versi terbaru Chrome, Firefox, dan Safari.
<input type="file"> ?Tidak memiliki ketukan javascript yang memiliki banyak hal, jadi itu pertanyaan yang adil! Menjalankan bisnis pengunggahan & pengkodean selama sepuluh tahun meskipun kami menemukan bahwa dalam kasus, input file membuat beberapa diinginkan:
Tidak semua aplikasi membutuhkan semua fitur ini. Sebuah <input type="file"> baik -baik saja dalam banyak situasi. Tapi ini adalah beberapa hal yang cukup banyak pelanggan kami pukul / tanyakan cukup untuk memicu kami untuk mengembangkan Uppy.
Tim TransLoadit kecil dan kami memiliki ambisi bersama untuk mencari nafkah dari open source. Dengan memberikan proyek -proyek seperti Tus.io dan Uppy, kami berharap untuk memajukan keadaan seni, menjadikan hidup sedikit lebih baik untuk semua orang dan dengan demikian memiliki pekerjaan yang bermanfaat dan mengawasi layanan komersial kami: platform konsumsi & pemrosesan konten.
Pemikiran kami adalah bahwa jika hanya sebagian kecil dari basis pengguna open source kami dapat melihat daya tarik versi yang di -host langsung dari sumbernya, itu sudah cukup untuk mempertahankan pekerjaan kami. Sejauh ini ini berhasil! Kami dapat mendedikasikan 80% dari waktu kami untuk open source dan belum bangkrut. :D
Ya, silakan periksa dokumen untuk informasi lebih lanjut.
Ya, apa pun yang Anda inginkan di backend akan bekerja dengan plugin @uppy/xhr-upload , karena hanya melakukan POST atau PUT . Inilah contoh backend PHP.
Jika Anda ingin resumability dengan plugin TUS, gunakan salah satu implementasi server TUS ??
Dan Anda akan membutuhkan @uppy/companion jika Anda ingin pengguna Anda dapat memilih file dari Instagram, Google Drive, Dropbox atau melalui URL langsung (dengan lebih banyak layanan datang).
.github/CONTRIBUTING.mdCHANGELOG.md Uppy digunakan oleh: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive dan lainnya.
Gunakan Uppy dalam proyek Anda? Beri tahu kami!
Lisensi MIT.
