React 18 Single and Multiple Images Upload Preview

React image upload preview tutorial; In this post, we are going to learn how to show image preview before uploading to the server in a React app using the functional component and React useState hook.We will create a basic react app in which we will use an HTML file input field along with some events to show an image preview.

Let’s understand the URL.createObjectURL() static method, we are going to use this method to get the image preview URL.

This method generates a DOMString including a URL describing the object yielded in the parameter.

The URL life is tied to the document in the window on which it was created.

The new object URL outlines the designated File object or Blob object.

myObjectURL = URL.createObjectURL(object);

object: It’s a Blob, File or MediaSource object, It creates an object URL.

Return value: A DOMString including an object URL which represents the contents of the particular source object.

React Functional Component Multiple Images Upload Preview Example

Let’s install React app for image upload preview demo.

Install React Project

In the very first step, Install React app with Bootstrap. Execute the given below command.

npx create-react-app react-image-preview

Navigate to React image preview app directory.

cd react-image-preview

Next, install Bootstrap framework.

npm install bootstrap --legacy-peer-deps

Next, Import bootstrap.min.css in src/App.js file from node_modules folder:

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

import FilePreview from "./components/FilePreview";

export default function App() {
    return (
      <div className="container mt-5">
        <FilePreview />
      </div>
    );
}

Next, run the React app in the web browser.

npm start

Create Single Image Upload Preview

Create src > components directory and create component file inside of it.

Update code in FilePreview.js file:

import React, { useState } from "react";

export default function FilePreview() {
  const [fileSelected, setFileSelected] = useState(null);

  const uplodSingleFile = (e) => {
    let file = e.target.files[0];
    setFileSelected(file);
  };

  return (
    <div className="w-50 p-3">
      <form>
        <h2 className="mb-3">
          React Functional Component Multiple Image Upload Preview Example
        </h2>

        {fileSelected && (
          <div className="mb-3">
            {<img src={URL.createObjectURL(fileSelected)} alt="..." />}
          </div>
        )}

        <div className="mb-3">
          <input
            type="file"
            className="form-control"
            onChange={uplodSingleFile}
          />
        </div>
      </form>
    </div>
  );
}

We defined the HTML input form and added the React useState hook in a functional component to upload single image and show preview of single image in React.

We used the URL.createObjectURL() static method which produces a DOMString including a URL representing the object provided in the parameter.

Multiple Images Upload Preview in React Functional Component

Now, let’s build multiple images upload preview functionality in React, include the given below code within the FilePreview.js file.

import React, { useState, useEffect } from "react";

export default function FilePreview() {
  const [fileSelected, setFileSelected] = useState([]);

  const uploadMultiFiles = (e) => {
    const files = Array.from(e.target.files);
    setFileSelected(files);
  };

  const uploadFiles = (e) => {
    e.preventDefault();
  };

  useEffect(() => {}, [fileSelected]);

  return (
    <div className="w-50 p-3">
      <form>
        <h2 className="mb-3">
          React Functional Component Multiple Image Upload Preview Example
        </h2>

        <div className="form-group multi-preview">
          {fileSelected.map((file, index) => (
            <img key={index} src={URL.createObjectURL(file)} alt="..." />
          ))}
        </div>

        <div className="mb-3">
          <input
            type="file"
            className="form-control"
            onChange={uploadMultiFiles}
            multiple
          />
        </div>
        <button type="button" className="btn btn-danger" onClick={uploadFiles}>
          Upload
        </button>
      </form>
    </div>
  );
}

Define fileObj array variable, we will insert image preview URLs in this array using URL.createObjectURL() method for showing multiple images preview before uploading to the server.

Next, we defined fileSelected array in this array we will push images to preview url we are using JavaScript’s Array.from() method to iterate over the file object iterables.

Then we are setting up the tag and passing the image url return by map method.

Conclusion

We have completed React single and multiple images upload preview tutorial with example.

I hope this tutorial will be helpful to you, please consider it sharing with other.