How to download file from dropbox with Vue/Javascript

[haso94]

Hi,

I have a vue application where I want to download files in a specific folder. But when I call the method to do it I am getting the following error:

TypeError: Dropbox.Dropbox is not a constructor

I am using the latest version of the following package: 

"dropbox": "^10.10.0",

Can someone help me please?

This is my code hope someone can help me Identify the mistake:

getImages() {
  require("isomorphic-fetch");
  const Dropbox = require("dropbox").Dropbox;
  const dbx = new Dropbox.Dropbox({
    accessToken: '<REDACTED>', fetch
  });
  dbx.filesDownload({
  path: "/test"
  }).then(function(response){
    console.log(response)
  })
}

Update:

If I change the version to 4.0.30 and use new Dropbox instead of Dropbox.Dropbox I am getting the following error:

"missing_scope", required_scope: "files.content.read"} But I have given this permission in my app. If I use the Dropbox.Dropbox in this version I am still getting the is not a constructor error even though it states that it works in another post here.

[Greg-DB]

To use the 'Dropbox' constructor, that should be 'new Dropbox' instead of 'new Dropbox.Dropbox'.

By the way, I redacted it from your post, but note that access tokens enable access to Dropbox accounts, so for the sake of security, you should never share access tokens like this. Since this access token has been shared here, you should disable this access token. You can do so by revoking access to the app entirely, if the access token is for your account, here:

https://www.dropbox.com/account/connected_apps

Or, you can disable just this access token using the API:

https://www.dropbox.com/developers/documentation/http/documentation#auth-token-revoke

That's authTokenRevoke in the JavaScript SDK:

https://dropbox.github.io/dropbox-sdk-js/Dropbox.html#authTokenRevoke__anchor

Note that doing so will cause any further API calls made using this access token to fail. This cannot be undone, and you would need to get a new access token to replace this one.

[Greg-DB]

A 'missing_scope' error indicates that while the app is permitted to use that scope, the particular access token you're using to make the API call does not have that scope granted. Also, be aware that just adding a scope to your app via the App Console does not retroactively grant that scope to existing access tokens. That being the case, to make any API calls that require that scope, you'll need to get a new access token with that scope.

[haso94]

Thanks for the answer for both questions. And thanks for changing my auth key. Now I am getting a 409 error. It says my path is malformed. What I want to do is to download all images inside the following path:

path: "/test/"

test is a folder inside my dropbox I want to download all images inside it. The code is the same like in the original post with the exception of the path.

[Greg-DB]

The path value should not end with a "/". For example, if the file is named "test" and is in the root, the path should be "/test". Or as another example, if the name of the file is "test.jpg" and it is inside a folder named "folder", then the path would be "/folder/test.jpg".

I recommend reading the File Access Guide for more information.

[haso94]

Ok I understand that but is there no way to download all images inside one folder in dropbox?

[Greg-DB · Accepted solution]

The filesDownload method downloads a single file. If you want to download multiple files, such as all of the files in a folder, you can iterate through them and call it for each one.

If you want to download an entire folder at once, you can use filesDownloadZip instead. Note that this will give you a zip of the folder which you will need to unzip locally.