Use-Cases of this Tutorial
- You are looking to know how to show a preview of the image before it is actually uploaded to server.
- You are looking to know the usage of URL.createObjectURL() function.
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
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.