Transloadit

Uppy, l’outil de téléversement de fichiers

transloadit/uppy

Uppy est un outil de téléversement de fichiers open source pour navigateurs web, créé par Transloadit. Avec plus de 31 000 étoiles sur GitHub, c’est l’outil de téléversement de fichiers n° 1 au monde. Grâce à la prise en charge intégrée de tus, les téléversements peuvent résister aux coupures réseau, aux plantages du navigateur et aux sorties accidentelles de la page. C’est la méthode recommandée pour intégrer Transloadit aux navigateurs web.

Le plugin Transloadit pour Uppy vous aide à communiquer avec l’API Transloadit. Il peut être utilisé avec tous les autres plugins Uppy, par exemple l’interface modale de sélection de fichiers qui prend en charge les imports depuis des services tiers comme Instagram, l’intégration aux formulaires HTML, et plus encore.

Transloadit héberge tusd pour les téléversements avec reprise, ainsi que notre API d’encodage. Lorsque vous ajoutez des sources distantes, nous hébergeons également Companion pour vous.

Téléversement avec Uppy + Transloadit

Considérez Uppy comme l’expérience de téléversement dans le navigateur, et Transloadit comme le pipeline de traitement :

  1. Uppy collecte les fichiers (locaux, depuis la caméra ou depuis des sources distantes) et les téléverse avec la reprise de tus.
  2. Transloadit exécute votre Assembly (encodage, optimisation, analyse, stockage, etc.).
  3. La diffusion se fait depuis votre stockage, éventuellement via votre CDN ou celui de Transloadit (TLCDN).

Si vous avez seulement besoin du téléversement et du stockage, votre Assembly peut rester minimale (juste /upload/handle et un Step d’export). Si vous avez besoin de transformations, ajoutez les Robots pertinents en conservant la même expérience de téléversement : Uppy ne change pas.

Cela permet de proposer facilement une interface de téléversement unique et cohérente, tout en remplaçant ou en étendant les étapes de traitement à mesure que votre produit évolue.

Guides par framework

Commencez par le guide Uppy de référence pour la configuration du Template et de la signature côté serveur, puis passez à la section client correspondant à votre stack :

Le guide conserve l’Auth Secret Transloadit sur votre serveur, signe des options d’Assembly à courte durée de validité et ne transmet au navigateur que les valeurs requises par @uppy/transloadit. Votre serveur devrait choisir le Template autorisé et autoriser l’utilisateur actuel avant de signer ; il ne devrait pas signer des Instructions arbitraires fournies par le navigateur.

Exemple

À des fins de démonstration, nous présentons un scénario nominal qui utilise la détection de visages de Transloadit avec un sélecteur de fichiers et notre bundle CDN. Cette démo à copier-coller place délibérément une Auth Key et des Instructions non signées dans le navigateur. Utilisez-la uniquement avec des identifiants de test. En production, utilisez le flux de Template signé côté serveur décrit dans le guide par framework ci-dessus.

<!-- TEST/DEMO ONLY: uses test credentials and unsigned Instructions in the browser. -->
<!-- For production, use https://uppy.io/docs/guides/uppy-transloadit/ -->
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i @uppy/core @uppy/dashboard @uppy/image-editor @uppy/remote-sources @uppy/transloadit -->
<link href="https://releases.transloadit.com/uppy/v5.2.4/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/v5.2.4/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
          // It's often better to store encoding instructions in your account
          // and use a template_id instead of adding these steps inline
          steps: {
            ':original': {
              robot: '/upload/handle',
            },
            faces_detected: {
              use: ':original',
              robot: '/image/facedetect',
              crop: true,
              faces: 'max-confidence',
              format: 'preserve',
              crop_padding: '10%',
            },
            exported: {
              use: ['faces_detected', ':original'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    // Optional: only needed for remote sources. Local-device uploads do not need Companion.
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
      companionAllowedHosts: /\.transloadit\.com$/,
    })
    .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) // Object of encoding results keyed by Step name
      })
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

Pour d’autres exemples, consultez examples/ ou testez-les en ligne. Uppy et Transloadit sont très polyvalents : vous avez peut-être un besoin différent, et il est probable que nous le prenions déjà en charge.

Documentation

Consultez la documentation complète du plugin Transloadit d’Uppy, qui décrit l’API complète du plugin. Commencez par le guide par framework pour une intégration de bout en bout.