Mohammed AbuShawish Mohammed AbuShawish - 1 month ago 14
Javascript Question

FileReader to preview images using scroll event

I created simple code to upload Images using Ajax and used FileReader to preview the content before uploading..

The image would be previewed based on scrolling action to reduce the loading time ..

But the problem is when I fire the event of scrolling, the Error code will be fired ..
"TypeError: Argument 1 of FileReader.readAsDataURL is not an object."

$('.loaded-images-content').scroll(function () {

$('[drawed=None]').each(function () {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $('.loaded-images-content').scrollTop() + $('.loaded-images-content').height();

if (bottom_of_window > bottom_of_object) {
var index = $(this).parent().parent().parent().attr('index');

$(this).attr('drawed', 'yes');
Draw_Image(index);
}
});
});


function Draw_Image(index) {
var reader = new FileReader();
reader.onload = function (e) {
var tmpimage = new Image();
tmpimage.src = reader.result;

tmpimage.onload = function () {
var MAX_WIDTH = 120;
var MAX_HEIGHT = 140;

var tmp_w = tmpimage.width;
var tmp_h = tmpimage.height;

if (tmp_w > tmp_h) {
if (tmp_w > MAX_WIDTH) {
tmp_h *= MAX_WIDTH / tmp_w;
tmp_w = MAX_WIDTH;
}
}
else {
if (tmp_h > MAX_HEIGHT) {
tmp_w *= MAX_HEIGHT / tmp_h;
tmp_h = MAX_HEIGHT;
}
}

var canvas = document.createElement("canvas");

canvas.width = tmp_w;
canvas.height = tmp_h;

var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tmp_w, tmp_h);


$('#loaded-image-frame' + index + ' #preview').html(canvas);
}
}
reader.readAsDataURL(filesList[index]);
}

Answer

Your error means that filesList doesn't contain a file at the index you're trying to access

That's right thank you..

Comments