Using Uppy with Transloadit headless

Uppy
1

Hi there! I’ve been a happy user of Transloadit for some weeks now. I’ve just used Robodog.upload for now, but want to now add a progress bar for better usability. However I don’t want to use any of the UI components of Uppy. Instead, I’d like to use it headless and take care of the UI entirely myself. That’s because I’m using React + TailwindCSS (very elegant solution btw) and follow the pattern of React Function Components with Hooks.

So here’s my question: What’s the most bare-metal usage of Transloadit from the browser? Do I need Uppy for that? Or could I easily go with native fetch or Axios.js?

My requirements:

  • Ability to listen to progress events (to update the percentage of my progress bar in the UI)
  • XHR Upload preferred, I don’t need resumable uploads

Here’s my current usage:

// Sends a file to the transload it service to process it
// and store in DigitalOcean Spaces
// path: where to store the file
// basename: a unique name under which the file should be stored
// file extension is determined automatically
async function transloadit (file, path, basename, templateId) {
  console.log('templateId', templateId)
  const result = window.Robodog.upload([file], {
    params: {
      auth: { key: authKey },
      template_id: templateId
    },
    fields: {
      path, // e.g. "documents/michael" // without trailing slash
      basename // without extension
    }
  })
  return result
}

Hope someone can point me in the right direction, have example code etc. I’d be happy to share my React integration of transloadit once I have completed it. Think this would be very appealing for many React folks. Happy to help here, because otherwise fantastic service you have here! :slight_smile:

Cheers, Michael

2

Greetings, Michael. Thank you for the kind words. As for using Transloadit without Uppy, it is possible, but not really recommendable. The current Transloadit integration is pretty complex, and maintained by a team of people, so while you definitely could write your own client, it’s more a matter of whether you should.

Uppy can be ran without any UI plugins to provide a headless environment. From there you could write your own plugin (probably the better choice), or just hook into Uppy’s events to update the UI. It’s worth noting that we also have an official react UI plugin, which is the general recommendation for Uppy + React.

Regardless of how you’d like to handle the UI, here’s an example of how to setup Uppy and Transloadit (not specific to React, because the implementation changes depending on if you use @uppy/react)

import Uppy from '@uppy/core'
import Tranloadit from '@uppy/transloadit'

const uppy = new Uppy({
// Options here
})

uppy.use(Transloadit, {
 params: {
    auth: { key: 'YOUR_TRANSLOADIT_KEY' },
    template_id: 'YOUR_TEMPLATE_ID'
  }
})

Hopefully this helps! Of course, let me know if you have any questions.
- Andrew