Javascript - Previewing Images During Upload

Showing a preview of the image before being uploaded to server provides a good user experience. To show a preview of the image you have to :

• Include the file input element in your HTML
• Get a local object url of the selected file
• Using the local url, show an image

Demo

Choose Image Upload Cancel

Download codes for the demo

Implementation

<input type="file" /> will accept a file from the user. Since most of the browsers have their own way of displaying the file input element, you can modify it so as to have a common UI across all browsers. You can hide the file input with CSS, and show a button. You can add code so that a click on this button will trigger a click on the file input, thereby showing the file chooser dialog.

You can also do a validation of the type and size of file.

<div id="preview-container">
    <button id="upload-dialog">Choose Image</button>
    <input type="file" id="image-file" accept="image/jpg,image/png" style="display:none" />
    <img id="preview-image" style="display:none" />
<div>

// will hold the local preview url
var _PREVIEW_URL;

/* Show Select File dialog */
document.querySelector("#upload-dialog").addEventListener('click', function() {
    document.querySelector("#image-file").click();
});

/* Selected File has changed */
document.querySelector("#image-file").addEventListener('change', function() {
    // user selected file
    var file = this.files[0];

    // allowed MIME types
    var mime_types = [ 'image/jpeg', 'image/png' ];
    
    // validate MIME
    if(mime_types.indexOf(file.type) == -1) {
        alert('Error : Incorrect file type');
        return;
    }

    // validate file size
    if(file.size > 2*1024*1024) {
        alert('Error : Exceeded size 2MB');
        return;
    }

    // validation is successful

    // hide upload dialog button
    document.querySelector("#upload-dialog").style.display = 'none';

    // object url
    _PREVIEW_URL = URL.createObjectURL(file);

    // set src of image and show
    document.querySelector("#preview-image").setAttribute('src', _PREVIEW_URL);
    document.querySelector("#preview-image").style.display = 'inline-block';
});

The URL.createObjectURL() method creates an object url from the chosen file. An object url is basically a local url that the browser creates, and this url exists till the page exists.

Once you have a local url, you can simply show an <img>, the source being the local url.

You will also need to implement a "Cancel" button, in case the user wants to select a different image. This button will hide the preview image, and re-show the button to choose a file. You can use revokeObjectURL() method to destroy the previously created local url.

Sending Upload AJAX Request to Server ?

Check Pure Javascript - AJAX File Uploading and Showing Progess Percentage to know how to send an upload AJAX request to server.