Open the File Upload Dialogue Box Onclick the Image

File upload dialog box not displaying onclick first time

One more solution with keeping layout as it is now, is to check not e.target (i.e. element that was clicked), but all applicable (all which's bounding box is applicable for click position) canvases:

$('.container').click(function(e) {
  // filtering out non-canvas clicks
  if (e.target.tagName !== 'CANVAS') return;

  // getting absolute points relative to container
  const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
  const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;

  const $canvasList = $(this).find('canvas');
  // moving all canvas parents on the same z-index
  $canvasList.parent().css({zIndex: 0});

    $canvasList.filter(function() { // filtering only applicable canvases
        const bbox = this.getBoundingClientRect();
        const canvasTop = bbox.top + window.scrollY;
        const canvasLeft = bbox.left + window.scrollX;
        return (
            absX >= canvasLeft && absX <= canvasLeft + bbox.width &&
            absY >= canvasTop && absY <= canvasTop + bbox.height)
    }).each(function () { // checking white in a click position
    const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
    const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
    const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
    if (pixel[3] === 255) {
      $(this).parent().css({zIndex: 2})
      target = this.id;
      console.log(target);
      setTimeout(() => {
        $('#fileup').click();
      }, 20);
    }
  })
});

Open file dialog and submit image by clicking an image

It's hard to trigger an input of type file by clicking on something else. The biggest issue that you will run into is that IE will see this as a security concern and might not let you do it (if the input is hidden). To get around this issue, you could "fade" the input behind the image, so that when the user clicks the image, they're actually clicking on the file input.

Your html could look something like this:

<div class="hiddenFileInputContainter">
    <img class="fileDownload" src="/images/ico_upload.png">
    <input type="file" name="fileUp" class="hidden" accept="image/*">
</div>

Then you would need to set the opacity of the input to zero, in order to let the image behind it be visible, without actually removing the input from the page:

input[type='file'].hidden
{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    -moz-opacity: 0;
    filter: Alpha(Opacity=0);
}

You would also need to set the dimensions for the image and the container:

img.fileDownload
{
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-block; 
    vertical-align: middle;
    margin: 0 4px 0 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

div.hiddenFileInputContainter
{
    position: relative;
    display: inline-block;
    width: 27px;
    height: 27px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

Notice that the input's dimensions are meant to overflow, so that no matter where you click on the container, you will hit the input inside it. The input is meant to be as large as possible and the actual dimensions of the button are set on the container and the image.

Once you've managed to open the dialog, submitting the form would only be a matter of doing this:

$("#fileUploadField").on("change", function() {
    $("#formId").submit();
});

Open file upload dialog on click of an icon

Just add an label tag and wrap input tag inside label and hide input and give it a id which will be used on label for attribute.

<label for="file">
  <i class="ion-images"></i>
  <input type="file" id="file" style="display: none" name="image" accept="image/gif,image/jpeg,image/jpg,image/png" multiple="" data-original-title="upload photos">
</label>

Is it Possible to make a button as File upload Button?

You can keep a <input type='file' hidden/> in your code and click it using javascript when the user clicks on the "Upload MB" button.

Check out this fiddle.

Here is the snippet.

document.getElementById('buttonid').addEventListener('click', openDialog);
function openDialog() {  document.getElementById('fileid').click();}

<input id='fileid' type='file' hidden/><input id='buttonid' type='button' value='Upload MB' />

<div class="boxed">
  <div class="input-group">
      <input id="spFile" class="form-control" name="spFile">
    <input type="file" class="filepicker">
  </div>
</div>

.filepicker{
    -webkit-appearance: none;
    position:absolute;
    top:1px;
    right:1px;
    width: 40px;
    height: 40px;
    text-indent: 100em;
    background: url('assets/images/maps/Browse.png');
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}