Does anyone have experience getting the Dropbox node package to work? I have installed it, but I cannot get it started from my code. I must be making a syntactical error. Could someone just list the steps, maybe with code snippets, for getting it up and running?
The Wix documentation is not specific to Dropbox, and the Dropbox documentation it is not specifically for the Wix environment, and I don’t know exactly what to put in my code (both backend and page).
bill have you checked out this document:
You can only access the package using backend code so you will need a backend function to call and import into your page. Then you will need to get an app token and follow the dropbox config and use instructions.
The important code you need to access the dropbox library, after you have installed it as a backend node_module is this (note you need to use fetch per the dropbox instructions):
import dropbox from 'dropbox';
import {fetch} from 'wix-fetch';
export function listDropboxFiles() {
// Get a Dropbox class
let Dropbox = dropbox.Dropbox;
// Get a dropbox object
let dbx = new Dropbox({ accessToken: 'YOUR_ACCESS_TOKEN_HERE', fetch: fetch });
// Execute the dropbox command
return dbx.filesListFolder({path: ''});
}
Here is a snippet from the gitHub for the library. Make sure you read it well 
You may need to ask Wix to install the isomorphic-fetch library. When I tried to use the wix-fetch it didn’t want to work.
This library depends on the Promise global which requires a polyfill (es6-promise) for unsupported browsers. It also requires that fetch be passed into the constructor; we advise using the isormophic-fetch library which supports fetch within both environments.
For a quick overview the below example will install the package and use it as a CommonJS module. For more alternative loading options please view our Getting started tutorial.
Stephen, Thanks for the quick reply! A couple of questions:
Bill
Not sure why the link pasted the way it did. Here it is again!
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager#using-an-installed-package241
backend is for backend code. public can be accessed from backend or browser. So the npm module needs to be in the backend so it runs on the server.
Any code you call from the backend in your browser must be a web module. These have the extension jsw.
Cheers
Stephen, following your sample above, I have gotten my backend (hooray for progress!) to work and successfully pass a function to my frontend page (by adding the multiply example from https://support.wix.com/en/article/corvid-calling-server-side-code-from-the-front-end-with-web-modules to my backend file ‘dropbox.jsw’).
Dropbox still does not work, however. So, I opened a ticket with Wix support to get them to install the isomorphic-fetch library, as you suggested. They have refused to help on the basis that they do not support code. I answered their response and asked again, and I copied your email, so maybe you would see what is happening.
Here is my frontend code. This does successfully use the imported ‘multiply’ function and print ‘20’ (4x5) to the console. Shouldn’t it also print the Dropbox file list? Any further help would be highly appreciated!
import wixData from 'wix-data';
import {multiply} from 'backend/dropbox';
import {listDropboxFiles} from 'backend/dropbox';
$w.onReady(function () {
multiply(4,5).then(product => {
console.log(product);
// Logs: 20
})
.catch(error => {
console.log(error);
});
console.log(listDropboxFiles());
});
Cheers,
Bill
@bill Hi Bill: Yes you don’t get the npm modules installed by Support there is a link in the Editor that you use. If you go through the same process as you did to install dropBox in the Editor you will see a link to request additional npm modules.
This link shows you where check out “ Requesting a Package ”
Hi Bill,
I’m not sure if you’re still looking to get listDropboxFiles to work, but I managed to get an implementation to work on my site (still trying to figure out how to get uploads to work though). To do so, I needed to use async functions and await as follows:
Back-end file:
import dropbox from 'dropbox';
import { fetch } from 'wix-fetch';
const access = 'ACCESS_TOKEN'
export function listDropboxFiles(subfolder) {
let Dropbox = dropbox.Dropbox;
let dbx = new Dropbox({ accessToken: access, fetch: fetch });
return new Promise(function (resolve, reject) {
resolve(
dbx.filesListFolder({ path: basepath + subfolder })
.then((response) => {
return response;
})
.catch((error) => {
return error;
})
);
});
}
Front-end file:
import { listDropboxFiles } from 'backend/dropbox';
$w.onReady(() => {
listFiles('EXAMPLE_FOLDER');
});
async function listFiles(subfolder) {
let response = await listDropboxFiles(subfolder);
displayFiles(response.entries);
}
function displayFiles(files) {
for (var i = 0; i < files.length; i++) {
console.log(files[i].name);
}
}
Notice how listDropboxFiles doesn’t return something that is directly printable - you need to write your own function for it. I hope that helps!
Hey all,
I was wondering if there’s any guidance on the “fetch” part of this process, as it’s confusing me.
Thanks, Tanush
Hi Tanush,
Have you read this article? https://support.wix.com/en/article/corvid-accessing-third-party-services-with-the-fetch-api
It’s a good place to start. If you still have questions, I’d suggest you create a new post with more details about what you need help with, including your code.
Thanks!