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

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

 

Welcome folks today in this blog post we will be uploading files to dropbox using file chooser api of dropox inside react.js application.

 

 

 

 

 

Get Started

 

In order to get started we need to install a dependency which is listed below.

 

npm i react-dropox-chooser

 

Install this dependency inside your react.js project.

 

 

 

 

 

 

As you can see on your screen A upload or choose file button is there as soon as you click that button then file chooser for dropbox will open and then you can either upload or choose files from your dropbox to display in your application. So to get started you need to build a app inside your dropbox console. Go to Dropbox Developers Account and create a new App like this

 

 

 

 

 

 

 

Now just copy paste your app_key for your app and store it somewhere else we will need it inside your application.

See also  React.js Koa.js Redux Arithmetic Calculator Using Javascript Deployed to Surge.sh Full Project For Beginners

 

 

 

 

 

Now create the simple app.js inside your react app 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>
  );
}

 

 

 

It’s a simple functional components where first of all we are storing the app key and then we are using this library to upload and choose files from the dropbox.

 

 

Leave a Reply