Lançamento do Uppy 1.0: solução moderna de upload de arquivos

Artur Paikin

Desenvolvedor front-end e designer de interfaces · Londres, Reino Unido · Mostrar biografia

Hoje, após três anos de desenvolvimento, estamos lançando a versão 1.0 do Uppy, nosso uploader de arquivos para navegadores web.

Um pouco de história

Três anos atrás, a Transloadit estava pronta para substituir seu plugin de upload e processamento de arquivos para navegadores, baseado em jQuery, por algo mais moderno. Ela publicou um anúncio de vaga EN (English) em busca de pessoas para construí-lo:

Em geral, buscamos produtos refinados, bem testados e cuidadosamente elaborados, com os quais seja um prazer trabalhar e que sejam agradáveis de usar. Por isso, nesta vaga, não basta você saber JavaScript: também é importante saber deixar as coisas visualmente incríveis e funcionando bem para os usuários finais.

À sua disposição estarão tempo, foco e a equipe principal, pronta para oferecer feedback, orientação e tudo o mais de que você precisar.

Pouco depois, vi um retweet dessa vaga passar na minha timeline e decidi me candidatar. Em resumo, foi assim que me envolvi com o Uppy nos primeiros estágios do projeto.

No início, a ideia era criar um uploader proprietário que funcionasse exclusivamente com o serviço comercial da Transloadit, mas logo mudamos de ideia. Sentimos que a nossa versão de um uploader de arquivos poderia ter um impacto real se a tornássemos mais amplamente disponível. Então, assim como a Transloadit já havia feito com o tus⁠, decidimos tornar o Uppy uma solução de código aberto, gratuita para qualquer pessoa usar e modificar. O suporte à Transloadit virou um plugin opcional.

Três anos, 16.000 estrelas⁠, destaques na Smashing Magazine⁠, no JavaScript Daily⁠, no Product Hunt⁠ e no SurviveJS⁠ e uma comunidade vibrante depois, não poderíamos estar mais felizes por finalmente lançar o Uppy 1.0!

Por que criar o Uppy, afinal?

De vez em quando nos perguntam por que precisaríamos de algo além de <input type="file">. Por que envolver JS nisso? A verdade é que, em muitos casos, <input type="file"> resolve bem.

Às vezes, porém, você pode querer adicionar uma área de arrastar e soltar com prévias dos arquivos ou uma indicação do progresso do upload que funcione bem em todos os navegadores. Suporte a webcam pode ser útil. Além disso, selecionar arquivos diretamente do seu Instagram e Dropbox, sem passar antes pelo seu celular, pode economizar muita banda e bateria (com o Uppy e o Companion, os uploads acontecem de servidor para servidor). Em todos esses casos, você vai precisar de algo mais do que uma simples tag <input type="file">.

Veja o lançamento do Uppy v1.0 no Product Hunt⁠.

E ainda há a questão dos arquivos grandes, em que poder retomar o envio é essencial. Hoje em dia, é praticamente inaceitável ter que recomeçar o upload do zero só porque o Wi-Fi deu uma falhada. É por isso que o Uppy usa o tus, o protocolo aberto para uploads de arquivos retomáveis.

Tudo isso melhora significativamente a experiência do usuário, a ponto de mais arquivos realmente chegarem à sua plataforma e menos usuários desistirem irritados e fecharem a aba. Isso se torna importante quando o upload é um aspecto central do seu site ou app. O Uppy também pode ser implantado apenas com uma tag JS e o seu servidor Apache/Nginx, usando um <form> existente como fallback (para dar suporte ao IE6! 😄).

Montando uma equipe para criar o Uppy

No início, a equipe do Uppy era formada por mim⁠ e Harry⁠. Como me mudei para Nova York por um tempo, e a maior parte da equipe estava na Europa, nos acostumamos a fazer chamadas muito cedo (ou muito tarde) por causa da grande diferença de fuso horário.

Eu trabalhava principalmente no frontend, construindo o que hoje conhecemos como Dashboard⁠, o plugin do Uppy mais completo e mais usado. Harry assumiu a primeira versão do que na época se chamava Uppy Server (hoje Companion), responsável por selecionar arquivos do Google Drive, do Instagram, de URLs remotas etc.

