Transloadit as Companion for Instagram

leenasn · September 18, 2023, 10:30am

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,
    },

  })
  .use(Uppy.Compressor)

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,
Leena

mifi · September 19, 2023, 2:15pm

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

leenasn · September 20, 2023, 1:40pm

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 https://api2.transloadit.com/companion/instagram/get/17842922512049387

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(updatedFile.data))
    previewImage.setAttribute("class", "uppy-Dashboard-Item-previewImg")
    const imageWrapper = document.querySelector(".uppy-Dashboard-Item-previewInnerWrap")
    imageWrapper.innerHTML = ""
    imageWrapper.appendChild(previewImage)
}

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

Thank you.
Leena

Merlijn · September 21, 2023, 8:14am

Hello

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.

Merlijn · September 21, 2023, 9:22am

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

leenasn · September 21, 2023, 12:10pm

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:

POST https://api2-shtime.transloadit.com/companion/instagram/get/17842922512049387
> [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?

Merlijn · September 21, 2023, 12:45pm

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

leenasn · October 6, 2023, 8:34am

Sorry for the delay:

This is the code:

var 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${fieldId}`,
    target: `#uppy-container-${fieldId}`,
    proudlyDisplayPoweredByUppy: false,
    waitForThumbnailsBeforeUpload: true,
    thumbnailType: 'image/png',
    autoOpenFileEditor: true,
  })
  .use(Uppy.XHRUpload, { endpoint: url })
  .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,
    },

  })
  .use(Uppy.Compressor)
  .use(Uppy.Instagram, {
    target: Uppy.Dashboard,
    companionUrl: Uppy.Transloadit.COMPANION_URL,
    companionAllowedHosts: Uppy.Transloadit.COMPANION_PATTERN,
    companionKeysParams: {
        key: '*key*',
        credentialsName: '*credentials_name*',
    },
  })
  .use(Uppy.Transloadit, {
    assemblyOptions: {      
      params: {
        template_id: '*template_id*',
        auth: { key: "*key*" },
      },
    },
  })

  uppy.setMeta({ authenticity_token: token })

  uppy.on('file-editor:complete', (updatedFile) => {
    var previewImage = document.createElement("img")
    previewImage.setAttribute("src", URL.createObjectURL(updatedFile.data))
    previewImage.setAttribute("class", "uppy-Dashboard-Item-previewImg")
    const imageWrapper = document.querySelector(".uppy-Dashboard-Item-previewInnerWrap")
    imageWrapper.innerHTML = ""
    imageWrapper.appendChild(previewImage)
  })

  uppy.on('upload-success', (file, response) => {
    const httpStatus = response.status // HTTP status code
    const httpBody = response.body   // extracted response data
    $(`#section_field_value_${fieldId}`).val(httpBody.url)
  })

When I try Instagram option it connects to Instagram and fetches the item. But when I click on “Upload file”, it throws the error:

Failed request with status: 400. message: invalid destination URL

Can you help me fix the same?

Thanks,
Leena

Merlijn · October 6, 2023, 8:56am

The problem is the same as mentioned before:

Use Transloadit for everything, meaning no @uppy/xhr-upload, or remove Transloadit and host your own Companion.

leenasn · October 18, 2023, 10:55am

Thank you.

I deployed my own Companion server. I am getting the following error:

> Content-Security-Policy: The page’s settings blocked the loading of a resource at wss://pn-companion-78e0bbcd3fb6.herokuapp.com/api/5e2088f1-b3e4-401e-8288-5f08f211644e (“connect-src”).

It seems I am missing something.

mifi · October 19, 2023, 4:27am

can you try to remove the CSP for the page (or add a very permissive one)?

leenasn · October 19, 2023, 12:27pm

Thanks for the response. I changed it the code to directly upload to S3 via Companion as mentioned here: AWS S3 (legacy) | Uppy

I want to know two things:

How can I upload to user-specific directories every time the user uploads it? My companion is hosted in Heroku so how can I change the getKey option? I saw COMPANION_AWS_PREFIX, but setting that will mean that its the same prefix for all correct?
How can I get the uploaded file URL for both Instagram uploads via Companion? I saw that it returns just the token.

Thank you,
Leena

mifi · October 25, 2023, 3:22pm

Sorry for the slow response.

If you want to change getKey, you need to run companion instead as an express middleware: Companion | Uppy

If youwant the uploaded file URL via companion, you can listen to the ‘success’ event:

Topic		Replies	Views
401 Unauthorized after login with Instagram Uppy	1	1051	July 17, 2020
Uppy with companion upload to s3, the file is 403 when try to access it from backend Uppy	8	447	February 8, 2023
Instagram plugin 401 Unauthorized Uppy	2	962	October 9, 2019
Default companion authentication not working? Uppy	2	961	September 4, 2019
Can't get import url working Uppy	8	3247	January 21, 2021

Transloadit as Companion for Instagram

Related Topics