Question

I have this fileReader code

for (var i = 0; i < files.length; i++) {
    fileReader.onload = (function(file) {
        return function(e) {
            z = z + 40;
            // Place the image inside the dropzone
            var image = this.result;
            $('#dropped-files').append('<div style="left: ' + z + 'px; background: url(' + image + ') cover;"> </div>');

        };
    })(files[i]);
}​

Anyway, I’m trying to set the background of the appended box to the image that was just uploaded. The problem is it isn’t working. The data URI is there but I can’t seem to get it to show up as the background! Even when I click on the data URI link in inspect element I can get to the image that was uploaded, but it will not show up as the background image.

Any ideas why? The data URI is exceptionally long, but begins with the basic data and is base64, if that helps.

Answer 1

Try removing cover at the end of the background value. I don’t know what you’re trying to do but adding it makes Chrome throw up its hands and say it isn’t a valid property value.

EDIT:
Instead, make 2 declarations:

$('#dropped-files').append('<div style="left: ' + z + 'px; background: url(' + image + '); background-size: cover;"> </div>');