Transloadit as Companion for Instagram

I get the following error when I click on Instagram configured with Uppy.

> Could not fetch credentials
*> *
> This is probably an Uppy configuration issue. Check that your Transloadit key is correct, and that the configured credentialsName for this remote provider matches the name you gave it in the Template Credentials setup on the Transloadit side.
*> *
> Internal error message: Response code 500 (Internal Server Error)

Here is my configuration code:

const uppy = new Uppy.Uppy({
    restrictions: {
      maxNumberOfFiles: 1,
      allowedFileTypes: ['image/*'],
      maxFileSize: 10000000,
      minFileSize: 1000,      }
  .use(Uppy.ThumbnailGenerator, {
    id: "uppy-Dashboard-Item-previewInnerWrap",
    thumbnailType: 'image/png',
    waitForThumbnailsBeforeUpload: true,
  .use(Uppy.Dashboard, {
    inline: false,
    trigger: `.UppyModalOpenerBtn`,
    target: `#uppy-container`,
    proudlyDisplayPoweredByUppy: false,
    waitForThumbnailsBeforeUpload: true,
    thumbnailType: 'image/png',
    autoOpenFileEditor: true,
  .use(Uppy.XHRUpload, { endpoint: url })
  .use(Uppy.Instagram, {
    target: Uppy.Dashboard,
    companionUrl: Uppy.Transloadit.COMPANION_URL,
    companionAllowedHosts: Uppy.Transloadit.COMPANION_PATTERN,
    companionKeysParams: {
        key: 'key',
        credentialsName: 'Instagram',
  .use(Uppy.Form, {
    target: ".studio_landing_page_section",
    getMetaFromForm: false,
    addResultToForm: false,
    submitOnSuccess: true,
    triggerUploadOnSubmit: false,
    addResultToForm: false,
  .use(Uppy.ImageEditor, {
    target: Uppy.Dashboard,
    quality: 0.9,
    cropperOptions: cropperOptions,
    actions: {
        revert: false,
        rotate: true,
        granularRotate: false,
        flip: true,
        zoomIn: true,
        zoomOut: true,
        cropSquare: false,
        cropWidescreen: false,
        cropWidescreenVertical: false,

  • The companionKeysParams key I provided is the Auth Key I found under Transloadit Credentials
  • The companionKeysParams credentialsName is the name of the new credential I created for Companion service.

I am providing a screenshot of my credentials in Transloadit dashboard.

Can you help me to fiix this issue?

Thank you,

Hi. I believe the problem here could be that you haven’t verified you email for your Transloadit account. Could you doble check that?

Yes, that worked.

But am stuck with multiple issues:

  • I want to upload the selected files from Instagram to my own server using XHR. The workflow works fine fine for local files, but am getting the following error when I choose file from Instagram and click on upload after selecting the file from Instagram.

[Uppy] Failed to upload Instagram 2012-08-22T03:30:02+00006.jpeg Could not post

  • Also, I want to resize/crop the image before upload. I’ve added the following code to enable the same after selecting a local file. How can I do the same after selecting a file from Instagram?
uppy.on('file-editor:complete', (updatedFile) => {
      var previewImage = document.createElement("img")
    previewImage.setAttribute("src", URL.createObjectURL(
    previewImage.setAttribute("class", "uppy-Dashboard-Item-previewImg")
    const imageWrapper = document.querySelector(".uppy-Dashboard-Item-previewInnerWrap")
    imageWrapper.innerHTML = ""

Any help on this is appreciated. Is there any documentation am missing? I couldn’t find any example for the same.

Thank you.

Hello :wave:

You can’t use @uppy/xhr-upload with hosted Companion. You can only use @uppy/transloadit. If you want this you need to host your own Companion.

In your code example you are only replacing the preview, this has nothing to do with what is actually send. That’s probably not what you want? Regarding resizing images from Companion, that’s not possible. You would need all the file data present locally which would defeat the purpose of Companion: downloading and uploading on the server so the client doesn’t have to.

If you use Transloadit for everything you do have endless options for what to do with your files, such as image manipulation: Image Manipulation | Transloadit

Thank you for your response.

I tried using Transloadit, and configured it with the below code. But am getting the error:

use(Uppy.Transloadit, {
    assemblyOptions: {
      template_id: '*template_id*',
      params: {
        auth: { key: "*auth_key*" },

I replaced template_id and auth_key appropriately, but am getting the error:

> [HTTP/2 400 Bad Request 334ms]
*> *
> [Uppy] [17:29:37] Failed request with status: 400. Bad Request message: invalid destination url

Can you help me to fix it?

Can you show your full Uppy integration code now that you made the changes?