Home » Tutorials » JavaScript » Create Thumbnail Preview of Images Using HTML5 API

Create Thumbnail Preview of Images Using HTML5 API

Create Thumbnail Preview of Images Using HTML5 API

Now, with the help of HTML5, web developer can create thumbnail preview of images that a user may wish to upload to remote server. You can check out the demo, if you are still not clear about it.

View Demo

Getting Started

The HTML5 API that we are going to use is ‘File API’. This API provide several interfaces for us to access a file from local file system.

  • File: Provides information such as, name of the file, size, and mimetype.
  • Blob: Which allows slice a file into byte ranges.
  • FileList: A collection / array of file objects.
  • FileReader: An interface can be used to read the information from the the images.

In this tutorial, we are going to mainly cover interface of FileReader at the moment, and we will talk about the rest in the upcoming tutorial.

Ok, before we start, the first thing we need to do is to check whether the browser has the capability to support FileReader:

<script type="text/javascript">
if (window.FileReader) {
  //then your code goes here
} else {
  alert('This browser does not support FileReader');
}
</script>

After that, let’s insert the file upload and the output of thumbnail into the HTML structure as shown below:

<input type="file" id="files" />
<output id="list"></output>

The next thing is to add an event listener, to run a thumbnail generating function every time, when we re-selecting new images to upload.

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Now, let’s construct the thumbnail generating function – ‘handleFileSelect’.

function handleFileSelect(evt) {
	var files = evt.target.files;
	var f = files[0];
	var reader = new FileReader();
	
	  reader.onload = (function(theFile) {
		return function(e) {
		  document.getElementById('list').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50" />'].join('');
		};
	  })(f);
	  
	  reader.readAsDataURL(f);
}

As you seen above, we captured the targeted file upload via the parameters ‘evt‘ sent from event listener that we defined earlier, and accessing the information of targeted images via FileReader, and lastly calls reader.readAsDataURL() render the image into thumbnail by setting the ‘src’ attribute to a data URL.

That’s it!

View Demo


13 Comments

  1. Noe 05/30/2012 at 3:48 am

    I am getting Uncaght Type Error: Cannot call method ‘addEventListener’ of null, i copy exactly what you do! Is there any js extra??

    • onlyWebPro 06/02/2012 at 2:47 pm

      Hi Noe,

      Thanks for reading my post 🙂

      For your problem, I guess it is because the script runs before the before the output elements are rendered, so please make sure you have:

      – Put the scripts in the bottom of the page / After “”.

  2. Andrew 07/28/2012 at 10:48 pm

    I’ve combined your great work above with “jquery.fileinput.js” – they make a great combination. Thank you!

    • onlyWebPro 08/01/2012 at 7:04 am

      Hi Andrew,

      Glad to heard that!

      Regards,
      onlywebpro

    • John 02/22/2013 at 6:37 pm

      Andrew. I’m looking for a similar solution that styles the file input and also displays a thumbnail. Do you have a demo?

  3. Mohamad Habibi 09/08/2012 at 4:21 am

    A great resource indeed ! I’d like to know how to perform real upload to server after this ? Thank you

  4. Travis Dahl 03/06/2013 at 6:29 pm

    This is great! I have it working on a iphone web app. The only problem I’ve encountered is the orientation. it doesnt seem to rotate it correctly based on exif data. Anybody run into this? They always preview landscape even if they were taken in portrait

  5. Nikhil 08/29/2013 at 6:53 am

    nice info…

    here i found one more post which creates thumbnail. and only thumbnail is gets shown or saved when we try to save or view it..

    http://www.iminfo.in/post/how-to-create-thumbnail-image-using-html5-canvas-and-javascript

  6. Paul Maher 05/27/2014 at 4:51 am

    needs a delete/reset link

  7. Sergio A. Guzmán 08/02/2014 at 6:38 am

    Example working PERFECTLY! Thank you so much!

    • onlyWebPro 08/23/2014 at 7:29 am

      No problem! You’re welcome!

    • onlyWebPro 11/23/2014 at 1:50 am

      You’re most welcome!

      Please do follow us for up-coming useful tutorial!

Leave a Comment

Android, iOS Development Tutorials