"invalid destination url" Google Drive + Companion with React/Node

Uppy
1

Hello,

First, thank you for your free product! I’m about 95% done with hooking this up and it’s failing for me on uploading the file from google drive to my local disk. Loading drive and selecting files/folders is working OK.

Here’s my react component:

import React from "react";
import Uppy from "@uppy/core";
import XHRUpload from "@uppy/xhr-upload";
import GoogleDrive from "@uppy/google-drive";
import { Button } from "semantic-ui-react";
import { DashboardModal } from "@uppy/react";

class UploadButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false,
    };

    this.uppy = new Uppy()
      .use(XHRUpload, {
        endpoint: "/api/upload",
        fieldName: "my_file",
      })
      .use(GoogleDrive, {
        companionUrl: "http://localhost:5000",
      });

    this.uppy.on("file-added", (file) => {
      console.log(file);
      this.props.setFilesFromUppy("add", file);
    });
    this.uppy.on("file-removed", (file, reason) => {
      console.log("Removed file", file);
      this.props.setFilesFromUppy("remove", file);
    });

    this.uppy.on("upload", (data) => {
      console.log(data);
    });

    this.uppy.on("complete", (result) => {
      setTimeout(() => this.setState({ modalOpen: false }), 1000);
    });
  }

  componentWillUnmount() {
    this.uppy.close();
  }

  handleOpen = () => {
    this.setState({
      modalOpen: true,
    });
  };

  handleClose = () => {
    this.setState({
      modalOpen: false,
    });
  };

  render() {
    return (
      <div>
        <Button onClick={this.handleOpen}>Upload File</Button>
        <DashboardModal
          uppy={this.uppy}
          closeModalOnClickOutside
          open={this.state.modalOpen}
          onRequestClose={this.handleClose}
          plugins={["GoogleDrive"]}
        />
      </div>
    );
  }
}
export default UploadButton;

Here’s my index.js on the node server.

const express = require("express");
const mainConfig = require("./config/main-config");
const routeConfig = require("./config/route-config.js");
const keys = require("./config/keys/keys");
var companion = require("@uppy/companion");
const app = express();
const options = {
  providerOptions: {
    drive: {
      key: keys.googleClientID,
      secret: keys.googleClientSecret,
    },
  },
  server: {
    host: "localhost:5000",
    protocol: "http",
  },
  filePath: "./uploads",
  secret: keys.cookieKey,
  debug: true,
};
//main setup
mainConfig.init(app, express);

//route setup
routeConfig.init(app);

//express to behave in production
if (process.env.NODE_ENV === "production") {
  //Express will serve up production assets
  //like our main.js file, or main.css file!
  app.use(express.static("client/build"));

  //Express will serve up index.html file if it doesn't
  //recognize the route
  const path = require("path");
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

const PORT = process.env.PORT || 5000;
app.listen(PORT);
app.use(companion.app(options));

Other notes

I’m seeing that it errors when trying to POST to http://localhost:5000/drive/get/<GOOGLE_FILE_ID> and the response is {“message”:“invalid destination url”}.

Additionally, the logs show:

[0] companion: 2020-09-03T13:36:24.345Z [info] companion.client.version uppy client version 1.0.0
[0] companion: 2020-09-03T13:36:24.636Z [debug]  Instantiating uploader.
[0] companion: 2020-09-03T13:36:24.636Z [debug] uploader.validator.fail invalid destination url
[0] POST /drive/get/<GOOGLE_FILE_ID> 400 291.555 ms - 37

Anything I’m missing that’s obvious?

Thanks in advance,
Matt

2

Maybe it’s an error with the URL you’re passing to XHRUpload? I’m not fully sure how it handles relative paths. Could you try giving it an absolute path instead?

Other than that, it seems that everything should be setup correctly; I’ll look a little further into it and see how well XHRUpload supports relative paths

- Andrew

3

Sorry, meant to reply to this much earlier. I tried changing the URL to XHRUpload but it didn’t work. Ended up having to create my own google drive implementation which was a pain in the ass :slight_smile: