In this lesson, we’ll start another namespace called files, and we’ll explore some of its important endpoints. Most of this namespace’s endpoints require us to enable the files.content.write and files.content.read permissions.

In this lesson, we’ll learn about the following three endpoint operations:

create_folder_v2
upload
copy_v2

Create a new folder

The /files/create_folder_v2 endpoint creates a new folder at the path specified. It uses an HTTP POST request and Bearer authorization.

Request parameters

Let’s take a look at some of the important parameters for our request, their descriptions, and their formats in the table below:

Press + to interact

// Define import libraries here
import fetch from 'node-fetch';
// Define API key here
const token = '{{TOKEN}}'
// Define endpoint URL here
const endpointUrl = new URL('https://api.dropboxapi.com/2/files/create_folder_v2');
// Define Header Parameters here
const headerParameters = {
  'Authorization': `Bearer ${token}`,
  'Content-Type': 'application/json',
};
// Define Body Parameters here
const bodyParameters = JSON.stringify({
  path: "/home/TestFolder",
  autorename: true
});
// Set the API call options
const options = {
  method: 'POST',
  headers: headerParameters,
  body: bodyParameters,
};
// Function to make the API call
async function createFolder() {
  try {
    const response = await fetch(endpointUrl, options);
    // Custom function for printing the API response
    printResponse(response);
  } catch (error) {
    // Custom function for printing the error message
    printError(error);
  }
}
// Call function to make the API call
createFolder();

In the code above, we do the following:

Line 2: We import the fetch library that we need to use in our code from node-fetch.
Line 5: We get the value for TOKEN to use for authentication.
Line 8: We define the request URL.
Lines 11–14: We define the headers of the fetch request. It includes the authorization and the type of content, which is application/json in most cases.
Lines 17–20: We define the bodyParameters of the fetch request. These include the path of the directory where the new folder will be created and the autorename option, which specifies if that new folder can have a suffix in its name if a folder with the same name already exists.
Lines 23–27: We create a function to make the API call. It will try to get the response and will pass the response to the custom function printResponse; otherwise, it will catch the error and will pass it to the custom function printError.
Line 43: We call the function createFolder to make the API call.

Response fields

The code above will return the metadata of our new folder. This includes the name, path_display, path_lower, and id properties.

Upload a file

The /files/upload endpoint creates a file in the user’s Dropbox at the specified location with the content of the incoming file. It requires us to enable the files.content.write permission. We can upload any file within the size limit of 150 MB.

Note: When you test this endpoint on Educative’s platform, only files with a .png extension can be uploaded.

Request parameters

Let’s take a look at some of the important parameters for our request, their descriptions, and their formats in the table below.

Press + to interact

// Define import libraries here
import fetch from 'node-fetch';
import fs from 'fs';
// Define API key here
const token = '{{TOKEN}}'
// Define endpoint URL here
const endpointUrl = new URL('https://content.dropboxapi.com/2/files/upload');
// Define Header Parameters here
const headerParameters = {
  'Authorization': `Bearer ${token}`,
  'Content-Type': 'application/octet-stream',
  "Dropbox-API-Arg": "{\"path\":\"/home/TestFolder/demo.png\",\"mute\":false}"
};
//Read the Image to upload
const data =fs.readFileSync('__ed_input.png');
// Set the API call options
const options = {
  method: 'POST',
  headers: headerParameters,
  body : data
};
// Function to make the API call
async function uploadFile() {
  try {
    const response = await fetch(endpointUrl, options);
    // Custom function for printing the API response
    printResponse(response);
  } catch (error) {
    // Custom function for printing the error message
    printError(error);
  }
}
// Call function to make the API call
uploadFile();

When we click “Run,” we’ll be asked to upload an image in .png format. The image size should be 1024 x 512 px. If we add an image larger than this size, we’ll have to crop it before we can continue.

In the code above, we do the following:

Lines 2–3: We import the fetch library that we need to use in our code from node-fetch and import fs.
Line 6: We get the value for TOKEN to use for authentication.
Line 9: We define the request URL.
Lines 12–16: We define the headers of the fetch request. It includes the authorization and the type of content, which is application/octet-stream in this case.
Line 19: We read the image to upload.
Lines 22–26: We set the API call options.
Lines 29–39: We create a function to make the API call. It will try to get the response and will pass the response to the custom function printResponse otherwise it will catch the error and will pass to the custom function printError.
Line 42: We call the function uploadFile to make the API call.

