Uma das grandes tarefas de que fui encarregado no meu primeiro emprego foi configurar um sistema pelo qual qualquer cliente ou cliente em potencial (também conhecido como usuário anônimo) pudesse fazer upload de arquivos PDF e de imagens. Eu tinha muitas restrições para lidar: suporte ao navegador, configurações do servidor, variação no conhecimento técnico do usuário etc. Por fim, precisávamos usar um Applet Java (!) para realizar o trabalho. Que nojo.
Felizmente, todas as restrições com as quais eu tinha que lidar naquela época melhoraram e a maioria das limitações que eu enfrentava foi resolvida. Hoje eu poderia usar o Uppy, um utilitário de código aberto, elegante e robusto para upload de arquivos. É superpersonalizável e fácil para o senhor, o desenvolvedor, implementar e para seus usuários usarem. Vamos dar uma olhada!
Resultados rápidos
- Código aberto!
- É necessário muito pouco código para implementar
- O widget de front-end é elegante e fácil de usar
- Os uploads podem ocorrer sem recarregar a página
- Recuperação de estado (fazer com que os uploads sobrevivam a falhas no navegador ou a saídas acidentais de navegação)
- Funciona bem no celular
- Funciona com qualquer estrutura JavaScript
- Fornece um uma ampla gama de plug-ins para enriquecer a experiência de upload
- Cordas fáceis de localizar (forneça seu próprio idioma pirata, Shiver me timbers!)
- Pode fazer upload para seu servidor Apache existente (XHR)
- ou: Pode fazer upload diretamente para o S3
- ou: Pode fazer upload para um Tus-(fazendo com que os uploads sobrevivam a viagens e condições de rede ruins)
- Fornece um utilitário de servidor que permite que seus usuários façam buscas no Google Drive, Dropbox, Instagram
- Trazido aos senhores pelas pessoas por trás do Transloadit. Eles oferecem recursos de codificação e versões hospedadas do utilitário Uppy Server e do Tus
Em um relance Demo
Dê uma olhada no uso do widget da Uppy em ação:
O widget Uppy:
- oferece uma interface elegante e bem projetada
- recursos de arrastar e soltar o upload de arquivos
- permite o upload pausável e retomável
- fornece um método para renomear arquivos carregados
Vamos dar uma olhada no código para montar isso!
Implementação do Uppy File Uploader
Os criadores do Uppy acertaram em cheio na implementação: fazer com que o desenvolvedor implemente a menor quantidade de código necessária para ter um utilitário funcional, “drop in place”. Comece instalando o Uppy:
Adicione as bibliotecas CSS e JavaScript à página:
<!-- In the header --> <link href="https://transloadit.edgly.net/releases/uppy/v0.25.2/dist/uppy.min.css" rel="stylesheet"> <!-- Where the drag and drop will be --> <div id="drag-drop-area"></div> <!-- Bottom of the page --> <script src="https://transloadit.edgly.net/releases/uppy/v0.25.2/dist/uppy.min.js"></script>
Em seguida, inicialize o Uppy!
<script>
var uppy = Uppy.Core({ autoProceed: false })
uppy.use(Uppy.Dashboard, { target: '#drag-drop-area', inline: true })
uppy.use(Uppy.XHRUpload, { endpoint: 'https://mywebsite.com/receive-file.php' })
</script>
Bum! O senhor tem um utilitário incrível de upload de arquivos com pouca complicação e com ótimo visual! Dê uma olhada no versão ao vivo no CodePen
Se o senhor não quiser executar o Uppy de um CDN e preferir criá-lo por conta própria com o Browserify ou o Webpack, basta usar o npm:
npm install uppy --save
<script>
var Uppy = require('uppy/lib/core')
var Dashboard = require('uppy/lib/plugins/Dashboard')
var XHRUpload = require('uppy/lib/plugins/XHRUpload')
const uppy = Uppy({ autoProceed: false })
uppy.use(Dashboard, { target: '#drag-drop-area', inline: true })
uppy.use(XHRUpload, { endpoint: 'https://mywebsite.com/receive-file.php' })
</script>
A Uppy também oferece ao senhor uma série de eventos para upload de arquivos:
uppy.on('file-added', (file) => {
// Do something
});
uppy.on('upload', (data) => {
// Do something
})
uppy.on('complete', (result) => {
// Do something
})
A API da Uppy é tão fácil de usar que o senhor pode considerá-la uma API “drop in” para o incrível upload de JavaScript
O senhor deseja usar algum dos plug-ins do Uppy? Na verdade, é muito fácil: vamos verificar a implementação do que todos esperam dos uploads hoje em dia: arrastar e soltar:
const Dashboard = require('uppy/lib/plugins/Dashboard')
uppy.use(Dashboard, { target: '#drag-drop-area', inline: true })
O Plugin do painel de controle aqui renderiza uma área de arrastar e soltar limpa e simples, mostra visualizações de arquivos, permite que o senhor edite metadados e mostra o progresso do upload. Ele funciona como um host para outros plug-ins. Quando o senhor adiciona os plug-ins Webcam ou Instagram, eles aparecem no Dashboard como guias, e os usuários podem selecionar arquivos de qualquer um deles também.
Agora vamos adicionar o Webcam plugin:
const Webcam = require('uppy/lib/plugins/Webcam')
uppy.use(Webcam, {
countdown: false,
mirror: true,
facingMode: 'user',
target: Dashboard // Webcam will be installed to the Dashboard
})
Servidor Uppy
Com o plugin XHRUpload O Uppy fará o upload para seu servidor Apache/Nginx/Node.js/Ruby/PHP existente a partir do disco local ou da webcam. Não é necessário o Uppy Server. Se, no entanto, o senhor quiser adicionar a busca de arquivos do Dropbox e do Instagram, precisará executar um Uppy Server na nuvem. O Uppy Server também é de código aberto, portanto, o senhor pode hospedá-lo por conta própria. O
Documentos da API são super detalhados!
As vantagens de ter um auxiliar como o Uppy Server na nuvem são claras…
Se o usuário estiver no celular e escolher um arquivo de 5 GB no Dropbox, ele não precisará ser buscado no telefone e depois carregado;
Em vez disso, o arquivo é movido diretamente entre os servidores. Isso economiza muita largura de banda e bateria. É isso que o Uppy Server facilita, além de gerenciar os segredos necessários para acessar esses arquivos;
Vejamos uma demonstração de como o senhor poderia facilmente permitir a obtenção de dados do provedores remotos como o Google Drive e o Dropbox ou um URL acessível simples:
const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
const Url = require('uppy/lib/plugins/Url')
// remote providers require the uppy server utility.
// we're using the public demo server in this case:
uppy.use(GoogleDrive, { target: Dashboard, host: 'https://server.uppy.io/' })
uppy.use(Url, { target: Dashboard, host: 'https://server.uppy.io/ })
Se decidir que deseja o Uppy Server, mas não hospedá-lo, o senhor também pode deixar o Transloadit trata disso. O Transloadit criou o Uppy e o padrão Tus. Pode ser útil que a Transloadit também ofereça verificação de vírus integrada, corte de imagens, transcodificação, detecção de faces e muito mais. Eles armazenarão os resultados no storage que o senhor escolher. Dessa forma, o senhor sempre será o proprietário de todo o conteúdo e poderá ter certeza de que o que for carregado será exibido de forma ideal em todos os dispositivos e navegadores;
Transloadit
Eu nunca tinha ouvido falar sobre a Transloadit, mas parece que é uma pequena empresa remota que vem tentando incansavelmente avançar no espaço de processamento e upload de arquivos e que a maior parte de sua tecnologia foi lançada como código aberto 💗
TransloaditO serviço de upload e processamento da Transloadit oferece uma incrível variedade de funcionalidades:
- Redimensionar, cortar e colocar marca d’água em imagens
- Converter vídeos em GIFs e vice-versa
- Transcodificar vídeo e extrair miniaturas
- Faça capturas de tela do site
- Criar imagens de forma de onda a partir de áudio
- Crie vídeos de apresentação de slides a partir de imagens e áudio
- Conversões em cadeia para criar “fluxos de trabalho” exclusivos em uma única linguagem JSON declarativa
- Estabilidade de 99,99% de tempo de atividade ao longo de 9 anos
- Manipule a mídia em tempo real
- Integra-se bem a diferentes tipos de mídia e a diferentes linguagens e estruturas
- Com a confiança da Coursera, do The New York Times, da Oracle, da Universidade de Cambridge e muito mais
Como demonstração final, vamos dar uma olhada em um exemplo simples de como o Uppy funciona com o Transloadit, para quando o senhor quiser, digamos, adicionar um texto “Powered by Uppy” às imagens que seus usuários estão carregando:
const Uppy = require('uppy/lib/core')
const Dashboard = require('uppy/lib/plugins/Dashboard')
const Transloadit = require('uppy/lib/plugins/Transloadit')
const uppy = Uppy()
.use(Dashboard, { target: '#drag-drop-area', inline: true })
.use(Transloadit, {
waitForEncoding: true,
params: {
auth: { key: YOUR_TRANSLOADIT_KEY },
steps: {
resize: {
width: 250,
height: 250,
robot: '/image/resize',
text: [{'text': 'Powered by Uppy', 'font': 'Ubuntu', 'color': '#eeeeee', 'valign': 'bottom', 'align': 'right', 'x_offset': 16, 'y_offset': -10}]
}
}
}
})
uppy.on('transloadit:result', (stepName, result) => {
// use transloadit encoding result here.
console.log('Result here ====>', stepName, result)
console.log('Cropped image url is here ====>', result.url)
})
Confira um vídeo interativo Demonstração do Uppy+Transloadit
O gerenciamento de uploads de arquivos, tanto do lado do cliente quanto do lado do servidor, pode ser um pesadelo total. Acrescente a dificuldade de arrastar e soltar, bem como a validação de upload, e ter um uploader de arquivos incrível parece um unicórnio. O Uppy parece ser a coisa certa: configurável, fácil de implementar, interface de usuário elegante, controle de servidor, código aberto, moderno, modular e muito mais – não se pode pedir muito mais!
