DEV Community

Cover image for Image Live Preview app with React.js
Oreste Abizera
Oreste Abizera

Posted on

14 3

Image Live Preview app with React.js

In the beginning, the web was only text. And it was somehow boring. It didn't take too long for the introduction of images (one of the best types of content) on the web. Today we are not going to talk about how to upload images. We are going to look at how to preview an image on the frontend before uploading it to the server. Hope you don't get bored.

I'm using React js in this article.

Let's get started:

Firstly create a react js project by using create-react-app or another approach you want.
Alt Text

Edit App.js and insert this code.

Alt Text
The result will be:
Alt Text

Update handleFile function with these codes:

let tempFile = e.target.files[0];
const reader = new FileReader();
reader.addEventListener(
"load",
function () {
  setfile(reader.result);
},false);

if (tempFile) {
   reader.readAsDataURL(tempFile);
}
Enter fullscreen mode Exit fullscreen mode

I added a few CSS in App.css

form {
  width: 60%;
  margin: 5rem auto;
}

form div.output {
  border: 1px solid rgb(218, 213, 213);
  margin-top: 20px;
  padding: 10px;
  max-width: 50%;
}

.output img {
  max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Finally, our app has a new look.
Alt Text

Thanks for reading this article until this line. If you want the code of the app, find it here. You can also test it here. To read more about FileReader visit this site.

You can find me anytime on Twitter and Instagram. Have a nice day😍😍

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (8)

Collapse
 
blessinghirwa profile image
Blessing Hirwa

wow! This was helpful

Collapse
 
oreste profile image
Oreste Abizera

nice to hear that it helped

Collapse
 
muhodari profile image
Muhodari Sage

amazing congz

Collapse
 
oreste profile image
Oreste Abizera

thanks 😍😍

Collapse
 
sauve2003 profile image
Sauvé Jean-Luc

Too helpful.

Collapse
 
oreste profile image
Oreste Abizera

nice to hear 😍

Collapse
 
ishgervais profile image
Gervais Ishimwe

kudos

Collapse
 
oreste profile image
Oreste Abizera

appreciated

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay