Revision history [back]

To preview the original file in the React Dropzone component, you can use the "preview" property of the "FileObject" object that is returned by the "onDrop" callback function. Here's an example:

import React, { useState } from "react";
import Dropzone from "react-dropzone";

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

  const onDrop = (acceptedFiles) => {
    setFiles(
      acceptedFiles.map((file) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      )
    );
  };

  return (
    <Dropzone onDrop={onDrop}>
      {({ getRootProps, getInputProps }) => (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>Drag and drop some files here, or click to select files</p>
          <div>
            {files.map((file) => (
              <div key={file.name}>
                <div>{file.name}</div>
                <img src={file.preview} alt="file preview" />
              </div>
            ))}
          </div>
        </div>
      )}
    </Dropzone>
  );
}

export default App;

In this example, when a file is dropped or selected, we use the "Object.assign" method to add a "preview" property to the file object, with the value of the URL created by the "URL.createObjectURL" function. Then, we use this "preview" property to display a preview of the file in an "img" tag.