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

**URL:** https://community.transloadit.com/t/invalid-destination-url-google-drive-companion-with-react-node/15433
**Category:** Uppy
**Created:** [September 3, 2020, 1:39pm UTC](https://community.transloadit.com/t/invalid-destination-url-google-drive-companion-with-react-node/15433 "2020-09-03T13:39:03Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![mouten57](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/mouten57/32/279_2.png) [@mouten57](https://community.transloadit.com/u/mouten57)
#### Post date: [September 3, 2020, 1:39pm UTC](https://community.transloadit.com/t/invalid-destination-url-google-drive-companion-with-react-node/15433/1 "2020-09-03T13:39:03Z")

</div>

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:

```auto
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.

```auto
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/](http://localhost:5000/drive/get/)\<GOOGLE\_FILE\_ID\> and the response is {“message”:“invalid destination url”}.

Additionally, the logs show:

```auto
[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

---

<div class="post-metadata">

### Author: ![ajkachnic](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/ajkachnic/32/260_2.png) [@ajkachnic](https://community.transloadit.com/u/ajkachnic)
#### Post date: [September 4, 2020, 12:54pm UTC](https://community.transloadit.com/t/invalid-destination-url-google-drive-companion-with-react-node/15433/2 "2020-09-04T12:54:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mouten57](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/mouten57/32/279_2.png) [@mouten57](https://community.transloadit.com/u/mouten57)
#### Post date: [September 11, 2020, 2:50pm UTC](https://community.transloadit.com/t/invalid-destination-url-google-drive-companion-with-react-node/15433/3 "2020-09-11T14:50:25Z")

</div>

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 🙂