DBX JS SDK via Access Token not working for multiple users

[lightsage88]

Hello,

I am trying to use the implementation discussed here so that anyone with the Access Token can upload files, etc. However, my team mates can not successfully upload files. Dropbox is being used as part of a Node backend and I want team mates, clients to be able to use just one access token so it's not too complicated.  Can you please help?

[Greg-DB]

Can you elaborate on what you mean when you say they "can not successfully upload files"? Please show the rest of the relevant code you have implemented and whatever error/unexpected output you're getting.

[lightsage88]

Sure!

So I'm building a widget using Kendo for VUE/jQuery ((they are rather interchangeable between their many flavors)). This front-end component serves as a way for a user to access a particular drop box folder in my console-drop box-app. This is facilitated by a NodeJS back-end, which I've published some of the code for below.

class DropboxWidgetsService extends BaseService {
    constructor(stash, log) {
        super(stash, log);
        this.dbx = new Dropbox({ accessToken: process.env.DROPBOX_ACCESS_TOKEN });
    }
​
        async getDropboxFolderFiles(code, step) {
        try {
            let data = await this.dbx.filesListFolder(
                {
                    'path': `/magic-location/${code}/${step}`,
                    'recursive': true
                }
            );
            return data.result.entries.filter(el => el['.tag'] === 'file');
        } catch (error) {
            this.log.debug(error);
        }
    }

      async createDropboxWidgets(req, res) {
        try {
            let fileSaveLocation = __dirname.slice(0, __dirname.indexOf('services')) + 'temp';
            let magicalProjectCode = req.query.magicalProjectCode;
            let magicalProjectStep = req.query.magicalProjectStep.toUpperCase();
            console.log('projectStep', magicalProjectStep);
            let file = req.files[0];
            //TODO: We will want to include file type limiters based on the project step.
            let originalName = file.originalname;
            let buffer = file.buffer;
            let location = fileSaveLocation + '\\' + `${originalName}`;
            await fs.writeFile(location, buffer, async (err) => {
                if (err) {
                    this.log.debug(err);
                    return;
                }
                let response = await this.dbx.filesUpload({
                    path: `/Hogwarts/${magicalProjectCode}/${magicalProjectStep}/${file.originalname}`,
                    contents: fs.createReadStream(location)
                });
                await fs.unlink(location, (err) => {
                    if (err) {
                        console.error(err);
                        return;
                    }
                });
                res.json({status: response.status, path: response.result.path_lower});
            });
            
        } catch (error) {
            this.log.debug(error);
        }
    }
}

The latter method in the class doesn't work for anyone but me. I've shared my access token, app key and app secret. To my understanding, theoretically it should work, but my colleague (who has the same env variables as I do) just gets pending in their Network tab.

[Greg-DB]

Thanks! So, if I understand correctly, it's the 'filesUpload' call that doesn't complete? For comparison, does the 'filesListFolder' call work successfully?

If so, how large is the file that they're trying to upload and how long are they waiting? If they're accidentally trying to upload a much larger file than intended, it may just be taking some time. Otherwise, if the call is actually not working, I would expect it to eventually timeout with some error.

Additionally, a bit more context on where/how this is running may be helpful. I understand this is running in a NodeJS back-end, but is that actually running on a server somewhere, the same for each of you, or are each of you running the code separately, e.g., on each of your own computers?

For reference, the 'filesUpload' method would make a connection to /2/files/upload on content.dropboxapi.com, whereas the 'filesListFolder' method would make a connection to /2/files/list_folder on api.dropboxapi.com. Might there be anything, such as a proxy, firewall, anti-virus, or other such software that may be interfering with the connection to content.dropboxapi.com?

(By the way, while it shouldn't cause a technical issue like this, access tokens aren't really meant to be shared. Each user is only supposed to have access to their own access token(s).)

[lightsage88]

The files are small, images (jpgs, pngs), and pdfs, etc.

We are both running the back-end and front-end of our applications on individual machines. I'm aware that sharing the key maybe isn't "preferred" but I don't see how sharing one key in .env variables between two or three groups is a big deal. I'm less able to see why we can't use our credentials to the same effect. Only I can have the full access I'd like and it's frustrating.

[Greg-DB]

From a technical perspective, it should certainly be possible to use the same access token in multiple places like this.

So, to help narrow this down, can you confirm it's the 'filesUpload' call in particular that doesn't complete? Does the 'filesListFolder' call work or not?

Since the code is running in each individual machine, I suspect there's some environmental issue interfering with the connections. Can your team mates check if something on their machines is causing this, such as a proxy, firewall, anti-virus, or other such software?