upload a file using imageUpload (javascript), probably sthg simple

Question

Today I upload a picture using a simple button (id: "imageUpload") to upload a file. Evthg works perfectly. A thumb of the picture is then visible in "thumb1".

I would like to upload a picture also by clicking the div "preview1".

Here is my code with what I tried :

<input type="file" id="imageUpload">

<div class="preview1 slide" onclick="document.getElementById('imageUpload').click();">
    <div id="thumb1" class="thumb"></div>
</div>

and the js :

new AjaxUpload('imageUpload', {
    action: "upload",
    name: 'userfile',
    onSubmit : function(file, extension){  
        do some work..  
    },
    onComplete: function(file, response) {
        do some work..
    }
});

Result :

When I click on "preview1", a window open to select a file : OKAY

but then the file is not uploaded (no thumb preview), and only the name of the file appear on the right of "imageUpload" :

Any idea ?

score 0 · Answer 1 · edited May 23 '17 at 12:31

If I am understanding you correctly, you are looking to have a picture thumbnail appear on file upload. This might help you

How to generate a thumbnail image after adding an image inside an input type="file" in a form and submitting them both on the same form

Recycled from user: Che-azeh:

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

upload a file using imageUpload (javascript), probably sthg simple

1 Answers1