Dropbox for JavaScript Developers

Upload a file in dropbox and generate a shareable link in javascript.

Dropbox is a file hosting service that lets anyone upload and transfer files to the cloud, and share them with anyone.

Today we will learn how to use dropbox to upload a file and generate its shareable link in javascript.

Dropbox

Configure Dropbox settings

1. First of all, you have to create an account on dropbox.
2. After successfully sign in, go to the developer version and click App console.
3. Now click on Create app to start the application. You may ask for email verification. if it does please verify.
4. Go ahead with the steps you need or you can follow the blow settings.

create dropbox settings

5. Then you will get your application settings. scroll down and you will find Generated access token. click and generate your token. you can change the access token expiration time through the settings.

6. Now click on the permission tab and confirm that Files and folders and Collaboration all options are in checked condition.

This is the process of settings of dropbox for upload and share. if you want to go for production, you have to manage to set some extra features in settings.

Implementing in Javascript

1. First of all, install Javascript SDK from NPM or CDN.

npm install --save dropbox
or
<script src="https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js">

2. Initialize dropbox

let dbx = new Dropbox({ accessToken: 'YOUR_ACCESS_TOKEN_HERE' });

3. Upload your file in dropbox.

//inside async function
await dbx.filesUpload({path: `/${name}.fileFormat`,contents: blob,});
or
dbx.filesUpload({path: `/${name}.fileFormat`,contents: blob,})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

4. Generate a shareable link.

//inside async 
const response = await dbx.sharingCreateSharedLinkWithSettings({path: `/${name}.fileFormat`,settings: {access: “viewer”,audience: “public”,requested_visibility: “public”,},});
// response.result.url
or
dbx.sharingCreateSharedLinkWithSettings({path: `/${name}.fileFormat`,settings: {access: “viewer”,audience: “public”,requested_visibility: “public”,},})
 .then(function(response) {
    console.log(response.result.url);
  })
 .catch(function(error) {
    console.log(error);
  });

If you are interested you can check more Javascript examples or you can play with the Dropbox API.