JavaScript

Generate instant previews for image upload

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

Generate instant previews for image upload


Hey all, I was recently working with the image upload and the problem I came across was to show the previews of the image being/to-be uploaded. After few trial-and-error attempts, I found 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 above callback based code. No data is sent to server.

Image:
Preview will be displayed here...
You've successfully subscribed to Time to Hack!
Close