Upload the same image file twice - Javascript

Question

I have an image uploader in my drawing application that I've written in Javascript. I want to allow the user to place multiple of the same image on the canvas. However, when I try to upload an image that's already on the canvas, nothing happens and a breakpoint in my event handler for the uploader never gets hit. What's going on and how can I fix it? Thanks!

Here's the code for my image handler:

function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
  var img = new Image();
  img.onload = function() {
    img.className = 'drag';
    img.style.left = 0;
    img.style.top = 0;
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10));
    images.push(img);
  }
  img.src = event.target.result;
 }
 reader.readAsDataURL(e.target.files[0]);
 };

why would you want to upload the same file more than once? Reuse the uploaded file! — Rene Pot
– Rene Pot, Commented Jul 15, 2013 at 16:22
I just figured that's the most intuitive way for the user to insert duplicate images. — user2584267
– user2584267, Commented Jul 15, 2013 at 16:24
How would the user indicate, other than uploading the same image again, that they want two of one image on the canvas then? — user2584267
– user2584267, Commented Jul 15, 2013 at 16:47

J_A_X · Accepted Answer · 2013-07-23 03:52:08Z

1

I do tend to agree with Rene Pot to use the same image again (duplicate button), but you still can't prevent the user from inserting/loading the same image again. I've encountered the problem a while ago and used this bit of code to check if the image is already cached (if cached, there is no load, hence the onload won't fire either).

var img = new Image();
img.src = event.target.result;

var insertImage = function() {
    img.className = 'drag';
    img.style.left = 0;
    img.style.top = 0;
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10));
    images.push(img);
  }

if(img.complete){
   img.onload = insertImage;
} else {
   insertImage();
}

Hope that helps.

answered Jul 23, 2013 at 3:52

J_A_X

12.8k1 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload the same image file twice - Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related