Upload and display an image using setState in React

 Step 1:Create a state variable for the image file:

 

const [image, setImage] = useState(null);
 

Step 2: Create a function to handle the file input change event:

const handleImageChange = (e) => {
  if (e.target.files[0]) {
    setImage(e.target.files[0]);
  }
}; 

Step 3: In the render method, add an input element to allow the user to select an image file:

<input type="file" onChange={handleImageChange} />
 

Step 4: Add an image element to display the uploaded image:

{image && <img src={URL.createObjectURL(image)} alt="Uploaded Image" />}
 

The URL.createObjectURL method creates a URL for the uploaded image file, which can be used as the src attribute of the img element.

 

Here's the full code:

import React, { useState } from "react";

function ImageUpload() {
  const [image, setImage] = useState(null);

  const handleImageChange = (e) => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      {image && <img src={URL.createObjectURL(image)} alt="Uploaded Image" />}
    </div>
  );
}

export default ImageUpload;

Here's the full code After Applying Styles:

 ImageUploader.js

 

 import React, { useState } from "react";
import "../image-uploader/image-uploader.css";

const ImageUploader = () => {
  const [image, setImage] = useState(null);

  const handleImageChange = (e) => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };

  return (
    <div className="center">
      <div className="form-input">
        <div className="preview">
          {image && (
            <img
              id="file-ip-1-preview"
              src={URL.createObjectURL(image)}
              alt="Uploaded Image"
            />
          )}
        </div>
        <label for="uploadImagesLbl">Upload Image</label>
        <input
          type="file"
          id="uploadImagesLbl"
          accept="image/*"
          onChange={handleImageChange}
        />
      </div>
    </div>
  );
};

export default ImageUploader;
 

image-uploader.css

body {
  margin: 0px;
  height: 100vh;
  background: #1283da;
}
.center {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-input {
  width: 350px;
  padding: 20px;
  background: #fff;
  box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
    3px 3px 7px rgba(94, 104, 121, 0.377);
}
.form-input input {
  display: none;
}
.form-input label {
  display: block;
  width: 45%;
  height: 45px;
  margin-left: 25%;
  line-height: 50px;
  text-align: center;
  background: #1172c2;

  color: #fff;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
  text-transform: Uppercase;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}

.form-input img {
  width: 100%;

  margin-bottom: 30px;
}

Testing Step 1 :Image Uploader Ui

 

 

Testing Step 2 :Image Uploader in Action:After Uploading