How to preview an image using react-dropzone

Question

I want the user to "upload" a file from their computer, store it in the browser (I guess) and display the image, without sending it to a server. Basically, I want this to happen (example on the website): https://www.javascripture.com/FileReader

This works by itself, but I am using react-dropzone and it's not working.

My code:

import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import styles from "./dropzone.module.css";
import ImageZone from "../imagezone";

export default function Dropzone() {
  const [path, setPath] = useState("");
  const openFile = () => {
    const reader = new FileReader();
    reader.onload = () => {
      const dataURL = reader.result;
      setPath(dataURL);
    };
  };
  const onDrop = useCallback(acceptedFiles => {
    openFile();
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div className={styles.mycontainer}>
      <div className={styles.dropzone} {...getRootProps()}>
        <input {...getInputProps()} />
        {isDragActive ? (
          <p>Drop the files here ...</p>
        ) : (
          <p>Drag 'n' drop some files here, or click to select files</p>
        )}
      </div>
      <ImageZone src={path}></ImageZone>
    </div>
  );
}

I don't really know, that's probably not what I even want. I just want the user to see the picture they uploaded without it being sent to a server. Just in the browser. — Filip
– Filip, Commented Oct 24, 2019 at 14:45
In your openFile function you're creating a file reader and setting what it does when it's finished reading... but where are you actually giving it the file to read and calling the function to begin reading? — IceMetalPunk
– IceMetalPunk, Commented Oct 24, 2019 at 14:47

tomfa · Accepted Answer · 2021-12-21 09:23:47Z

8

Use URL.createObjectURL(file) on the files returned from the onDrop callback.

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

export default function Dropzone() {
  const [paths, setPaths] = useState([]);

  const onDrop = useCallback(acceptedFiles => {
    setPaths(acceptedFiles.map(file => URL.createObjectURL(file));
  }, [setPaths]);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drop the files here ...</p>
      </div>
      {paths.map(path => 
        <img key={path} src={path} />
       }
    </div>
  );
}

See https://react-dropzone.js.org/#!/Previews for more info.

answered Dec 21, 2021 at 9:23

tomfa

2852 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deadcoder0904 Over a year ago

i was using multiple: false for single image so had to just use acceptedFiles[0] to make it work :)

Steph · Accepted Answer · 2022-05-13 17:47:43Z

1

In 2022: See this great tutorial https://blog.logrocket.com/create-drag-and-drop-component-react-dropzone/#create-drag-and-drop-and-image-preview-functionality

answered May 13, 2022 at 17:47

Steph

12.5k10 gold badges46 silver badges54 bronze badges

Comments

Zohaib Ijaz · Accepted Answer · 2019-10-24 15:11:36Z

0

You can use file reader api to read the content of droped file and then show it. You need to fix onload callback

  const onDrop = useCallback(acceptedFiles => {

   const reader = new FileReader();
   reader.onload = e => {
      const dataURL = e.target.result;
      setPath(dataURL);
   };
    acceptedFiles.forEach(file => reader.readAsArrayBuffer(file))
  }, []);

answered Oct 24, 2019 at 15:11

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to preview an image using react-dropzone

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related