Skip to content

Instantly share code, notes, and snippets.

@davidbgk
Forked from adactio/previewImageUploads.js
Created May 15, 2022 23:04
Show Gist options
  • Save davidbgk/47328c376b33b27be6bb70d7b8107abc to your computer and use it in GitHub Desktop.
Save davidbgk/47328c376b33b27be6bb70d7b8107abc 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));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment