Mi primera aplicación

Transloadit es versátil y hay muchas formas de aprovechar nuestra API. Para elegir un flujo sencillo con fines de demostración, usaremos de manera predeterminada una integración con el navegador web mediante el plugin de Transloadit para Uppy.

Crearemos una página web sencilla en la que redimensionarás los archivos subidos a 1500x500 píxeles y los almacenarás en tu bucket de S3.

Nuestro primer Template

Crea un Template nuevo en tu Workspace, asígnale el nombre my-first-template y guarda en él las siguientes Assembly Instructions:

{
  ":original": {
    "robot": "/upload/handle"
  },
  "crop_thumbed": {
    "use": ":original",
    "robot": "/image/resize",
    "result": true,
    "width": 1500,
    "height": 500,
    "resize_strategy": "fillcrop"
  },
  "exported": {
    "use": [
      "crop_thumbed",
      ":original"
    ],
    "robot": "/s3/store",
    "credentials": "demo_s3_credentials",
    "url_prefix": "https://demos.transloadit.com/"
  }
}

Explicación de las Assembly Instructions

Ahora veamos más de cerca el JSON, que contiene tres Steps:

:original invoca 🤖/upload/handle, que recibirá cualquier archivo que Uppy le envíe y lo pondrá a disposición de otros Robots. Entre otras cosas, podrías definir un límite de tamaño de archivo en este Robot.
crop_thumbed recibe esos archivos mediante "use": ":original". Luego invoca 🤖/image/resize con parámetros como resize_strategy.
exported almacena tanto los archivos subidos originalmente como las versiones redimensionadas en tu bucket de S3 con la ayuda de 🤖/s3/store. La credencial de S3 se crea y almacena por separado en tu cuenta por motivos de seguridad. Haz referencia a ella por su nombre, reemplazando demo_s3_credentials. Obtén más información

Nota

Si no tienes un bucket de S3 (ni ningún otro destino de exportación compatible), puedes crear uno u omitir por ahora el exported Step. Nuestro prototipo seguirá funcionando, pero los archivos de resultados se alojarán con nosotros y se eliminarán después de 24 h.

En nuestra integración con Uppy, reemplaza YOUR_TEMPLATE_ID por el ID de tu Template. Añade lo siguiente a un archivo test.html y luego ábrelo en tu 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>

Notarás que, además de YOUR_TEMPLATE_ID, también tendremos que reemplazar YOUR_TRANSLOADIT_KEY, cuyo valor puedes obtener creando una Auth Key en tu cuenta.

¡Y eso es todo! ✨ Si seguiste el proceso copiando, pegando y reemplazando los valores, ahora tienes un prototipo funcional. Los resultados se muestran en el registro de la consola de tu navegador, pero también puedes ver las Assemblies que se añaden a tu cuenta en tiempo real. Si no seguiste los pasos, también puedes probarlo en vivo en esta demostración de redimensionamiento de imágenes (English).

Sin embargo, aún no hemos terminado. Los resultados están en tu bucket de S3 y aparecen referenciados en el registro de la consola. Pero ¿cómo puedes enviar estos resultados a tu back-end para que otras personas también puedan disfrutarlos? Descúbrelo en la página Guardar los archivos de resultados.