Generate instant previews for image upload

Quick and Easy solution to generate preview of images upload in vanilla javascript in callback and Promise style.

Pankaj

Oct 9, 2017 • 1 min read

Last updated: 7 Jan 2023 • 1 min read

Hey all, I recently worked with the image upload, and the problem I encountered was showing the previews of the image being/to be uploaded. After a few trial-and-error attempts, I found a pretty neat solution with FileReader API.

Code:

Following is the vanilla js solution for that:

And can be used in following ways:

If you are fan of Promises, you can define and use the above code in folowing ways:

Playground:

The following playground uses the above callback-based code. No data is sent to the server.

Image:

Code:

Playground:

Sign up for more like this.