Formulário multipart

Originalmente, criamos essa abordagem para dispensar a necessidade de ter o JavaScript ativado no navegador. Os tempos mudaram e hoje é possível presumir que o JavaScript está ativado no navegador, por isso recomendamos o Uppy como a opção preferencial de integração com o navegador.

Ainda assim, para demonstrar conceitos básicos, criar um protótipo rápido ou caso você realmente queira oferecer uma alternativa para navegadores em que o JavaScript esteja desativado ou tenha falhado, você pode integrar a Transloadit usando apenas um <form> multipart.

Instalar

Não há nada para instalar 👌

Uso

Defina o atributo action do formulário como "https://api2.transloadit.com/assemblies". Assim, os arquivos são enviados por upload diretamente à nossa API, junto com quaisquer Instructions em um campo oculto params.

Para evitar problemas de análise no navegador, devemos deixar que um computador codifique as Instructions em JSON e depois escape entidades HTML como: < e " para < e ". O resultado é um pouco difícil de interpretar para uma pessoa, então talvez seja melhor nem tentar 😄

Não aplique codificação de URL ao JSON dentro de um campo multipart: a API espera que o valor do campo seja JSON. O exemplo abaixo usa Instructions de teste sem assinatura. Em produção, gere os params e a assinatura no seu servidor confiável usando Signature Authentication e inclua a assinatura em um campo oculto signature separado. Nunca coloque seu Auth Secret no formulário.

Você pode definir redirect_url nas Instructions para indicar à nossa API que redirecione o navegador para uma página de sucesso de sua escolha quando tudo estiver concluído. Acrescentaremos: ?assembly_id=xyz&assembly_ssl_url=https://api2.transloadit.com/assemblies/xyz a essa URL.

Ao servir a página de sucesso, seu back-end pode analisar esses parâmetros de consulta para que você faça outras operações, como baixar o Assembly Status JSON e os resultados da codificação aos quais ele se refere.

A página de sucesso é servida ao navegador assim que o upload é concluído, portanto a Assembly pode ainda estar em execução (codificando um vídeo grande, por exemplo). Você pode consultar periodicamente assembly_ssl_url com seu back-end ou configurar Assembly Notifications e fornecer notify_url junto com as Instructions. Nesse caso, enviaremos o Assembly Status JSON para esse endereço via POST, para que você possa lidar com os resultados usando seu back-end dessa forma.

Exemplo

<!--
We'll be inlining the following Assembly Instructions into a hidden params field,
escaping HTML entities such as &lt;, a task best left to machines :)

{
  "redirect_url": "https://example.com/success",
  "auth": {
    "key": "YOUR_TRANSLOADIT_KEY"
  },
  "template_id": "YOUR_TEMPLATE_ID",
  "steps": {}
}
-->

<form
  method="POST"
  enctype="multipart/form-data"
  action="https://api2.transloadit.com/assemblies"
>
  <input
    type="hidden"
    name="params"
    value="{&#x22;redirect_url&#x22;:&#x22;https://example.com/success&#x22;,&#x22;auth&#x22;:{&#x22;key&#x22;:&#x22;YOUR_TRANSLOADIT_KEY&#x22;},&#x22;template_id&#x22;:&#x22;YOUR_TEMPLATE_ID&#x22;,&#x22;steps&#x22;:{}}"
  />
  <input type="file" name="myfile_1" multiple="multiple" />
  <input type="submit" value="Upload" />
</form>