uppy
Uppy 4.9.0
Uppy ist ein schlanker, modularer JavaScript -Datei -Uploader, der nahtlos in jede Anwendung integriert wird. Es ist schnell, verfügt über eine verständliche API und ermöglicht es Ihnen, sich um wichtigere Probleme zu kümmern, als einen Datei -Uploader zu erstellen.
Code, der im obigen Beispiel verwendet wird:
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 )
} )Probieren Sie es online aus oder lesen Sie die Dokumente, um weitere Informationen zur Verwendung von UPPY und ihren Plugins zu erhalten.
npm install @uppy/core @uppy/dashboard @uppy/tus Fügen Sie CSS uppy.min.css, entweder zu Ihrer HTML -Seite <head> hinzu oder in JS einbeziehen, wenn Ihr Bund der Wahl dies unterstützt.
Alternativ können Sie auch ein vorgefertigtes Bündel von Transloadits CDN: Smart CDN verwenden. In diesem Fall wird sich Uppy an das globale window.Uppy anschließen.
Euen Das Bundle besteht aus den meisten Us -Plugins, daher wird diese Methode nicht für die Produktion empfohlen, da Ihre Benutzer alle Plugins herunterladen müssen, wenn Sie wahrscheinlich nur wenige verwenden.
<!-- 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 - Universal UI mit Vorschau, Fortschrittsbalken, Metadaten -Editor und all den coolen Sachen. Erforderlich für die meisten UI -Plugins wie Webcam und InstagramProgress Bar - Minimale Fortschrittsleiste, die sich beim Fortschreiten des Uploads ausfülltStatus Bar - detailliertere Fortschritte, Pause/Lebenslauf/Stornierungsschaltflächen, Prozentsatz, Geschwindigkeit, hochgeladene/Gesamtgrößen (standardmäßig mit Dashboard enthalten)Informer - Senden Sie Benachrichtigungen wie „Lächeln“, bevor Sie ein Selfie oder ein „Upload fehlgeschlagen“ machen, wenn alles verloren geht (standardmäßig auch mit Dashboard )Drag & Drop - Einfacher Drag & Drop -BereichFile Input - sogar einfachere Schaltfläche "Dateien auswählen"Webcam - Schnapp und notieren Sie diese Selfies?Google Drive - Importieren von Dateien vom Google Drive importierenDropbox - Importieren von Dateien aus DropboxBox - Dateien aus dem Box importierenInstagram - Importieren von Bildern und Videos von InstagramFacebook - Importieren von Bildern und Videos von FacebookOneDrive - Importieren von Dateien von Microsoft OneDriveImport From URL - Importieren Sie direkte URLs von überall im Web aus Die ⓒ-Marke bedeutet, dass @uppy/companion , eine serverseitige Komponente, für ein Plugin benötigt wird.
Tus - Wiederauflösbare Uploads über den offenen TUS -StandardXHR Upload - Regelmäßige Uploads für jedes Backend da draußen (wie Apache, Nginx)AWS S3 - Plain Upload in AWS S3 oder kompatible DiensteAWS S3 Multipart -S3-Multipart-Upload in AWS oder kompatible DiensteTransloadit - Unterstützung für das robuste Datei -Upload- und Codierungs -Backend von TransloaditGolden Retriever - stellt Dateien nach einem Browser -Absturz wieder her, als wäre es nichtsThumbnail Generator - generiert Bildvorschau (standardmäßig mit Dashboard enthalten)Form - Sammelt Metadaten aus <form> kurz vor einem Uppy -Upload und addiert dann die Ergebnisse optional wieder zum Formular anRedux - Für Ihre aufstrebenden Zeitreiseanforderungen Wir möchten neuere Versionen von Chrome, Firefox und Safari unterstützen.
<input type="file"> verwenden?Es ist keine faire Frage! Ausführen eines Upload- und Codierungsgeschäfts für zehn Jahre. Wir haben jedoch festgestellt, dass die Dateieingabe in Fällen einige gewünscht werden:
Nicht alle Apps benötigen all diese Funktionen. Ein <input type="file"> ist in vielen Situationen in Ordnung. Dies waren jedoch einige Dinge, nach denen unsere Kunden gefragt / gefragt haben, um uns zu entzünden, um Uppy zu entwickeln.
Das Team von Transloadit ist klein und wir haben einen gemeinsamen Ehrgeiz, von Open Source ihren Lebensunterhalt zu verdienen. Indem wir Projekte wie TUS.IO und Uppy verschenken, hoffen wir, den Stand der Technik voranzutreiben, das Leben für alle ein bisschen besser zu machen und dabei eine lohnende Arbeit zu haben und unseren kommerziellen Service im Auge zu haben: eine Plattform für die Einnahme und Verarbeitung von Inhalten.
Wir denken, wenn nur ein Bruchteil unserer Open Source Userbase die Attraktivität gehosteter Versionen direkt aus der Quelle erkennen kann, könnte dies bereits ausreichen, um unsere Arbeit aufrechtzuerhalten. Bisher funktioniert das! Wir können 80% unserer Zeit für Open Source widmen und sind noch nicht bankrott gegangen. :D
Ja, bitte lesen Sie die Dokumente für weitere Informationen.
Ja, was auch immer Sie im Backend wollen, funktioniert mit @uppy/xhr-upload Plugin, da es nur einen POST oder PUT Anfrage abstellt. Hier ist ein PHP -Backend -Beispiel.
Wenn Sie mit dem TUS -Plugin Lebenseinschreibungsfähigkeit wünschen, verwenden Sie eine der TUS -Server -Implementierungen?
Und Sie benötigen @uppy/companion wenn Sie möchten, dass Ihre Benutzer Dateien von Instagram, Google Drive, Dropbox oder über direkte URLs auswählen können (mit weiteren Diensten).
.github/CONTRIBUTING.mdCHANGELOG.md Uppy wird verwendet von: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive und anderen.
Uppy in Ihrem Projekt verwenden? Lass es uns wissen!
Die MIT -Lizenz.
