Build a React Dropbox File Chooser API to Upload Download & Display Files in Browser Using JS

App.jsx

import React, { useState } from "react";
import DropboxChooser from "react-dropbox-chooser";
import { Container, Row, Col, Card, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const DROPBOX_APP_KEY = "";

function App() {
  const [files, setFiles] = useState([]);

  const onSuccess = (selectedFiles) => {
    setFiles(selectedFiles);
  };

  const onCancel = () => {
    console.log("User canceled the operation.");
  };

  const handleDownload = (link, name) => {
    const anchor = document.createElement("a");
    anchor.href = link;
    anchor.download = name;
    anchor.click();
  };

  return (
    <div>
      <h1 className="text-center my-4">Dropbox File Selector</h1>
      <div className="text-center">
        <DropboxChooser
          appKey={DROPBOX_APP_KEY}
          success={onSuccess}
          cancel={onCancel}
          multiselect={true}
        >
          <Button variant="primary">Select Files</Button>
        </DropboxChooser>
      </div>
      <Container className="my-5">
        <Row>
          {files.map((file, index) => (
            <Col key={index} md={4} className="mb-4">
              <Card>
                {/* Preview Section */}
                {file.link && (
                  <Card.Img
                    variant="top"
                    src={
                      file.thumbnailLink || file.link
                    } /* Use thumbnail if available */
                    alt={file.name}
                    style={{
                      height: "200px",
                      objectFit: "cover",
                      borderBottom: "1px solid #ddd",
                    }}
                  />
                )}
                <Card.Body>
                  <Card.Title>{file.name}</Card.Title>
                  <Card.Text>
                    <strong>Size:</strong> {(file.bytes / 1024).toFixed(2)} KB
                  </Card.Text>
                  <Button
                    variant="success"
                    onClick={() => handleDownload(file.link, file.name)}
                  >
                    Download
                  </Button>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      </Container>
    </div>
  );
}

export default App;

import React, { useState } from "react";

import DropboxChooser from "react-dropbox-chooser";

import { Container, Row, Col, Card, Button } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

const DROPBOX_APP_KEY = "";

function App() {

const [files, setFiles] = useState([]);

const onSuccess = (selectedFiles) => {

setFiles(selectedFiles);

};

const onCancel = () => {

console.log("User canceled the operation.");

};

const handleDownload = (link, name) => {

const anchor = document.createElement("a");

anchor.href = link;

anchor.download = name;

anchor.click();

};

return (

<div>

<h1 className="text-center my-4">Dropbox File Selector</h1>

<DropboxChooser

appKey={DROPBOX_APP_KEY}

success={onSuccess}

cancel={onCancel}

multiselect={true}

<Button variant="primary">Select Files</Button>

</DropboxChooser>

</div>

<Row>

{files.map((file, index) => (

<Card>

{/* Preview Section */}

{file.link && (

<Card.Img

variant="top"

src={

file.thumbnailLink || file.link

} /* Use thumbnail if available */

alt={file.name}

style={{

height: "200px",

objectFit: "cover",

borderBottom: "1px solid #ddd",

}}

)}

<Card.Body>

<Card.Title>{file.name}</Card.Title>

<Card.Text>

<strong>Size:</strong> {(file.bytes / 1024).toFixed(2)} KB

</Card.Text>

<Button

variant="success"

onClick={() => handleDownload(file.link, file.name)}

Download

</Button>

</Card.Body>

</Card>

</Col>

))}

</Row>

</Container>

</div>

);

}

export default App;

Build a React Dropbox File Chooser API to Upload Download & Display Files in Browser Using JS

Comments

Leave a Reply Cancel reply

Archives