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, Jul 15 '13 at 16:22
I just figured that's the most intuitive way for the user to insert duplicate images. — user2584267, Jul 15 '13 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, Jul 15 '13 at 16:47
I don't determine this myself. The image uploader just won't upload the image again if it's already been uploaded. I didn't write any code that caused this and I don't know why it happens. — user2584267, Jul 17 '13 at 16:57

score 1 · Accepted Answer · answered Jul 23 '13 at 03:52

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.

Upload the same image file twice - Javascript

1 Answers1