Question

I’m trying to load several images by a drop action and than resizing them and adding them as a thumbnail. The resize part is very important because the images can be very large and I want to make the thumbnails small of size.

Here is my code:

loadingGif(drop);

for (var i=0;i<files.length;i++) {
    var file = files[i];
    var reader = new FileReader();          

    reader.onload = function(e) {
        var src = e.target.result;

        var img = document.createElement('img');            
        img.src = src;
        var scale = 100/img.height;
        img.height = 100;
        img.width = scale*img.width;    

        output.push('<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>');

        if(output.length == files.length) {
            drop.removeChild(drop.lastChild);
            drop.innerHTML += output.join('');
            output.length = 0;
        }
    }

    reader.readAsDataURL(file);
}

As you can probably tell I insert a loading gif image in my dropzone until all files are loaded (output.length == files.length). When a file is loaded I add html to an array which I will print if the load is complete. The problem is I can’t seem to add the img object (I need this object to resize the image) to the html string, which seems obvious as the img is an object… So my question to you guys is: how do I do this? 🙂

Answer 1

Generally speaking, it’s bad habit to play with DOM elements as strings. You should instead use the native javascript (or the library/framework you are using) commands to create the elements and set their attributes.

For example if you have an element with id “image-container” which contains all your images, you may write.

var container = document.getElementById( 'image-container' );
var img = document.createElement( 'img' );

container.appendChild( img );

Instead of a large HTML string containing all your output, you can then have only a reference to an element containing all the other elements, and either appending it to the body as soon as all the elements have been loaded, or keeping it hidden and showing it when the loading is complete.

if (output.length == files.length) {
    drop.removeChild(drop.lastChild);
    drop.appendChild( container );
    output.length = 0;
}

Remember IDs have to be unique. There cannot be more than one element with the same ID in the same document.