1

I am trying to upload a file on Dropbox using the JS SDK. Here is the html code where I try to call my function :

<!DOCTYPE html>
<html>
<head>
    <script src="get_from_cin7.js"></script>
    <meta charset="utf-8" />
    <title>Dropbox JavaScript SDK</title>
    <!--<link rel="stylesheet" href="/styles.css">-->
</head>
<body>
    <form onSubmit="Dropupload()">
        <input type="file" id="file-upload" />
        <button type="submit">Submit</button>
      </form>
</body>
</html>

And here's the file where the function is defined

import { Dropbox } from 'dropbox';

const dbx = new Dropbox({
    accessToken: '<ACCESS TOKEN>', //I replaced it with my access token in the code
    fetch
});

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

Still, my function cannot be called for some reason I don't know. I get the error "ReferenceError: Dropupload is not defined" and I don't know if that has something to do with the problem but I get another error : "SyntaxError: import declarations may only appear at top level of a module".

I'm just going to test the upload so that's the whole code for now.

What exactly is the problem here ?

R-son
  • 65
  • 10
  • You've got about three different problems lined up one after the other here. See the duplicates. – Quentin Oct 21 '20 at 15:00

1 Answers1

3

You forgot type="module" in the script tag. The ES6 modules syntax won't work if you don't do that.

You also need to attach Dropupload to window, otherwise it is local to the module.

window.Dropupload = function() {
  var file = fileIput.files[0];
  ...
Guerric P
  • 30,447
  • 6
  • 48
  • 86
  • That won't solve the problem as `Dropupload` will be local to the module and not accessible in the `onsubmit` attribute – Quentin Oct 21 '20 at 14:59
  • Thanks, I don't have the second error anymore but the main problem is still here and I got a new error : "TypeError: Error resolving module specifier: dropbox" – R-son Oct 21 '20 at 15:00
  • @R-son — In `import { Dropbox } from 'dropbox';`, `dropbox` needs to be the URL to your JS file. You can't use Node.js module resolution shorthand. – Quentin Oct 21 '20 at 15:01
  • He means that 'dropbox' will resolve to the proper node_modules path in a Node.js environment. In a browser environment it needs to be an URL to the JS file. – Guerric P Oct 21 '20 at 15:07
  • Thanks Guerric. I understood, still I have no idea where to find that url but I'll try to find it by myself – R-son Oct 21 '20 at 15:11
  • The tutorial you read was probably on Node.js, in a browser environment I suggest you to add a `script` tag with this `src`:https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/7.1.0/Dropbox-sdk.js then you're able to call the library with the `Dropbox` global object without importing anything in your own script – Guerric P Oct 21 '20 at 15:15
  • I just tried and it doesn't work. Navigator can't find the source and can't use Dropbox. I tried on Mozilla and Chrome and both give me errors because of that link. I wrote in the head of the html code – R-son Oct 21 '20 at 15:42
  • you forgot the protocol `https://` in the link – Guerric P Oct 21 '20 at 15:44
  • Yeah sorry. I changed it because my navigator told me to when I tested it but I got a new error. I feel like this is endless. Now I got : ```TypeError: Dropbox is not a constructor``` – R-son Oct 21 '20 at 15:53
  • I just replaced it with ```Dropbox.Dropbox```. Seems to work fine for now – R-son Oct 21 '20 at 15:55
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223443/discussion-between-r-son-and-guerric-p). – R-son Oct 22 '20 at 09:03