Herramienta de subida de archivos Uppy

transloadit/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 por ti los componentes de servidor necesarios (Companion y tusd), además, por supuesto, de nuestra API de encoding.

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.

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.

Pipeline de contenido completo

Un flujo típico de principio a fin se ve así:

Subir con Uppy (Dashboard, Webcam o proveedores remotos mediante Companion).
Procesar con Transloadit (p. ej., /image/resize, /video/encode, /document/ocr).
Entregar desde tu propio almacenamiento. De manera opcional, puedes usar tu propia CDN o TLCDN de Transloadit.

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

Ejemplo

Para esta demostración, mostraremos una única ruta exitosa que usa la detección de rostros de Transloadit en combinación con un selector, y utilizaremos nuestro paquete de CDN para facilitar el copiado y pegado. Asegúrate de reemplazar YOUR_TRANSLOADIT_KEY por tu clave de API de Transloadit.

<!-- 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: {
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
          // It's often better 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 })
    .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>

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 es la forma recomendada de integrar Transloadit y Uppy.