Skip to content

Instantly share code, notes, and snippets.

@adactio
Created May 12, 2022 13:33
Show Gist options
  • Save adactio/0e406cbc2ff0d3eed7a0ffcd0d932aab to your computer and use it in GitHub Desktop.
Save adactio/0e406cbc2ff0d3eed7a0ffcd0d932aab to your computer and use it in GitHub Desktop.
Show inline previews of images that are going to be uploaded.
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
(function (win,doc) {
'use strict';
if (!win.FileReader || !win.addEventListener || !doc.querySelectorAll) {
// doesn't cut the mustard.
return;
}
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.readAsDataURL(file);
fileReader.addEventListener('load', function () {
fileInput.insertAdjacentHTML(
'afterend',
'<img src="' + this.result + '">'
);
});
}
}
});
}
}(this, this.document));
@adactio
Copy link
Author

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/*">

@davidbgk
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