DEV Community

Cover image for How to show Image upload preview
Alok Kumar
Alok Kumar

Posted on

19 2

How to show Image upload preview

Hey All πŸ‘‹πŸ‘‹πŸ‘‹

It's been a while since I wrote an article. Due to work and life, I wasn't able to keep up with my blog, but I'm back now and I'll try to be more consistent. Moving on, I am about to discuss something that was given to me as part of my interview task. Which was to create a preview of the picture before it is uploaded.


Here, I have used a React application. After clearing the app.js file, the code now looks like this:



export default function App() {
  return (
    <div className="App">
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode

Then I added a header and a div which will contain input and an image:



export default function App() {
  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
      </div>
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode

After that, I added the styles:



import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
      </div>
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode


.App {
  font-family: sans-serif;
  text-align: center;
}

.imageContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}



Enter fullscreen mode Exit fullscreen mode

Then I added an input for uploading the picture and used a state to store it:



import "./styles.css";
import { useState } from "react";

export default function App() {
const [image, setImage] = useState(null);

const handleImageUpload = (e) => {
    setImage(URL.createObjectURL(e.target.files[0]));
  };

  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
          <input type="file" accept="image/*" onChange={handleImageUpload} />
      </div>
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode

Note: The URL.createObjectURL() static method creates a string containing a URL representing the object given in the parameter. Read more ->

Now the page would look something like this:

preview

Lastly, I displayed the image if it existed and added styles:



import { useState } from "react";
import "./styles.css";

export default function App() {
  const [image, setImage] = useState(null);

  const handleImageUpload = (e) => {
    setImage(URL.createObjectURL(e.target.files[0]));
  };
  return (
    <div className="App">
      <h1>Image Upload Preview</h1>
      <div className="imageContainer">
        <input type="file" accept="image/*" onChange={handleImageUpload} />
        {image ? <img src={image} className="image" alt="preview" /> : null}
      </div>
    </div>
  );
}



Enter fullscreen mode Exit fullscreen mode


.App {
  font-family: sans-serif;
  text-align: center;
}

.imageContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  height: 200px;
  width: 200px;
  margin-top: 20px;
  border: 1px solid black;
  border-radius: 5px;
}


Enter fullscreen mode Exit fullscreen mode

The final result after uploading a picture:

preview


Thanks for reading. Have a nice day. πŸ™‚

Let's connect - πŸ‘‹πŸ‘‹πŸ‘‹

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay