This is the continuation of how to open a multi select file dialogue just using JavaScript. In this tutorial I will explain how to preview the selected files before upload.

Before we get started I have decided to just use jQuery to build this script rather than plain JavaScript simply because it will be easier and quicker. But if you are interested in a dependency free script let me know in the comments below and I will show an example with just JavaScript. Provided there is enough interest.

Here is the base script I’m starting off with, which slightly extends what I done in the previous tutorial which you can copy paste.

(function(window, jquery){
    var $ = jquery;
    if($ !== null){
        var fup = {
            fileSelectBtn : $('<a href="">Select files</a>'),
            fileSelector: $('<input type="file" multiple="">'),
            outputArea: undefined,
            init: function(cssSelector){
                fup.outputArea = $(cssSelector);
                fup.outputArea.append(fup.fileSelectBtn);

                fup.fileSelectBtn.on("click",function(){
                    fup.fileSelector.click();
                    return false;
                });
            }
        }

        window.fileup = fup;
    }else{
        console.error("jQuery Required.");
    }
})(window, jQuery);

$(document).ready(function(){
   var fup = window.fileup;
   fup.init(".fileupload");
});

Here I’ve made a simple object for our file uploader var fup={} which is appended to the global window object. Then I set up the script by calling the fup.init function with a css selector using the standard jQuery ready method.

Getting the selected files data

What needs to be done is to look for a change event when the user has selected some files. This will call a function that we get the event data from to retrieve the file data.

In the init function we listen for the change event on the file selector:

fup.fileSelector.on("change", fup.listImages);

This will call our new function listImages(evt) on the fup object:

listImages: function(evt){
   var files = evt.target.files;
}

From the event target.files an array of file objects are returned that we can loop through. To complete the function I setup the ul element to output list items to and appendTo the fup.outputArea.

var ul = $('<ul class="imageList"></ul>');
if(files.length &gt; 0){
    ul.appendTo(fup.outputArea);
}

Then loop through each selected file using jQuery each function. I test if the file is of type image and use the FileReader class method reader.readAsDataURL which will generate a data URL.

Once the image data has loaded the reader.onload event is fired and the image is then appended to the list and it should show the images selected. When the event is fired we use the target.result to get the data URL. The file object also has properties like name and size to add in additional file data.

$.each(files, function(i, file){

   if (!file.type.match('image.*')) {
       return true;//works like continue in a normal loop
   }

   var reader = new FileReader();

   reader.onload = function(e) {
         var li = '<li>
         <img class="img-thumbnail" src="' + e.target.result + '" title="'+ escape(file.name) +'">
         <p>Name: ' + escape(file.name) +
         ' (' + file.type + ')
         size: '+ file.size + '</p></li>';
         fup.outputImages.push(li);
         ul.append(li);
    };

    reader.readAsDataURL(file);
});

Browser support for FileReader:

In the next tutorial we will look at uploading the images to your website.