Create image preview with pure JavaScript

This tutorial shows you how to add image preview to your forms with pure JavaScript. Image preview means that you can examine images before they are uploaded to a server.

This plugin enables you to preview multiple images or just one image for each file upload control. We use a FileReader to read each file and the image is Base64-encoded in the src attribute.

This plugin has been tested and is working with Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4), Microsoft Edge (42.17134.1.0) and Internet Explorer (11.829.17134.0), without any polyfill. If you want to support older browsers, check out our post on how to transpile and polyfill JavaScript.

JavaScript

This class has a constructor, this class should only be applied when someone creates a new instance of it. The constructor takes options as a parameter and we add change event listeners for each file upload control that should have image preview.

var annytab = annytab || {};
annytab.imagepreview = (function () {

    'use_strict';

    // Constructor
    function imagepreview(opts)
    {
        // Set default values for parameters
        opts = opts || {};

        // Set options
        this.options = { image_class: 'annytab-imagepreview', alt: 'Preview' };
        for (var option in this.options) {
            if (opts.hasOwnProperty(option) === true)
            {
                this.options[option] = opts[option];
            }
        }

        // Get all file input controls that should have a preview
        var inputs = document.querySelectorAll('[data-imagepreview-container]');

        // Add events
        addEvents(this, inputs);

    } // End of the constructor

    // Add events
    function addEvents(ip, inputs)
    {
        // Loop inputs
        for (var i = 0; i < inputs.length; i++)
        {
            // Add a change event
            window.onload = inputs[i].addEventListener('change', function (event)
            {
                // Prevent default behaviour
                event.preventDefault();

                // Get a image preview container
                var preview_container = document.getElementById(this.getAttribute('data-imagepreview-container'));

                // Clear the container (fastest way)
                while (preview_container.firstChild) {
                    preview_container.removeChild(preview_container.firstChild);
                }

                // Loop files
                for (var i = 0; i < this.files.length; i++)
                {
                    // Create a file reader
                    var reader = new FileReader();

                    // Load the image
                    reader.onload = function (e)
                    {
                        // Insert image (fastest way)
                        preview_container.insertAdjacentHTML('beforeend', '<img src="' + e.target.result + '" class="' + ip.options.image_class + '" alt="' + ip.options.alt + '" />');
                    };

                    // Read the image
                    reader.readAsDataURL(this.files[i]);
                }

            }, false);
        }

    } // End of the addEvents method

    // Return this object
    return imagepreview;

})();

How to use the plugin

You need to add a data-imagepreview-container attribute for each file upload control that should have image preview, you also need to add a container that can be used to display images.

<input name="background_image" type="file" class="annytab-form-control" data-imagepreview-container="img0" multiple />
<div id="img0" style="margin:10px 0px 0px 2px;">
    @if (string.IsNullOrEmpty(imageUrls.Get("background_image")) == true)
    {
        <i class="fas fa-image fa-6x fa-fw"></i>
    }
    else
    {
        <img src="@this.tools.GetFilePath(imageUrls.Get("background_image"))" alt="@background_image_tt" style="max-width:100%;border:1px solid #cccccc;" />
    }
</div>

Create a new instance of the plugin inside a script tag and add options for class and alt-text. Default values will be used if no options is added.

<!--<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>-->
<script src="/js/annytab-shared/annytab.imagepreview.js"></script>
<script>

    var image_preview = new annytab.imagepreview({ image_class: 'annytab-imagepreview', alt: 'ALT' });

</script>

.annytab-imagepreview {
    display: block;
    max-width: 100%;
    border: 1px solid #cccccc;
    margin-bottom: 5px;
}