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:

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

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

&lt;input type="file" id="files" /&gt;<br>
&lt;output id="list"&gt;&lt;/output&gt;<br>

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);<br>

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

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

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

More HTML5 Web Development Tutorial?

Check out the complete list of onlyWebPro’s HTML5 Web Development tutorial here!

  • Noe

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

    • 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 “”.

  • Andrew

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

    • Hi Andrew,

      Glad to heard that!


    • John

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

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

  • 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

    • Sneyder2328

      yeah, I have exactly the same problem, were you able to solve this?

  • Nikhil

    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..


  • Paul Maher

    needs a delete/reset link

  • Sergio A. Guzmán

    Example working PERFECTLY! Thank you so much!

    • No problem! You’re welcome!

    • You’re most welcome!

      Please do follow us for up-coming useful tutorial!

  • Diogo Tasquin Reducino

    Awesome explanation and code, thanks!

  • nawa aripurna

    thank you it works. i have been looking for this for quite a while

  • Sneyder2328

    this works but some images are shown upside down, why is that?