uppy
Uppy 4.9.0
Uppy est un téléchargeur de fichiers JavaScript élégant et modulaire qui s'intègre parfaitement à n'importe quelle application. Il est rapide, a une API compréhensible et vous permet de vous soucier de problèmes plus importants que de créer un téléchargeur de fichiers.
Code utilisé dans l'exemple ci-dessus:
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 )
} )Essayez-le en ligne ou lisez les documents pour plus de détails sur la façon d'utiliser Uppy et ses plugins.
npm install @uppy/core @uppy/dashboard @uppy/tus Ajoutez CSS Uppy.min.css, soit à <head> de votre page HTML, soit inclure dans JS, si votre bundler de choix le prend en charge.
Alternativement, vous pouvez également utiliser un bundle pré-construit à partir de CDN: Smart CDN de Transloadit. Dans ce cas, Uppy s'attachera à l'objet Global window.Uppy .
️ Le bundle se compose de la plupart des plugins Uppy, donc cette méthode n'est pas recommandée pour la production, car vos utilisateurs devront télécharger tous les plugins lorsque vous n'en utilisez probablement que quelques-uns.
<!-- 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 universel avec aperçus, barres de progression, éditeur de métadonnées et toutes les choses sympas. Requis pour la plupart des plugins d'interface utilisateur comme la webcam et l'instagramProgress Bar - barre de progrès minimale qui se remplit lorsque le téléchargement progresseStatus Bar - progrès plus détaillé, boutons de pause / curriculum vitae / annulation, pourcentage, vitesse, tailles téléchargées / totales (incluses par défaut avec Dashboard )Informer - Envoyez des notifications comme «Smile» avant de prendre un selfie ou un «téléchargement échoué» lorsque tout est perdu (également inclus par défaut avec Dashboard )Drag & Drop - Plain Drag and Drop AreaFile Input - le bouton encore plus simple «Sélectionner les fichiers»Webcam - Snap et enregistrer ces selfies?Google Drive - Importer des fichiers depuis Google DriveDropbox - Importer des fichiers à partir de DropboxBox - Importer des fichiers à partir de la boîteInstagram - Importez des images et des vidéos d'InstagramFacebook - Importez des images et des vidéos de FacebookOneDrive - Importez des fichiers de Microsoft OneDriveImport From URL - Importez des URL directes de n'importe où sur le Web La marque ⓒ signifie que @uppy/companion , un composant côté serveur, est nécessaire pour qu'un plugin fonctionne.
Tus - Téléchargements de redopulation via la norme ouverte TUSXHR Upload - Téléchargements réguliers pour n'importe quel backend (comme Apache, Nginx)AWS S3 - Téléchargement simple sur AWS S3 ou services compatiblesAWS S3 Multipart - Téléchargement de «multiparte» de style S3 vers AWS ou services compatiblesTransloadit - Prise en charge du téléchargement de fichiers robuste de Transloadit et du backendGolden Retriever - restaure les fichiers après un crash du navigateur, comme si ce n'était rienThumbnail Generator - Génére les aperçus d'images (inclus par défaut avec Dashboard )Form - Collecte les métadonnées à partir de <form> juste avant un téléchargement UPPY, puis renvoie éventuellement les résultats au formulaireRedux - Pour vos besoins en temps de voyage émergents Nous visons à soutenir les versions récentes de Chrome, Firefox et Safari.
<input type="file"> ?N'ayant pas de battements JavaScript en avoir beaucoup, donc c'est une bonne question! L'exécution d'une entreprise de téléchargement et d'encodage pendant dix ans, bien que nous ayons constaté que dans les cas, l'entrée de fichier laisse à désirer:
Toutes les applications n'ont pas besoin de toutes ces fonctionnalités. Un <input type="file"> est très bien dans de nombreuses situations. Mais ce sont quelques éléments que nos clients ont frappés / ont demandé suffisamment sur nous pour nous déclencher pour développer Uppy.
L'équipe de Transloadit est petite et nous avons une ambition partagée de gagner sa vie en open source. En offrant des projets comme Tus.io et Uppy, nous espérons faire avancer l'état de l'art, rendre la vie un peu meilleure pour tout le monde et, ce faisant, avoir des emplois enrichissants et gardant un certain regard sur notre service commercial: une plate-forme d'ingestion et de traitement de contenu.
Notre pensée est que si seulement une fraction de notre base d'utilisateurs open source peut voir l'attrait des versions hébergées directement à partir de la source, cela pourrait déjà suffire à maintenir notre travail. Jusqu'à présent, cela fonctionne! Nous sommes en mesure de consacrer 80% de notre temps à l'open source et nous n'avons pas encore fait faillite. :D
Oui, veuillez consulter les documents pour plus d'informations.
Oui, tout ce que vous voulez sur le backend fonctionnera avec le plugin @uppy/xhr-upload , car il ne fait qu'une demande POST ou PUT . Voici un exemple de backend PHP.
Si vous voulez une résumé avec le plugin TUS, utilisez l'une des implémentations du serveur TUS ??
Et vous aurez besoin de @uppy/companion si vous souhaitez que vos utilisateurs puissent choisir des fichiers chez Instagram, Google Drive, Dropbox ou via des URL directes (avec plus de services à venir).
.github/CONTRIBUTING.mdCHANGELOG.md Uppy est utilisé par: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive et autres.
Utilisez Uppy dans votre projet? Faites-le nous savoir!
La licence MIT.
