{"id":5567,"date":"2013-04-18T12:57:39","date_gmt":"2013-04-18T12:57:39","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/previewing-image-uploads-with-filereader-in-html5\/"},"modified":"2016-07-28T10:53:16","modified_gmt":"2016-07-28T10:53:16","slug":"previewing-image-uploads-with-filereader-in-html5","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/blogs\/previewing-image-uploads-with-filereader-in-html5\/","title":{"rendered":"Previewing image uploads with FileReader in HTML5"},"content":{"rendered":"<p>If a user is filling out an HTML form, and that form happens to include an image upload, it would be nice to show them a preview of the image. Using FileReader in HTML5, this turns out to be reasonably straightforward. The code below looks for any file input element with the class <code>upload-image<\/code>, and inserts an <code>&lt;img&gt;<\/code> element just before it. Whenever the user selects a file, it uses a FileReader to grab the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/data_URIs\">data URI<\/a> for the selected image, and sets the <code>src<\/code> attribute on the <code>&lt;img&gt;.<\/code><\/p>\n<p>As an added bonus, if the file input element has a <code>data-placeholder<\/code> attribute, it will use the value of the attribute to set the source of the image element when no file has been selected. One use case might be if you&#8217;re providing a form to allow an update to an existing item. By setting the placeholder to the current image for that item, you indicate to the user that uploading no file keeps the current image. Then, on the server-side, don&#8217;t update the image if the user hasn&#8217;t uploaded a file.<\/p>\n<p>  Example HTML:  <\/p>\n<pre class=\"lang:html theme:github\">&lt;input type=\"file\" id=\"photo\"\" class=\"upload-image\"\n    data-placeholder=\"\/uploads\/images\/hat.jpg\" \/&gt;<\/pre>\n<p>  Example JavaScript:  <\/p>\n<pre class=\"lang:java theme:eclipse\">Array.prototype.forEach.call(\n    document.getElementsByClassName(\"upload-image\"),\n    function(fileElement) {\n        var previewElement = document.createElement(\"img\");\n        previewElement.style.display = \"block\";\n        fileElement.parentNode.insertBefore(previewElement, fileElement);\n        \n        var fileReader = new FileReader();\n        \n        fileReader.onload = function(event) {\n            previewElement.src = event.target.result;\n        };\n        \n        fileElement.addEventListener(\"change\", updateImagePreview, false);\n        updateImagePreview();\n        \n        function updateImagePreview() {\n            var file = fileElement.files[0];\n            if (file) {\n                fileReader.readAsDataURL(file);\n            } else {\n                var placeholderSrc = fileElement.getAttribute(\"data-placeholder\");\n                if (placeholderSrc) {\n                    previewElement.src = placeholderSrc;\n                } else {\n                    previewElement.removeAttribute(\"src\");\n                }\n            }\n        }\n    }\n);<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>If a user is filling out an HTML form, and that form happens to include an image upload, it would be nice to show them a preview of the image. Using FileReader in HTML5, this turns out to be reasonably straightforward. The code below looks for any file input element with the class upload-image, and&#8230;&hellip;<\/p>\n","protected":false},"author":221713,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"coauthors":[],"class_list":["post-5567","post","type-post","status-publish","format-standard","hentry","category-blogs"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/5567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/221713"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=5567"}],"version-history":[{"count":13,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/5567\/revisions"}],"predecessor-version":[{"id":39600,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/5567\/revisions\/39600"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=5567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=5567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=5567"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=5567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}