Uppy para upload de arquivos

Uppy é uma ferramenta de upload de arquivos de código aberto para navegadores web da Transloadit. Com mais de 31.000 estrelas 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, e esta é 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 interface modal com suporte a importações de serviços de terceiros, como Instagram, 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ê.

Fazendo upload 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 upload deles com retomada via tus.
Transloadit executa sua Assembly (codifica, otimiza, analisa, armazena etc.).
A entrega acontece 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 relevantes e mantenha a mesma UX de upload. O Uppy não muda.

Isso facilita oferecer uma única interface de upload consistente enquanto você substitui ou amplia as etapas 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 fluxo feliz 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 assinado no servidor do 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/v6.0.6/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/v6.0.6/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',
      companionAllowedHosts: /\.transloadit\.com$/,
    })
    .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 mais exemplos, dê uma olhada em examples/, ou teste-os ao vivo. Uppy e Transloadit são muito versáteis, então você pode ter uma necessidade diferente e, provavelmente, nós já a suportamos.

Documentação

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