Using Uppy with Transloadit headless

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