Next.js: Show Image Preview before Uploading

In Next.js, you can show an image preview before uploading by using React’s useState hook to manage the selected image state. Here’s a step-by-step guide on how to achieve this:

1. First, import the useState hook from React at the top of your component file:

import { useState } from "react";

1. Next, initialize a state variable selectedImage and its corresponding setter function setSelectedImage:

const [selectedImage, setSelectedImage] = useState();

1. Create a function imageChange that will be triggered when the file input changes. This function checks if a file has been selected and then updates the selectedImage state with the selected file:

const imageChange = (e) => {
 if (e.target.files && e.target.files.length > 0) {
    setSelectedImage(e.target.files[0]);
 }
};

1. Create another function removeSelectedImage that will be triggered when the “Remove This Image” button is clicked. This function resets the selectedImage state:

const removeSelectedImage = () => {
 setSelectedImage();
};

1. In your JSX, add an input field of type “file” that triggers the imageChange function whenever its value changes:

<input accept="image/*" type="file" onChange={imageChange} />

1. Display the selected image preview if selectedImage is not null. Use URL.createObjectURL() to generate a URL representing the selected image:

{selectedImage && (
 <div>
    <img src={URL.createObjectURL(selectedImage)} alt="Thumb" />
    <button onClick={removeSelectedImage}>Remove This Image</button>
 </div>
)}

Here’s the complete code:

import { useState } from "react";

const App = () => {
 const [selectedImage, setSelectedImage] = useState();

 const imageChange = (e) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedImage(e.target.files[0]);
    }
 };

 const removeSelectedImage = () => {
    setSelectedImage();
 };

 return (
    <div>
      <input accept="image/*" type="file" onChange={imageChange} />
      {selectedImage && (
        <div>
          <img src={URL.createObjectURL(selectedImage)} alt="Thumb" />
          <button onClick={removeSelectedImage}>Remove This Image</button>
        </div>
      )}
    </div>
 );
};

export default App;

This approach allows you to show an image preview before uploading without requiring any third-party libraries Source 0.

import { useState } from "react";

const App = () => {
  const [selectedImage, setSelectedImage] = useState();

  // This function will be triggered when the file field change
  const imageChange = (e) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedImage(e.target.files[0]);
    }
  };

  // This function will be triggered when the "Remove This Image" button is clicked
  const removeSelectedImage = () => {
    setSelectedImage();
  };

  return (
    <>
      <div style={styles.container}>
        <input
          accept="image/*"
          type="file"
          onChange={imageChange}
        />

        {selectedImage && (
          <div style={styles.preview}>
            <img
              src={URL.createObjectURL(selectedImage)}
              style={styles.image}
              alt="Thumb"
            />
            <button onClick={removeSelectedImage} style={styles.delete}>
              Remove This Image
            </button>
          </div>
        )}
      </div>
    </>
  );
};

export default App;

// Just some styles
const styles = {
  container: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    paddingTop: 50,
  },
  preview: {
    marginTop: 50,
    display: "flex",
    flexDirection: "column",
  },
  image: { maxWidth: "100%", maxHeight: 320 },
  delete: {
    cursor: "pointer",
    padding: 15,
    background: "red",
    color: "white",
    border: "none",
  },
};