How to Preview and Resize Images using React

Have you ever wanted to preview an image in React, but weren’t sure how? How about resizing as well?

Here’s the simplest example I could come up with for how to preview an image and resize it.

I even used a plugin — react-image-file-resizer — to resize the uploaded image using the browser.

The Code

import { useState } from "react";
import Resizer from "react-image-file-resizer";

function App() {
  const [preview, setPreview] = useState({});
  const [previewResized, setPreviewResized] = useState({});

  const handleImage = async (e) => {
    let file = e.target.files[0];

    setPreview({
      ...preview,
      theFile: window.URL.createObjectURL(file),
      theSize: file.size,
    });

    // Resizer.imageFileResizer parameters:
    // file, width(px), height(px), file-type, quality, rotate, callback
    await Resizer.imageFileResizer(
      file,
      300,
      300,
      "PNG",
      100,
      0,
      async (uri) => {
        try {
          setPreviewResized({
            ...previewResized,
            theFile: uri,
          });
        } catch (error) {
          console.log("Resizing error: ", error);
        }
      }
    );
  };

  const resetImage = (e) => {
    URL.revokeObjectURL(preview.theFile);
    setPreview({});
  };

  return (
    <div style={{ width: "1200px", margin: "auto" }}>
      <form>
        <label htmlFor="theFile">File demo using React:</label>
        <br />
        <br />
        <input type="reset" value="Reset form" onClick={resetImage} />{" "}
        <input type="file" id="theFile" name="theFile" onChange={handleImage} />
        <br />
        <br />
        Image preview:
        {preview.theFile ? (
          <div>
            <br />
            {preview.theFile}
            <br />
            <br />
            Original, file size {preview.theSize} bytes:
            <br />
            <br />
            <img src={preview.theFile} width="300px" alt="Preview" />
            <br />
            <br />
            Resized:
            <br />
            <br />
            <img src={previewResized.theFile} alt="Preview resized" />
          </div>
        ) : (
          <div>* Please select a file</div>
        )}
      </form>
    </div>
  );
}

export default App;