Em 2016, a equipe da Transloadit fez um encontro em Amsterdã, onde acabei marcando presença⁠ de um jeito bem inusitado (no centro):

Mais tarde naquele ano, Ife⁠ também entrou para a equipe do Uppy e assumiu todo o trabalho no Companion.

Construir direito todos os recursos planejados para o Uppy levou muito tempo. Assim, dois anos depois de conseguir o projeto na Transloadit, fui eu quem acabou escrevendo um post com um anúncio de vaga EN (English), já que o Uppy começava a ganhar proporções sérias. Foi aí que Renée⁠ entrou para a equipe (história engraçada: nos conhecemos colaborando no GitHub nas bibliotecas Choo e Yo-Yo) para nos ajudar com os componentes React do Uppy, a integração com Redux, o plugin Golden Retriever e muitos outros recursos legais.

Mais ou menos nessa época, Alex⁠ também chegou para nos orientar no design da interface, completando a equipe do Uppy como ela é até hoje.

No verão de 2017, a equipe da Transloadit se reuniu de novo, desta vez em Berlim, onde trabalhamos no plugin Golden Retriever⁠, que ajuda a recuperar arquivos depois de falhas do navegador. Também jogamos Mario Kart (perdi, apesar de todo o treino!) e nos fantasiamos de personagens do jogo:

Leia mais sobre o Golden Retriever e esse encontro da equipe⁠. O Golden Retriever teve boa repercussão no Reddit e no Hacker News porque vai muito além do esperado para deixar tudo absurdamente confiável. No vídeo de demonstração, você nos vê encerrar o navegador com kill -9, reiniciá-lo, e o upload continua exatamente de onde parou. Algo inédito!

Desafio aceito: apenas 30 dias para a decolagem

Vínhamos adiando o lançamento da 1.0 havia bastante tempo. Sempre há só mais um recurso que você quer adicionar ou outro bug que quer corrigir antes de considerar algo pronto para um lançamento 1.0. Para falar a verdade, o Uppy já vem sendo usado em produção⁠ há algum tempo e, embora iteremos e mudemos as coisas com frequência, a API já estava praticamente estável.

Então, há cerca de um mês, decidimos dar o passo e anunciamos um Mês do Uppy⁠ dentro da Transloadit. Isso significou que todos os membros da equipe, inclusive quem não trabalha principalmente no Uppy (a equipe principal do tus, nossas equipes de SDK, além dos nossos engenheiros de infraestrutura e de API, designers, redatores de conteúdo e os próprios fundadores), colaboraram e fizeram sua parte para garantir a decolagem em trinta dias. Também convidamos Evgenia⁠ para se juntar a nós durante o mês e dar uma mão no frontend. Toda semana, fazíamos uma chamada para analisar o quadro do projeto Uppy 1.0 e conversar sobre nosso progresso:

Aqui estão alguns destaques do que conseguimos entregar durante um mês inteiro dedicado ao Uppy:

• Um novo design para o site do Uppy.
• Suporte a localização e pacotes de idiomas⁠ para russo, alemão, holandês e francês (com mais idiomas vindo da comunidade). Kevin⁠ e eu escrevemos um script que percorre todos os plugins do Uppy no repositório e gera um en_US canônico, que pode servir de base para outras traduções. O script ainda verifica strings ausentes em todas as traduções, para você saber quais precisam ser atualizadas.
• Arrastar e soltar no Dashboard⁠, uma parte importante do Uppy, melhorou bastante com o suporte para colar arquivos e links tanto do navegador quanto do dispositivo. Agora você pode, por exemplo, arrastar um link ou uma imagem de outra aba para o Uppy!
• Suporte básico a React Native (beta)⁠: o Uppy roda em um ambiente React Native, temos um exemplo com uploads retomáveis via tus e suporte ao componente Expo @uppy/react-native para selecionar imagens, vídeos, documentos e arquivos de URLs remotas com a ajuda do Companion.
• Repaginação do design⁠: a interface do Dashboard melhorou bastante nos últimos dias, com novos ícones, tipografia mais refinada, melhor organização das cores, áreas clicáveis maiores e muito mais.
• Muitos problemas de acessibilidade foram identificados.
• O Robodog ganhou suporte a um Dashboard inline⁠.
• A estrutura da documentação foi reformulada⁠.
• As Assemblies da Transloadit agora podem ser canceladas corretamente⁠.
• O progresso do upload é informado com mais precisão com o XHR-upload e o Companion⁠.
• O progresso do upload melhorou de modo geral⁠.
• Os scripts npm foram refatorados⁠. Sim, isso é importante!
• E o mais doido de tudo: nossa equipe de conteúdo estava inspirada e publicou um post todos os dias⁠ nos últimos trinta dias para manter você por dentro do nosso progresso diário.

