# How to show Image upload preview

Hey All 👋👋👋

In this article, 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. So let's start.

* * *

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

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

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

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

After that, I added the styles:

```javascript
import "./styles.css";

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

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

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

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

```javascript
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>
  );
}
```

> **Note:** The **URL.createObjectURL()** static method creates a string containing a URL representing the object given in the parameter. Read more [\-&gt;](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#:~:text=See%20also-,URL.createObjectURL(),File%20object%20or%20Blob%20object.)

Now the page would look something like this:

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmr3n1v1683kl5jnbh9p.png align="left")

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

```javascript
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>
  );
}
```

```css
.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;
}
```

The final result after uploading a picture:

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4k5w7byhzul989vnyd23.png align="left")

> Link to code-sandbox [\-&gt;](https://codesandbox.io/s/pensive-thunder-qmolek?file=/src/App.js)

* * *

Thanks for reading. Have a nice day. 🙂

Let's connect - [👋👋👋](twitter.com/thecoollearner)