Uploading from plugins (dropbox, google drive) to my server via API

Uppy
1

Hi everyone. I have react app in which I have implemented uppy dashboard with plugins like google drive and dropbox, it reads files fine, but when i try and use XHR to upload file from lets say dropbox to my server via API it gives me error 400 “upload destination does not match any allowed destinations”. Im not sure is this possible at all, or am I just missing some permissions configuration. Any help is appriciated!

Here is my react implementation:

import Uppy from '@uppy/core';
import XHR from '@uppy/xhr-upload';
import RemoteSources from '@uppy/remote-sources';
import { Dashboard } from '@uppy/react';
import { COMPANION_URL } from '@uppy/transloadit';

 const [uppyDashboard] = useState(() =>
    new Uppy({
      restrictions: {
        allowedFileTypes: [".psd"],
        maxNumberOfFiles: 1,
        maxFileSize: 157286400,
      },
      locale: {
        strings: {
          dropPasteImportBoth:
            "%{browse} or Drag and Drop your file from your device or upload from cloud",
          browseFiles: "Click here",
          poweredBy: "",
        },
      },
    })
      .use(RemoteSources, {
        companionUrl: COMPANION_URL,
        sources: ["Dropbox", "GoogleDrive", "OneDrive"],
      })
      .use(XHR, {
        method: "POST",
        endpoint: "path-to-my-custom-api-where-i-store-file",
        headers: {
          Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
        },

        formData: true,
        fieldName: "psd_file",
        limit: 1,
      })
      .on("complete", (result) => {
        console.log("complete: ", result.successful);
      })
      .on("upload-error", (result) => {
        console.log("upload-error: ", result);
      })
      .on("error", (result) => {
        console.log("error: ", result);
      })
  );
2

Hi, have you set the uploadUrls Companion option?

3

Note that you can’t use XHR with your own backend and benefit from Transloadit’s hosted Companion. You use Transloadit for everything and get Companion for free, or host Companion yourself.

1 Like
4

Oooh, I guess you are right. I did not host Companion on my own backend…
So I need to implement Companion (since it is open source), to be able to upload files from file storage providers to my server? It makes sence…

5

If you want to use the remote sources you need Companion indeed. That also means developer accounts for those providers and going through the credentials process. If you use Transloadit for everything we give you temporary credentials for all providers so you can go live immediately without waiting for approval.

6

Hi everyone! I was not aware of a self hosted Companion is needed in order to use XHR with a personal backend. Does this also apply to AwsS3 uploader? I mean, can I use Transloadit hosted Companion together with AwsS3 uploader instead of uploading files using Transloadit services? or Do I also need a self hosted Companion in this case?

Thanks in advance!!

7

You don’t need Companion for any of the uploaders. You only need it for remote sources, such as Google Drive.

8

Yeah, I understand that part. What I want is to upload files from remote sources (mainly Google Drive, Dropbox and OneDrive) directly to S3 using the AwsS3 uploader, I mean without using Transloadit Service like a template. I’m not sure if I can use the Transloadit hosted Companion in this situation. From what you said before I don’t think so, right? It’s similar to XHR, I need to host my own Companion despite the fact I’m using the AwsS3 uploader, right?

Thanks again!!