Observação: o Robodog foi descontinuado. Para novas integrações, use o plugin Transloadit⁠ do Uppy (com a interface do Dashboard ou uma interface personalizada).

Quais recursos entraram na 1.0? E quais (ainda) não entraram?

Lista de recursos do Uppy 1.0:

• Interface elegante
• Leve e com poucas dependências
• Um núcleo pequeno com arquitetura modular: tudo é um plugin
• Usa JavaScript moderno, com versões transpiladas em ES5 disponíveis em lib e versões minificadas para uso direto em navegadores em dist
• Pode ser usado como bundle direto de uma CDN ou como módulo para importar
• Uploads de arquivos retomáveis via o padrão aberto tus
• Uploads diretos para o S3
• Suporte a webcam
• Seleção de arquivos do Dropbox, do Google Drive e do Instagram, deixando o trabalho pesado para os servidores via Companion
• Robusto: novas tentativas para tudo
• Feito pensando em acessibilidade (ainda não é perfeito, mas melhoramos constantemente)
• Recuperação de arquivos (após uma falha do navegador ou uma navegação acidental) via Golden Retriever
• Suporte a localidades: troque de idioma facilmente ou forneça seus próprios textos
• Compatível com React (React Native em beta)
• Funciona muito bem em dispositivos móveis
• Funciona muito bem com a Transloadit e funciona muito bem sem ela

Também deixamos dois recursos “para trás”:

Oferecer atalhos simplificados para usuários iniciantes (predefinições)

Achamos que o Uppy já é simples o bastante de usar, e as predefinições poderiam acabar deixando tudo menos claro. O Robodog até oferece integrações com menos “boilerplate”, mas isso foi feito como um wrapper, e não como uma predefinição.

Interface personalizável com temas e um visual padrão bonito

Em vez de optar por { theme: 'dark' }, oferecemos personalização de temas apenas via CSS. Por exemplo, é possível usar a media query prefers-color-scheme para isso.

Por fim, nosso recurso de “seleção de arquivos de fontes remotas” não está tão completo quanto talvez gostaríamos, já que no momento não inclui suporte a Google Photos, Box ou Facebook. Esperamos que a comunidade possa ajudar com isso.

O que vem a seguir para o Uppy?

Isso significa que o Uppy é perfeito? Nada disso!

Ainda há muitos problemas registrados⁠ e itens no nosso backlog, e já estamos planejando o Uppy 1.1⁠. Também queremos, talvez, lançar um plugin para WordPress, adicionar recorte de imagens e muito mais, mas estamos lançando a 1.0 hoje porque ela contém praticamente todos os recursos que nos propusemos a implementar. Todos esses recursos foram documentados, e não esperamos que suas APIs mudem. Se, em algum momento, elas precisarem mudar, teremos que lidar com isso com cuidado. Por exemplo, lançando uma versão 2.0 e fazendo todo o barulho que vem junto.

O Uppy já é usado a sério por uma comunidade seriamente grande e por várias empresas sérias. Então, com a 1.0, também estamos sinalizando para você: ei, levamos isso a sério e não vamos trocar as coisas por baixo do seu app assim, do nada. E, se você ainda não usa o Uppy nos seus uploads de arquivos, agora é o melhor momento para experimentar!

Esperamos que seus usuários fiquem tão encantados com o Uppy 1.0 quanto nós ficamos ao projetá-lo e construí-lo. Ver o seu apoio e as suas contribuições ao longo desse caminho fez toda a diferença. Agradecemos muito! E se você puder deixar um comentário no ProductHunt⁠, no Hacker News⁠ ou no Reddit⁠ e nos dar sua opinião nua e crua, isso significaria muito para nós!

💡 Este post foi publicado originalmente no blog do Uppy⁠.