uppy
Uppy 4.9.0
Uppy é um uploadeiro de arquivo JavaScript modular e elegante que se integra perfeitamente a qualquer aplicativo. É rápido, possui uma API compreensível e permite que você se preocupe com problemas mais importantes do que a criação de um upload de arquivos.
Código usado no exemplo acima:
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 )
} )Experimente on -line ou leia os documentos para obter mais detalhes sobre como usar o uppy e seus plugins.
npm install @uppy/core @uppy/dashboard @uppy/tus Adicione CSS uppy.min.css, ou à sua página HTML <head> ou inclua no JS, se o seu empurrador de escolha o suportar.
Como alternativa, você também pode usar um pacote pré-construído do CDN: SMART CDN do TransLoadit. Nesse caso, Uppy se anexará à window.Uppy global.Pupy Object.
️ O pacote consiste na maioria dos plugins superiores, portanto, esse método não é recomendado para produção, pois seus usuários terão que baixar todos os plugins quando você provavelmente estiver usando apenas alguns.
<!-- 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 com pré -visualizações, barras de progresso, editor de metadados e todas as coisas legais. Necessário para a maioria dos plugins de interface do usuário, como webcam e InstagramProgress Bar - a barra de progresso mínima que se enche quando o upload progrideStatus Bar - Progresso mais detalhado, pausa/retomar/cancelar botões, porcentagem, velocidade, tamanhos de upload/total (incluídos por padrão no Dashboard )Informer - Envie notificações como "Smile" antes de tirar uma selfie ou "Upload falhou" quando tudo estiver perdido (também incluído por padrão no Dashboard )Drag & Drop - área de arrastar e soltarFile Input - o botão ainda mais simples “selecione arquivos”Webcam - Snap e grave essas selfies?Google Drive - Importar arquivos do Google DriveDropbox - Importar arquivos do DropboxBox - Importar arquivos da caixaInstagram - Importar imagens e vídeos do InstagramFacebook - Importar imagens e vídeos do FacebookOneDrive - Importar arquivos da Microsoft OneDriveImport From URL - Importar URLs diretos de qualquer lugar da web A marca ⓒ significa que @uppy/companion , um componente do lado do servidor, é necessário para que um plug-in funcione.
Tus - Uploads resumíveis através do padrão abertoXHR Upload - Uploads regulares para qualquer back -end (como Apache, Nginx)AWS S3 - Upload simples para a AWS S3 ou serviços compatíveisAWS S3 Multipart -Upload "Multipart" no estilo S3 para a AWS ou serviços compatíveisTransloadit - Suporte para o upload e codificação de arquivo robusto do TransLoaditGolden Retriever - restaura os arquivos após uma falha do navegador, como se não fosse nadaThumbnail Generator - gera visualizações de imagem (incluídas por padrão no Dashboard )Form - coleta metadados de <form> logo antes de um uppy upload e, opcionalmente, anexa os resultados de volta ao formulárioRedux - para suas necessidades emergentes de viagem no tempo Nosso objetivo é apoiar versões recentes de Chrome, Firefox e Safari.
<input type="file"> ?Não ter JavaScript bate com muito disso, então é uma pergunta justa! Executando um negócio de upload e codificação por dez anos, embora tenhamos descoberto que, nos casos, a entrada de arquivos deixa alguns a desejar:
Nem todos os aplicativos precisam de todos esses recursos. Um <input type="file"> está bem em muitas situações. Mas essas foram algumas coisas que nossos clientes atingiram / perguntaram o suficiente para nos desencadear para desenvolver uma parte superior.
A equipe do Transloadit é pequena e temos uma ambição compartilhada para ganhar a vida com o código aberto. Ao distribuir projetos como Tus.io e Uppy, esperamos avançar no estado da arte, tornar a vida um pouco melhor para todos e, ao fazê -lo, ter empregos gratificantes e obter alguns olhos em nosso serviço comercial: uma plataforma de ingestão e processamento de conteúdo.
Nosso pensamento é que, se apenas uma fração da nossa base de usuários de código aberto puder ver o apelo das versões hospedadas diretamente da fonte, isso já poderia ser suficiente para sustentar nosso trabalho. Até agora isso está funcionando! Somos capazes de dedicar 80% do nosso tempo ao código aberto e ainda não faliram. : D
Sim, confira os documentos para obter mais informações.
Sim, o que você quiser no back-end funcionará com o plug-in @uppy/xhr-upload , pois ele faz apenas uma solicitação POST ou PUT . Aqui está um exemplo de back -end do PHP.
Se você deseja recapitabilidade com o plug -in Tus, use uma das implementações do servidor TUs ??
E você precisará de @uppy/companion se quiser que seus usuários possam escolher arquivos no Instagram, Google Drive, Dropbox ou através de URLs diretos (com mais serviços chegando).
.github/CONTRIBUTING.mdCHANGELOG.md A UPPY é usada por: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive e outros.
Use Uppy em seu projeto? Deixe -nos saber!
A licença do MIT.
