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 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:
Preview will be displayed here...