Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Show inline previews of images that are going to be uploaded.
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
(function (win,doc) {
'use strict';
if (!win.FileReader || !win.addEventListener || !doc.querySelectorAll) {
// doesn't cut the mustard.
doc.querySelectorAll('input[type="file"][accept="image/*"]').forEach( function (fileInput) {
fileInput.addEventListener('change', function () {
var files = fileInput.files;
if (files) {
files.forEach( function (file) {
var fileReader = new FileReader();
fileReader.addEventListener('load', function () {
'<img src="' + this.result + '">'
}(this, this.document));
Copy link

adactio commented May 15, 2022

Blog post: Image previews with the FileReader API.

You should be able to drop this script into any page that has:

<input type="file" accept="image/*">

Copy link

Closing parenthesis are missing on lines 23 and 26 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment