Child Item

How to upload multiple files using JavaScript SDK?

Hi, I am using Javascript SDK to upload multiple files at once. I have a dropbox business account enabled and the folder where I am trying to upload the files is a shared folder.

I want to upload the files to

root > Clients > Somefolder

Clients and Somefolder are the folders created by me.

Here's my code:

const uploadClientData = async (req, res) => {
	try {
		const files = req.files
		const { dbxUser } = req;
		const args = {
			contents: files,
			path: '/Clients/Wise',
			mode: 'add',
			autorename: true,
			mute: false,
			strict_conflict: false
		}
		await dbxUser.filesUpload(args);

		res.status(200).json({message: "Uploaded"});
	} catch (error) {
		console.log(error)
		res.status(500).json({
			error: error
        });
	}
}

And here my dropbox Initialization

module.exports = async (req, res, next) => {
    try {

        let dbxTeam = new DropboxTeam({ fetch: fetch });
        let access_token;

        dbxTeam.setClientId("XXXXXXXXXX");
        dbxTeam.setClientSecret("XXXXXXXXXX");

        if(req.body.code){
            access_token = await dbxTeam.getAccessTokenFromCode('http://localhost:3000/authentication', req.body.code);
        } else {
            let team_member_id = req.userData.team_member_id
            access_token = await helpers.getAdminDetails({team_member_id}, "access_token")
            access_token = access_token[0].access_token;
        }

        dbxTeam.setAccessToken(access_token);
        let { admin_profile } = await dbxTeam.teamTokenGetAuthenticatedAdmin()

        let dbxUser = new Dropbox({
            accessToken: access_token, 
            selectUser: admin_profile.team_member_id, 
            pathRoot: JSON.stringify({".tag": "root", "root": "5619027360"}) 
        })

        req.dbxTeam = dbxTeam,
        req.dbxUser = dbxUser
        next();
    } catch (error) {
        return res.status(500).json({
            message: 'Dropbox Init failed',
            error: error
        });
    }
};

Find more posts tagged with

API

Abuse

Accepted answers

Greg-DB

I see, thanks for clarifying. The Dropbox API doesn't offer a way to upload multiple files in one call, but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.

That being the case, you will need to loop through your files and call filesUpload once per file. Apologies I don't have better news for you!

All comments

Greg-DB

The filesUpload method is the right way to upload multiple files, by calling it once per file.

Can you elaborate on what exactly isn't working for you so we can provide some more specific guidance? For instance, is some part of your code giving you an unexpected error? Please share any error or unexpected output you're getting.

zainulabd786

const args = {
	contents: files,
	path: '/Clients/Wise',
	mode: 'add',
	autorename: true,
	mute: false,
	strict_conflict: false
}
await dbxUser.filesUpload(args);

Here the 'files' parameter that I just passed is an array of multiple files.

So my question is, Do I need to loop through the files array and upload files one by one. Because this code doesn't work this way. but if I change the above code to :

const args = {
	contents: files[0].buffer,
	path: '/Clients/Wise',
	mode: 'add',
	autorename: true,
	mute: false,
	strict_conflict: false
}

This works perfectly. But I don't want to loop through the array. Can't I pass the array to the contents parameter

Greg-DB

That being the case, you will need to loop through your files and call filesUpload once per file. Apologies I don't have better news for you!

zainulabd786

There was a similar question already asked in the Forum at the beginning of 2015. So you replied there the same. Since it has been four years, So I was just wondering if something got updated in the API in these four years. I was trying to reply to that question but couldn't able to do so, nothing happened when I clicked on 'Reply' Button. So I asked another question.

Anyways, Thank you so much for the clarification. let me know when this feature is available.

zainulabd786

I am having a problem when I am trying to Loop through the files array. Here's my code

const files = req.files
const clientFolder = req.client_folder
const { dbxUser } = req;
const promises = []
for(const file of files){
	let args = {
		contents: file.buffer,
		path: `${clientFolder}/${file.originalname}`,
		mode: 'add',
		autorename: true,
		mute: false,
		strict_conflict: false
	}
	promises.push(dbxUser.filesUpload(args))
}
Promise.all(promises).then(i => {
	console.log(i)
	res.status(200).json({message: "Uploaded", status: i});
})

dbxUser.filesUpload(args) is an asynchronous function. So I am wondering How can I use this inside the loop.

In my above code I am expecting the function to store the promises in the array, But the promises array is blank in this case

zainulabd786

Sorry! it was a typo in my react application because of which files were empty. The issue got resolved.

zainulabd786

I have around 70 files that I am looping through to upload each file using 'filesUpload()'. The problem is this update a few files and then throw the error 429 with a message "too_many_write_operations/."

Here is my code:

const promises = []
for(const file of files){
	const appDir = path.dirname(require.main.filename);
	const f = `${appDir}\\${file.path.replace("/", "\\")}`;
	let args = {
		contents: f,
		path: `${clientFolder}/${file.originalname}`,
		mode: 'add',
		autorename: true,
		mute: false,
		strict_conflict: false
	}
	promises.push(dbxUser.filesUpload(args))
}
		const uploadedData = await Promise.all(promises);

TaylorKrusen

The 429 error that you are getting is due to lock contention. Basically, Promise.all() triggers all requests at the same time and waits for them to resolve before continuing. In this case, all the simultaneous requests are causing lock contention.

There are two possible solutions:

1. Execute your requests serially. This may make your script take a little longer, but is probably easier to implement since you've already made so much progress.

2. Make use of "upload sessions" which is a different endpoint. Take a look at the data ingress guide for a good explanation. As an added bonus, that guide includes a more detailed explanation of lock contention.

zainulabd786

Okay! regarding your second point, According to documentation, "upload sessions" are meant for the files > 150MB, But in my case, The number of files is large but the size of each file is < 150MB.

Greg-DB

Upload sessions in general are meant for larger files, but you can also use them for smaller files. That makes sense in particular when you have many files to upload at the same time, because the /2/files/upload_session/finish_batch allows you to commit multiple files at once, without causing lock contention between them. You can find more information on that under "Batch Upload" in the data ingress guide Taylor linked to.

MatthieuWdi

Hello guys,

I searched for a long time and found a way to make it esaylly so I hope my cade can help you.

const PHOTO_SAVE_FOLDER = 'C:/Users/matth/Desktop/'

/**
* eventName : foler name where are my files to upload on my computer
* folder : dropbox folder name i when to save my files
*/
 const uploadPhotosOnDropbox = async (eventName,folder) => {
  const errors = [];
  const photosInMyComputer = `${PHOTO_SAVE_FOLDER}${eventName}/${folder}/`
  let photosToUplaod = fs.readdirSync(photosInMyComputer);
  let folderPath = `/Events/${eventName}/${folder}`; // path for dropbox

  // create the folder in dbx,  around with try/catch
  await dbx.filesCreateFolderV2({ path : folderPath, autorename:false}); 

  photosToUplaod.map((photo, idx) =>{
      fs.readFile(`${photosInTheBorne}${photo}`, (err, data) => {
        setTimeout(()=> {
        let path = `/Events/${eventName}/${folder}/${photo}`;
        const contents = data;
        dbx.filesUpload({ path, contents })
      },idx * 2000);
    });
  });

uploadPhotosOnDropbox('09-08-22-MATT', 'persoFolder');