title: Image upload with Drag & Drop HTML
body: <p>Hi I have a problem with the drag and drop, I want to extend the size of input at the entire father's div
  I don't know why but the input is set under the drag and drop div.
  Anyone can help me?
  <a href="https://i.stack.imgur.com/QTWfQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QTWfQ.png" alt="enter image description here"></a></p>
  
  <p>I made a fiddle but it doesn't work...
  <a href="https://jsfiddle.net/Porcy/jmbcdLbo/" rel="nofollow noreferrer">https://jsfiddle.net/Porcy/jmbcdLbo/</a></p>
  
  <pre><code>        .uploader{
        text-align: center;
        padding: 1em 0;
        margin: 1em 0;
        color: #555;
        border: 2px dashed #888;
        border-radius: 7px;
        cursor: default;
      }
      #filePhoto{
          position: absolute;
          opacity:0;
          cursor:pointer;
      }
  
  &lt;div onclick="$('#filePhoto').click()" class="uploader"&gt;
                          click here or drag here your images for preview and set userprofile_picture data
                          &lt;input type="file" size="32" name="userprofile_picture"  id="filePhoto" /&gt;
                        &lt;/div&gt;
  
  
        var imageLoader = document.getElementById('filePhoto');
        imageLoader.addEventListener('change', handleImage, false);
  
    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
  
            $('#blah').attr('src',event.target.result);
        }
        reader.readAsDataURL(e.target.files[0]);
    }
  </code></pre>