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:

<span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;

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

const <span class="hljs-string">[selectedImage, setSelectedImage]</span> = 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:

<span class="hljs-keyword">const</span> imageChange = (e) => {
 <span class="hljs-keyword">if</span> (e.<span class="hljs-keyword">target</span>.files && e.<span class="hljs-keyword">target</span>.files.length > <span class="hljs-number">0</span>) {
    setSelectedImage(e.<span class="hljs-keyword">target</span>.files[<span class="hljs-number">0</span>]);
 }
};

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 = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
 setSelectedImage();
};

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

<input <span class="hljs-keyword">accept</span>=<span class="hljs-string">"image/*"</span> <span class="hljs-keyword">type</span>=<span class="hljs-string">"file"</span> 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 && (
 <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{URL.createObjectURL(selectedImage)}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Thumb"</span> /></span>
    <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{removeSelectedImage}</span>></span>Remove This Image<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
 <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
)}

Here’s the complete code:

<span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;

const App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
 const [selectedImage, setSelectedImage] = useState();

 const imageChange = <span class="hljs-function"><span class="hljs-params">(e)</span> =></span> {
    <span class="hljs-keyword">if</span> (e.target.files && e.target.files.length > <span class="hljs-number">0</span>) {
      setSelectedImage(e.target.files[<span class="hljs-number">0</span>]);
    }
 };

 const removeSelectedImage = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
    setSelectedImage();
 };

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

<span class="hljs-keyword">export</span> 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",
  },
};