Transloadit

Ma première application

Transloadit est polyvalent et notre API peut être exploitée de nombreuses façons. Pour suivre un parcours simple à des fins de démonstration, nous utiliserons par défaut une intégration dans le navigateur web avec le plugin Transloadit d’Uppy.

Nous allons créer une page web simple qui envoie des images et les redimensionne en 1500x500 pixels. Ce premier Template comporte un Robot de traitement, ce qui vous permet d’obtenir un résultat avant de configurer le stockage ou un flux de travail plus vaste.

Notre premier Template

Veuillez créer un nouveau Template dans votre Workspace en le nommant my-first-template, puis y enregistrer les Assembly Instructions suivantes :

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

Explication des Assembly Instructions

Examinons maintenant de plus près le JSON, qui contient deux Steps :

  1. :original invoque 🤖/upload/handle, qui recevra tout fichier qu’Uppy lui envoie, puis le mettra à disposition des autres Robots. Vous pourriez, entre autres, définir une limite de taille de fichier dans ce Robot.
  2. crop_thumbed récupère volontiers ces fichiers via "use": ":original". Il invoque ensuite 🤖/image/resize avec des paramètres tels que resize_strategy. C’est le seul Robot de traitement du Template.

Dans notre intégration Uppy, remplacez YOUR_TEMPLATE_ID par l’ID de votre Template. Ajoutez le code suivant dans un fichier test.html, puis ouvrez-le dans votre navigateur :

<!-- 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>

Vous remarquerez qu’en plus de YOUR_TEMPLATE_ID, nous devrons également remplacer YOUR_TRANSLOADIT_KEY, dont la valeur peut être obtenue en créant une Auth Key dans votre compte.

Et voilà ! ✨ Si vous avez copié, collé et remplacé au fur et à mesure, vous disposez maintenant d’un prototype fonctionnel. Les résultats sont affichés dans le journal de la console de votre navigateur, mais vous pouvez aussi voir les Assemblies ajoutées à votre compte en temps réel. Si vous n’avez pas suivi en tapant le code, vous pouvez tout de même l’essayer de façon interactive dans cette démo de redimensionnement d’images  (English).

Les URL temporaires des résultats figurent dans le journal de la console. Pour conserver ces fichiers de façon permanente et envoyer les résultats à votre back-end, passez à la page Enregistrer les fichiers de résultat.