Plugin grátis para envio de arquivos JavaScript ES5 / ES6 - Uppy

Uma das entradas de formulário mais complicadas para o design é a upload de arquivo. Tem um estilo HTML padrão, mas não é a coisa mais bonita do mundo.

Uppy leva os uploads de arquivos para um novo nível com um interface personalizada e um processo de carregamento dinâmico no estilo Ajax.

isto roda no código ES5 / ES6, para que você possa criar seus aplicativos da web com os padrões JavaScript mais recentes. E até suporta uploads de arquivos de sites de armazenamento em nuvem como Dropbox ou Google Drive, por isso é um script de upload de arquivo multifacetado para a web.

Uppy é completamente livre e de código aberto, com um repo no GitHub. No entanto, a maneira mais fácil de instalar este plugin é através do npm ou do Yarn, para que você possa executá-lo como um pacote real.

Depois de obter os arquivos adicionados ao seu site, basta inclua o arquivo Uppy.js e o código CSS. Em seguida, você direciona o campo de entrada desejado e o Uppy cuida do resto.

Tem uma interface única que parece um grande quadrado para arrastar e soltar arquivos. Você também pode selecionar itens do seu disco rígido ou até mesmo fazer upload de arquivos remotamente de URLs externos. Muito louco!

Você pode encontrar todo o processo de instalação na página de documentação, mas requer pelo menos alguma compreensão do ECMAScript 6. Esta biblioteca olha para o futuro dos scripts e não é a coisa mais fácil de usar com JavaScript baunilha puro.

Mas, se você é sério sobre desenvolvimento web, vale a pena aprender o ES6 de qualquer maneira. Você pode encontrar toneladas de recursos online para auto-ensino e você pode até usar Uppy como o seu primeiro “real” projeto para mergulhar e começar a aprender.

Confira o exemplo do painel para veja Uppy em ação. Para esta página, o upload está oculto por trás de um botão de gatilho, onde você clica no botão para exibir um campo de upload modal.

De lá, você pode selecionar se deseja enviar uma foto do seu computador, da Web ou até mesmo da sua webcam!

A página "Exemplos" oferece várias informações, incluindo uma arraste e solte o exemplo, junto com um página de demonstração internacionalizada.

Mas, para realmente aprender como isso funciona, recomendo dar uma olhada nos documentos e navegar pelo repositório principal do GitHub. Você também pode compartilhar suas ideias com os criadores no Twitter @transloadit.