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.