Transloadit

Meu primeiro app

A Transloadit é versátil e há muitas maneiras de aproveitar nossa API. Para escolher um caminho simples e direto para fins de demonstração, vamos usar por padrão uma integração em navegador web com o Transloadit Plugin do Uppy.

Vamos criar uma página web simples que faz upload de imagens e as redimensiona para 1500x500 pixels. Este primeiro Template tem um Robot de processamento, então você consegue um resultado antes de configurar armazenamento ou um fluxo de trabalho maior.

Nosso primeiro Template

Crie um novo Template no seu Workspace com o nome my-first-template e salve as seguintes Assembly Instructions dentro dele:

{
  ":original": {
    "robot": "/upload/handle"
  },
  "crop_thumbed": {
    "use": ":original",
    "robot": "/image/resize",
    "result": true,
    "width": 1500,
    "height": 500,
    "resize_strategy": "fillcrop"
  }
}

Explicando as Assembly Instructions

Agora, vamos olhar mais de perto o JSON, que contém dois Steps:

  1. :original invoca 🤖/upload/handle, que vai receber qualquer arquivo que o Uppy jogar nele e depois disponibilizá-lo para que outros Robots o consumam. Você poderia definir um limite de tamanho de arquivo neste Robot, entre outras coisas.
  2. crop_thumbed recebe de bom grado esses arquivos via "use": ":original". Em seguida, ele invoca 🤖/image/resize com parâmetros como resize_strategy. Este é o único Robot de processamento do Template.

Na nossa integração com o Uppy, substitua YOUR_TEMPLATE_ID pelo ID do seu Template. Adicione o seguinte a um arquivo test.html e depois abra-o no seu navegador:

<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v4.3.1/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/v4.3.1/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          template_id: 'YOUR_TEMPLATE_ID',
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .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) // Array of all encoding results
      })
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

Você vai notar que, junto com YOUR_TEMPLATE_ID, também precisamos substituir YOUR_TRANSLOADIT_KEY, cujo valor pode ser obtido criando uma Auth Key na sua conta.

E pronto! ✨ Se você foi copiando/colando/substituindo junto, agora tem um protótipo funcional. Os resultados são despejados no console log do seu navegador, mas você também pode ver as Assemblies sendo adicionadas à sua conta em tempo real. Se você não digitou junto, ainda dá para testar ao vivo nesta demonstração de redimensionamento de imagens  (English).

As URLs temporárias dos resultados são referenciadas no console log. Para manter esses arquivos permanentemente e enviar os resultados para o seu back-end, vá para a página Salvando arquivos de resultado.