Herramienta de subida de archivos Uppy

Uppy es una herramienta de código abierto de Transloadit para subir archivos desde navegadores web. Con más de 30.000 seguidores en GitHub, es la herramienta de subida de archivos n.º 1 del mundo. Gracias a la compatibilidad integrada con el protocolo tus, las subidas pueden superar interrupciones de red, cierres inesperados del navegador y salidas accidentales de la página. Además, es la forma recomendada de integrar Transloadit con navegadores web.

El plugin de Transloadit para Uppy te permite comunicarte con la API de Transloadit. Puedes usarlo con todos los demás plugins de Uppy, por ejemplo, con el selector modal de archivos compatible con importaciones desde servicios de terceros como Instagram, con la integración en formularios HTML y mucho más.

Transloadit aloja tusd para subidas reanudables y nuestra API de encoding. Cuando añades fuentes remotas, también alojamos Companion.

Subir archivos con Uppy + Transloadit

Piensa en Uppy como la experiencia de subida en el navegador y en Transloadit como el pipeline de procesamiento:

Uppy recopila archivos (de fuentes locales, remotas o de la cámara) y los sube mediante la capacidad de reanudación del protocolo tus.
Transloadit ejecuta tu Assembly (codificar, optimizar, analizar, almacenar, etc.).
La entrega se realiza desde tu almacenamiento, opcionalmente mediante tu CDN o la CDN de Transloadit (TLCDN).

Si solo necesitas subidas y almacenamiento, puedes mantener tu Assembly al mínimo (solo /upload/handle y un Step de exportación). Si necesitas transformaciones, añade los Robots correspondientes y mantén igual la experiencia de subida; Uppy no cambia.

Esto facilita ofrecer una única interfaz de subida coherente mientras sustituyes o amplías los Steps de procesamiento a medida que evoluciona tu producto.

Guías para frameworks

Empieza con la guía oficial de Uppy para configurar el Template y la firma en el servidor. Después, ve a la sección del cliente para tu framework:

La guía mantiene el Auth Secret de Transloadit en el servidor, firma opciones de Assembly de corta duración y proporciona al navegador únicamente los valores que necesita @uppy/transloadit. Antes de firmar, el servidor debe elegir el Template permitido y autorizar al usuario actual; no debe firmar Instructions arbitrarias recibidas del navegador.

Ejemplo

Para esta demostración, mostraremos una ruta exitosa que usa la detección de rostros de Transloadit, un selector y nuestro paquete de CDN. Esta demo incluye deliberadamente un Auth Key e Instructions sin firmar en el navegador. Úsala solo con credenciales de prueba. En producción, sigue el flujo de Template firmado en el servidor de la guía para frameworks anterior.

<!-- 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',
    })
    .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>

Para ver más ejemplos, consulta examples/ o pruébalos en vivo. Uppy y Transloadit son muy versátiles, así que quizá tengas una necesidad diferente y es probable que ya la admitamos.

Documentación

Consulta la documentación completa del plugin de Transloadit para Uppy, que incluye toda la API del plugin. Empieza con la guía para frameworks para crear una integración completa.