Div that acts as file upload?
<p>I simply want to make an upload or something like browse on the div itself like act as a file input and trigger its function but my problem was i'm new to java script and quite embarrassed myself for brainstorming for almost an hour and looking for the same problem on the internet. </p>

<p>So i don't have any other choice but to ask question here<br><br><br></p>

<p>my code<br></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;script type=""&gt;
     
    $('#pic1').click(function (Upload) {
       $('#fileToUpload').click();
    });
    
    &lt;/script&gt;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="pic1" style="border:1px solid white;width:200px;height:150px;float:left;margin:10px;" onclick="Upload"&gt;
         &lt;input type="file" name="fileToUpload" id="fileToUpload" size="1" style="display:none;"&gt;
         
    
        &lt;/div&gt;


&lt;br&gt; while my file input is hidden inside the div&lt;br&gt;</code></pre>
</div>
</div>
</p>