Formulario multipart

Originalmente, creamos este enfoque para evitar la necesidad de tener JavaScript habilitado en el navegador. Los tiempos han cambiado y ahora se puede asumir que JavaScript está habilitado en el navegador, por lo que recomendamos usar Uppy como la opción preferida de integración con el navegador.

Dicho esto, para mostrar conceptos básicos, crear un prototipo rápido o, si realmente quieres ofrecer una alternativa para los navegadores en los que JavaScript está deshabilitado o dejó de funcionar, puedes integrar Transloadit usando únicamente un <form> multipart.

Instalación

No hay nada que instalar 👌

Uso

Establece el atributo action del formulario en "https://api2.transloadit.com/assemblies". Luego, los archivos se suben directamente a nuestra API, junto con las Instructions incluidas en un campo params oculto.

Para evitar problemas de análisis en el navegador, conviene dejar que una computadora aplique encoding JSON a las Instructions y luego escape entidades HTML como < y " a < y ". El resultado es un poco difícil de analizar para una persona, así que quizá sea mejor ni intentarlo 😄

Puedes establecer una redirect_url dentro de las Instructions para indicar a nuestra API que redirija el navegador a la página de confirmación que elijas cuando todo haya terminado. Agregaremos: ?assembly_id=xyz&assembly_ssl_url=https://api2.transloadit.com/assemblies/xyz a esa URL.

Al servir la página de confirmación, tu back-end podría analizar estos parámetros de consulta para que puedas realizar otras acciones, como descargar el Assembly Status JSON y los resultados del encoding a los que hace referencia.

La página de confirmación se sirve al navegador en cuanto finaliza la subida, por lo que la Assembly podría seguir ejecutándose (por ejemplo, aplicando encoding a un video grande). Puedes consultar periódicamente la assembly_ssl_url desde tu back-end o configurar Assembly Notifications y proporcionar una notify_url en tus Instructions. En ese caso, enviaremos mediante POST el Assembly Status JSON a esa URL para que puedas gestionar los resultados de esa manera desde tu back-end.

Ejemplo

<!--
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="%7B%0A%20%20%22redirect_url%22%3A%20%22https%3A%2F%2Fexample.com%2Fsuccess%22%2C%0A%20%20%22auth%22%3A%20%7B%0A%20%20%20%20%22key%22%3A%20%22YOUR_TRANSLOADIT_KEY%22%0A%20%20%7D%2C%0A%20%20%22template_id%22%3A%20%22YOUR_TEMPLATE_ID%22%2C%0A%20%20%22steps%22%3A%20%7B%7D%0A%7D"
  />
  <input type="file" name="myfile_1" multiple="multiple" />
  <input type="submit" value="Upload" />
</form>