Colar para fazer upload no React

Desde que escrevi pela primeira vez sobre o lançamento do React-Uploady no ano passado, a biblioteca ganhou uma base de usuários substancial, várias centenas de estrelas no Github (se você não estrelou, sabe o que fazer ⭐️️) e milhares de downloads um mês.

Uma nova maneira de fazer upload de arquivos no React

À medida que o Uploady avança para uma versão 1.0.0, fico feliz em dizer que sua API é, e tem sido, estável por algum tempo. Como tal, não prevejo mudanças radicais no futuro.

Neste post, quero compartilhar o pacote mais recente para se juntar às fileiras de componentes, ganchos e utilitários úteis que o Uploady traz para a mesa — rpldy/upload-paste . Tornando trivial iniciar um upload a partir do evento paste.

O Whatsapp Web é um ótimo exemplo de colagem para upload em ação. Você pode clicar em um botão para abrir a caixa de diálogo de seleção de arquivo, arrastar e soltar um arquivo para iniciar o upload ou simplesmente copiar um arquivo para a área de transferência e colá-lo enquanto estiver focado na interface do usuário. Fazer isso iniciará o fluxo de upload, o que é muito conveniente.

Agora você pode adicionar pasta para upload ao seu aplicativo React com facilidade. @rpldy/upload-paste fornece um HOC (componente de ordem superior), bem como um gancho personalizado para habilitar isso com seus próprios componentes, exigindo apenas algumas linhas de código.

O código para o exemplo acima pode ser encontrado nesta sandbox:

Hora do código

Vamos dar uma olhada em um exemplo que combina arrastar e soltar do Uploady e a nova funcionalidade de colar para fazer upload. O resultado é uma experiência de usuário muito agradável, onde o usuário pode iniciar o upload de várias maneiras.

O código acima usa UploadDropZone (de @rpldy/upload-drop-zone ) e o envolve com o withPasteUpload HOC. Isso é realmente tudo o que há para isso. Nosso novo componente — PasteUploadDropZone — agora aceita arquivos soltando ou colando.

withPasteUpload pode envolver praticamente qualquer componente React. O componente resultante aceita algumas props básicas (id, classname) e uma prop especial chamada extraProps . Esta prop (um objeto) pode conter qualquer outra prop que você queira passar para o componente subjacente que foi encapsulado. Isso é importante porque o novo componente também aceitará todas as opções usuais de Upload (ex: autoUpload, params, etc.) como pode ser visto acima.

Mas espere, tem mais... Um gancho personalizado!

Caso você queira ativar colar para fazer upload em toda a página ou em um elemento personalizado, usePasteUpload é para você.

O código acima mostra como o gancho personalizado pode ser usado para habilitar a colagem para upload em um elemento específico.

Todos os parâmetros da função de gancho são opcionais .

O primeiro parâmetro é o objeto Upload Options que você pode passar para substituir/mesclar com as props passadas para o provedor <Uploady> anteriormente em seu aplicativo.

O segundo parâmetro é um elemento ref. Caso a ref seja omitida, o gancho escutará o evento paste no objeto global (janela).

O terceiro parâmetro é uma função que será chamada após o upload ser iniciado por um evento de colagem. É dado um objeto com a forma: { count: number } . Contagem é o número de arquivos colados.

O gancho retorna um objeto com dois métodos: toggle & getIsEnabled. O primeiro alternará o ouvinte para que você possa controlar a escuta da pasta sem precisar desmontar. o último, como o próprio nome indica, retorna true se o listener estiver ativo e false se não estiver.

A missão do React-Uploady é tornar o mais simples possível adicionar a funcionalidade de upload de arquivos aos aplicativos React. Ele faz isso ao mesmo tempo em que oferece muitas opções de personalização e extensibilidade. Portanto, acho que o novo pacote upload-paste se encaixa perfeitamente com a funcionalidade Uploady existente.

Experimente , e eu adoraria ouvir sobre sua experiência .