Hosted Companion on Transloadit

Transloadit
1

Hi there,

If I understand correctly, Transloadit providers hosted Companion.
I’d like to use it in order to get signed URLs for Wasabi-multipart (S3 multipart compatible), and then upload to Wasabi directly from the client, using Uppy.
I don’t need any transformations so I’d like to avoid uploading to Transloadit.
I can’t find in Transloadit console or docs, how to setup Companion URL for that usecase.

Any examples how to do that?
Thanks,
Dan

2

Update:
Got this code, it almost works. The problem is that transloadit plugin seems to want to have an assembly with steps. If I remove the plugin, I can’t configure the transloadit key because it is configured in transloadit and not in S3 plugin.

Another issue - how do I tell transloadit to generate signed URLs to Wasabi? In the console I have defined Wasabi under Credentials > Third party credentials . Is this enough?

const uppy = Uppy.Core({
    debug: true,
    autoProceed: false,
    restrictions: {
      maxFileSize: 31457280, /*30 MB. TODO: take from input data attribute*/
      maxNumberOfFiles: 0,
      minNumberOfFiles: 0,
      allowedFileTypes: ['image/*', 'video/*'] 
    }
  });
  const AwsS3Multipart = Uppy.AwsS3Multipart;
  const Transloadit = Uppy.Transloadit;
  const Dashboard = Uppy.Dashboard
  uppy.use(AwsS3Multipart, {
    limit: 0, 
    companionUrl: Transloadit.COMPANION
  })
  .use(Dashboard, {
    trigger: '.form-data-upload-button',
    inline: false,
    target: 'body',
    replaceTargetContent: false,
    showProgressDetails: true,
    note: null, 
    metaFields: [
      { id: 'name', name: 'Name', placeholder: 'file name' },
      { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
    ],
    browserBackButtonClose: false
  })
  .use(Uppy.Webcam, { target: Dashboard })
  .use(Uppy.ScreenCapture, { target: Dashboard })
  .use(Uppy.ImageEditor, { target: Dashboard })
  .use(Transloadit, {
    importFromUploadURLs: true,  /*this was an attempt to make the files not upload to transloadit*/
    params: {
      auth: { key: 'a0e0f2e2165e4c69b6528fe31838f333' },
      steps: {} /*this doesn't work*/
    }
  })
3

Hi!

Unfortunately it’s not possible to use Transloadit’s hosted Companion without also having Transloadit as the destination. As we are seeing more requests for this use case, it is something we’ll consider, but as of now it’s not possible. Transloadit’s hosted Companion server is locked to uploading to Transloadit’s hostname, and can only upload to Tus and does not have the capability to sign S3 URLs. You could however use Transloadit’s hosted Companion to upload files and then ship them off to Wasabi using a simple Transloadit Assembly. Let me know if you need any assistance.

4

Hi mifi! Is it possible now? Someone from intercom just told me that was possible now to use transloadit hosted Companion without Transloadit plugin or template id. I just tested it out and it seems to work in localhost, Companion seems to return the preview urls from the remotes.

Screenshot 2023-07-17 103951
Screenshot 2023-07-17 103951873×517 29.9 KB

What I find strange is that I can use it even I dont implement the Transloadit plugin or provide my auth id. Not sure if that’s ok.

const uppy = new Uppy({
  restrictions: {
    maxNumberOfFiles: this.isUniq ? 1 : this.numberOfFiles,
    minNumberOfFiles: this.isUniq ? 1 : null,
    allowedFileTypes: ['image/jpeg', 'image/jpg', 'image/png']
  }
})
.use(Dashboard, {
  id: 'Dashboard',
  trigger: this.dropId,
  locale: this.$i18n.locale === 'es' ? Spanish : English,
  closeAfterFinish: true,
  note: this.note,
  closeModalOnClickOutside: true
})
.use(RemoteSources, {
  target: Dashboard,
  companionUrl: COMPANION_URL,
  companionAllowedHosts: COMPANION_ALLOWED_HOSTS,
})
.use(Webcam, { target: Dashboard })
.use(DropTarget, { target: document.body })
.use(ImageEditor, {
  target: Dashboard,
  quality: 0.8,
  cropperOptions: {
    viewMode: 1,
    background: false,
    autoCropArea: 1,
    responsive: true,
    croppedCanvasOptions: {},
  },
  locale: this.$i18n.locale === 'es' ? Spanish : English
});
5

@mifi Is there an update to this? We’d also like to use the hosted Transloadit companion to get signed URLs and upload directly from the client.

6

You can implement signing yourself and the better improvement is to create @uppy/server-functions rather than encouraging to use Companion, which is overkill (unless you already use it for remote providers).