I'm trying to change file upload image to select or click on image on the same page in this canvas related script.

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];
        var fr = new FileReader();
fr.onload = function(e2)
{
      backgroundimage = new Image();
      backgroundimage.src=e2.target.result;
     var context = document.getElementById('myCanvas').getContext('2d');
     context.canvas.width = backgroundimage.width;
     context.canvas.height = backgroundimage.height;
     context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);


};
    fr.readAsDataURL(filename);
}



window.onload=function(){
var s = document.getElementById("fontsize");
s.value="48";
document.getElementById('loadpicture').addEventListener('change', aFileIsLoaded, false);
backgroundimagemode=NONE;
carpeInit();
update();
}

before, this images were called like this, and files were selected from desktop

<input type="file" name="back" id="loadpicture" src="myimage.png" >

and now I'm trying to load an image in the same page with this:

<img src="myimage.png" name="back" id="loadpicture" onclick="aFileIsLoaded()">

but I'm getting this error:

Uncaught TypeError: Cannot read property 'target' of undefined 

any help will be appreciated

I'm trying to change file upload image to select or click on image on the same page in this canvas related script.

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];
        var fr = new FileReader();
fr.onload = function(e2)
{
      backgroundimage = new Image();
      backgroundimage.src=e2.target.result;
     var context = document.getElementById('myCanvas').getContext('2d');
     context.canvas.width = backgroundimage.width;
     context.canvas.height = backgroundimage.height;
     context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);


};
    fr.readAsDataURL(filename);
}



window.onload=function(){
var s = document.getElementById("fontsize");
s.value="48";
document.getElementById('loadpicture').addEventListener('change', aFileIsLoaded, false);
backgroundimagemode=NONE;
carpeInit();
update();
}

before, this images were called like this, and files were selected from desktop

<input type="file" name="back" id="loadpicture" src="myimage.png" >

and now I'm trying to load an image in the same page with this:

<img src="myimage.png" name="back" id="loadpicture" onclick="aFileIsLoaded()">

but I'm getting this error:

Uncaught TypeError: Cannot read property 'target' of undefined 

any help will be appreciated

• javascript
• file-upload
• filereader

1 Answer 1

You are calling a custom function:

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];

This function expects an Event object instance, of a file input change event, to be passed as its first and only argument. You do not pass this parameter e1 in your onclick handler

 onclick="aFileIsLoaded()">

The workaround is to use DOM look-up to look the element in the question to read its files

 var filename = document.getElementById('loadpicture').files[0]

As the example lacks HTML code the answer might not be plete.

More information abouts the events

https://developer.mozilla/en-US/docs/DOM/element.addEventListener