Uppy para upload de arquivos

Uppy é uma ferramenta de upload de arquivos de código aberto para navegadores web, criada pela Transloadit. Com mais de 30.000 usuários que deram uma estrela ao projeto no GitHub, é a ferramenta de upload de arquivos nº 1 do mundo. Os uploads podem resistir a oscilações de rede, falhas do navegador e saídas acidentais da página graças ao suporte integrado a tus. O Uppy é a maneira recomendada de integrar a Transloadit aos navegadores web.

O plugin da Transloadit para Uppy ajuda você a se comunicar com a API da Transloadit. Ele pode ser usado com todos os outros plugins do Uppy, por exemplo, o seletor de arquivos em uma interface modal com suporte a importações de serviços de terceiros como o Instagram, a integração com formulários HTML e muito mais.

A Transloadit hospeda o tusd para uploads retomáveis e a nossa API de codificação. Quando você adiciona fontes remotas, também hospedamos o Companion para você.

Uploads com Uppy + Transloadit

Pense no Uppy como a UX de upload no navegador e na Transloadit como o pipeline de processamento:

Uppy coleta arquivos (locais, da câmera ou de fontes remotas) e faz o upload deles com retomada via tus.
Transloadit executa sua Assembly (codificação, otimização, análise, armazenamento etc.).
A entrega ocorre a partir do seu armazenamento, opcionalmente pela sua CDN ou pela CDN da Transloadit (TLCDN).

Se você só precisa de uploads e armazenamento, pode manter sua Assembly mínima (apenas /upload/handle e um Step de exportação). Se precisar de transformações, adicione os Robots adequados e mantenha a mesma UX de upload; o Uppy não muda.

Isso facilita oferecer uma interface única e consistente de upload enquanto você substitui ou amplia os Steps de processamento conforme seu produto evolui.

Guias de frameworks

Comece pelo guia canônico do Uppy para configurar o Template e a assinatura no servidor; depois, vá para a seção do cliente para o seu stack:

O guia mantém o Auth Secret da Transloadit no seu servidor, assina opções de Assembly com validade curta e fornece ao navegador apenas os valores exigidos por @uppy/transloadit. Seu servidor deve escolher o Template permitido e autorizar o usuário atual antes de assinar; ele não deve assinar Instructions arbitrárias fornecidas pelo navegador.

Exemplo

Para fins de demonstração, vamos mostrar um cenário em que tudo funciona como esperado, usando a detecção de rostos da Transloadit com um seletor de arquivos e nosso bundle da CDN. Esta demonstração pronta para copiar e colar coloca deliberadamente uma Auth Key e Instructions não assinadas no navegador. Use-a apenas com credenciais de teste. Em produção, use o fluxo com Template e assinatura no servidor descrito no guia de frameworks acima.

<!-- TEST/DEMO ONLY: uses test credentials and unsigned Instructions in the browser. -->
<!-- For production, use https://uppy.io/docs/guides/uppy-transloadit/ -->
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i @uppy/core @uppy/dashboard @uppy/image-editor @uppy/remote-sources @uppy/transloadit -->
<link href="https://releases.transloadit.com/uppy/v5.2.4/uppy.min.css" rel="stylesheet" />
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v5.2.4/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
          // It's often better to store encoding instructions in your account
          // and use a template_id instead of adding these steps inline
          steps: {
            ':original': {
              robot: '/upload/handle',
            },
            faces_detected: {
              use: ':original',
              robot: '/image/facedetect',
              crop: true,
              faces: 'max-confidence',
              format: 'preserve',
              crop_padding: '10%',
            },
            exported: {
              use: ['faces_detected', ':original'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    // Optional: only needed for remote sources. Local-device uploads do not need Companion.
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to waitForEncoding:true this is fired after encoding is done.
      // Alternatively, set waitForEncoding to false and provide a notify_url
      console.log(transloadit) // Array of Assembly Statuses
      transloadit.forEach((assembly) => {
        console.log(assembly.results) // Object of encoding results keyed by Step name
      })
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

Para ver mais exemplos, confira examples/, ou teste-os na prática. O Uppy e a Transloadit são muito versáteis, então você pode ter uma necessidade diferente e, provavelmente, já temos suporte para ela.

Documentação

Veja a documentação completa do plugin da Transloadit para Uppy, que cobre toda a API do plugin. Comece pelo guia de frameworks para uma integração de ponta a ponta.