React.js Dropbox File Upload Using Dropbox File Chooser API and react-dropbox-chooser Library

Welcome folks today in this blog post we will be uploading files to dropbox in react.js using dropbox file chooser api and react-dropbox-chooser library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command as shown below

npx create-react-app sampleproject

cd sampleproject

And now you need to install the below libraries using the below command as shown below

npm i react-dropbox-chooser

npm i prop-types

And after that you need to go to dropbox developer website and get your app key credentials as shown below

And now basically you need to copy paste your App key and now you need to add your domain inside the domains section of the dropbox app as shown below

And after that we just need to make the App.js file and copy paste the following code

import React, { useState } from "react";
import "./styles.css";
import DropboxChooser from 'react-dropbox-chooser'

const APP_KEY="4r6uo01trb8misy"

export default function App() {
  const [url,setUrl] = useState("")
  function handleSuccess(files){
    setUrl(files[0].thumbnailLink)
    console.log(url)
  }
  return (
    <div className="App">
      <h1 style={{textAlign:"center"}}>Upload Or Choose Files to DropBox</h1>
      <br/><br/>
    <div className="container">
      <DropboxChooser appKey={APP_KEY}
                      success={handleSuccess}
                      cancel={() => console.log('closed')}
                      multiselect={true}
                      >
        <button>Upload or Choose Files</button>
        <div className="dropbox"></div>
        <br/><br/>
        <img src={url} width="200" height="200" alt=""/>
      </DropboxChooser>
    
    </div>
    </div>
  );
}

import React, { useState } from "react";

import "./styles.css";

import DropboxChooser from 'react-dropbox-chooser'

const APP_KEY="4r6uo01trb8misy"

export default function App() {

const [url,setUrl] = useState("")

function handleSuccess(files){

setUrl(files[0].thumbnailLink)

console.log(url)

}

return (

<h1 style={{textAlign:"center"}}>Upload Or Choose Files to DropBox</h1>

<DropboxChooser appKey={APP_KEY}

success={handleSuccess}

cancel={() => console.log('closed')}

multiselect={true}

<button>Upload or Choose Files</button>

</DropboxChooser>

</div>

);

}

As you can see in the above code you need to replace your own dropbox app key and then basically we are importing the dropbox file chooser api library and then we have the button if we click it then the dropbox filechooser will be shown where the user can select the files or upload the files to dropbox as shown below