Search code examples
javascripthtmldropbox

Dropbox Upload Javascript : TypeError: "'fetch' called on an object that does not implement interface Window."

Another day, another error! I defined my variable file as you can see in this code :

//import { Dropbox } from 'dropbox';

const dbx = new Dropbox.Dropbox({
    accessToken: '<REDACTED>',
    fetch
});

function Dropupload() {
  var fileInput = document.getElementById('file-upload');
  var file = fileInput.files[0];
  dbx.filesUpload({path: '/' + file.name, contents: file})
  .then(function (response) {
      var results = document.getElementById('results');
      results.appendChild(document.createTextNode('File uploaded!'));
      console.log('MISSION COMPLETE');
  })
  .catch(function (error) {
      console.error(error);
      console.log('BETTER LUCK NEXT TIME');
  });
}

And I had an error saying that file was undefined, so i did this :

 var file = fileInput; //instead of "var file = fileInput.files[0]; in the previous code"

And now I have a new error : TypeError: "'fetch' called on an object that does not implement interface Window." **uploadRequest** dropbox.js:167

I don't even know what that error means. I'm totally lost even though I did some research. I tried different solutions from other people on the internet but none have worked for me...

Here's the HTML by the way :

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/7.1.0/Dropbox-sdk.js"></script>
    <script src="get_from_cin7.js"></script>
    <!--<script src="Dropupload.js"></script>-->
    <meta charset="utf-8" />
    <title>Dropbox JavaScript SDK</title>
    <!--<link rel="stylesheet" href="/styles.css">-->
</head>
<body>
    <form onSubmit="return Dropupload()">
        <input type="text" id="access-token" placeholder="Access token" />
        <input type="file" id="file-upload" />
        <button type="submit">Submit</button>
    </form>
    <script type = "text/javascript">Dropupload()</script>
</body>
</html>
Solution

  • I want to thank Greg for this solution, I'm just posting it as an awnser so everyone who has the same problem can resolve it (All the credits go to Greg : https://stackoverflow.com/users/1305693/greg)

    "As for the fetch issue itself, note that you don't need to pass that in. See here for more information: github.com/dropbox/dropbox-sdk-js/blob/master/… . The easiest fix for that is to just remove that fetch parameter from your Dropbox.Dropbox constructor. – Greg"

    Thank you Greg for your awnser, I would've probably wasted a lot of time without you.