Response fields

Let’s see what we get in response to the successful execution of the upload endpoint. Some of the response fields are listed in the table below:

Copy a file or a folder

The /files/copy_v2 endpoint lets us copy a file or folder to another location in Dropbox. If the specified source path is a folder, then all of its content will be copied. This endpoint requires us to enable the permission of the files.content.write.

Request parameters

Let’s see some of the parameters for this call in the table below.

Note: We’ve manually added some files to the TestFolder that we created in the previous lesson so that we may copy them to another folder.

Press + to interact

// Define import libraries here
import fetch from 'node-fetch';
// Define API key here
const token = '{{TOKEN}}'
// Define endpoint URL here
const endpointUrl = new URL('https://api.dropboxapi.com/2/files/copy_v2');
// Define Header Parameters here
const headerParameters = {
  'Authorization': `Bearer ${token}`,
  'Content-Type': 'application/json',
};
// Define Body Parameters here
const bodyParameters = JSON.stringify({
  from_path: "/home/TestFolder",
  to_path: "/home/DestFolder",
  autorename: true
});
// Set the API call options
const options = {
  method: 'POST',
  headers: headerParameters,
  body: bodyParameters,
};
// Function to make the API call
async function copyFiles() {
  try {
    const response = await fetch(endpointUrl, options);
    // Custom function for printing the API response
    printResponse(response);
  } catch (error) {
    // Custom function for printing the error message
    printError(error);
  }
}
// Call function to make the API call
copyFiles();

In the code above, we do the following:

Line 2: We import the fetch library that we need to use in our code from node-fetch.
Line 5: We get the value for TOKEN to use for authentication.
Line 8: We define the request URL.
Lines 11–14: We define the headers of the fetch request. It includes the authorization and the type of content, which is application/json in most cases.
Lines 17–21: We define the bodyParameters of the fetch request. The from_path parameter defines the source of files that we need to copy, and to_path defines the path of the destination folder of those copied files. The auto_rename parameter allows us to add a suffix to the name of files if any file is already available in the destination folder with the same name.
Lines 24–28: We set the API call options.
Lines 31–41: We create a function to make the API call. It will try to get the response and will pass the response to the custom function printResponse; otherwise, it will catch the error and will pass it to the custom function printError.
Line 44: We call the function copyFiles to make the API call.

Response fields

In response to the execution of the code above, we’ll get the .tag, name, path_lower, path_display, and id of our folder or file. Now, in our Dropbox account, we’ll see a new folder was created at the specified path and the content was copied into it.

Press + to interact

Parameter Name	Format	Required	Description
`path`	String	Yes	The path in Dropbox where this folder is created.
`autorename`	Boolean	No	If this parameter is set to `true` and the name of the folder already exists in that path, the Dropbox server will try to automatically rename the folder in order to avoid conflicts.

Response field	Format	Description
`name`	String	Name of the folder that is created.
`path_display`	String	Case-insensitive path to the folder.
`path_lower`	String	Lower-case path to the folder.
`id`	String	Folder’s unique ID.

Parameter Name	Format	Required	Description
file to upload	---	Yes	The file we want to upload will be given in the `data` object.
`path`	String	Yes	Defines where we want to upload our file. We also need to give a name to the file in the path. The uploaded file will be available with this name in our Dropbox.
`mute`	Boolean	No	Whenever changes are made to a file, the user is notified. If `mute` is set to `true`, then this functionality is disabled. Default value is `false`.

Response field	Format	Description
Boolean	No	Set to `true` to allow the Dropbox server to resolve name conflicts.
`path_display`	String	Case-insensitive path to the file.
`id`	String	File’s unique ID.
`size`	Integer	Size of the file in bytes.
`is_downloadable`	Boolean	If this is set to `true`, then the file can be downloaded directly (it’s set to `true` by default).

Parameter Name	Format	Required	Description
`from_path`	String	Yes	The path to the Dropbox folder or file that we want to copy.
`to_path`	String	Yes	Destination path to the user's Dropbox.
`autorename`	This is set to `true` to allow the Dropbox server to resolve name conflicts	No	Set to `true` to allow the Dropbox server to resolve name conflicts.

Introduction to Dropbox API

Profile Information

Directories Management

Access Management

Dropbox API Intergration in React

Conclusion

Create a Folder, Upload, and Copy Files

Create a new folder

Request parameters

Response fields

Upload a file

Request parameters

Response fields

Copy a file or a folder

Request parameters

Response fields