title: Javascript/Jquery JSON File Upload
body: <p>I have to create a html list with one <code>li</code> name  <strong>import</strong> . On back i have create <code>input type ="file"</code> which will be <strong>hidden</strong> . </p>
  
  <p>If user click on <strong>import</strong>  it should fire file upload from back using <code>.click()</code>[![enter image description here][1]][1].</p>
  
  <p>Once the use select the .<code>json</code> file it can be of any name ..</p>
  
  <p>Then On click of <strong>open button</strong> of file upload it should save the <code>json</code> and pass the <code>json</code> object with an event dispatcher . I have create event dispatcher but not able to get <code>json</code> </p>
  
  <p>Issue : I am not able to save the json object using <code>.onChange</code> and also <code>.onChange</code> work single time then i have to refresh then it work again.</p>
  
  <p>Requirement: On click of <strong>import button</strong>, hidden file <strong>import</strong> will fire then on selecting the json file of any name (json filem can be of any name) function will save the json object and json object will be sent using iframe using event dispatcher . 
  Issue:: Not able to save the json or get the json . I tried <code>getjson</code> but it if for single file name . </p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;meta charset="UTF-8"/&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $('button').click(function (){
  
       $('#import').click();
  
  
  
  
      });
  
  
  $('#import').on('change',function () {
  
    // not able to get json in a json object on selection of json file 
   var getJson = $('#import')[0].files;
  
  
  // dispatcher just take json object and it will send to iframe . 
  
    // WindowDispatcher("Send Json", getJson);
  
   });
  
   });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;input type='file' id='import' style = "display:none" accept='.json ' aria-hidden="true" &gt;
  &lt;ul&gt;
  &lt;li&gt;
  &lt;button id="importLink" &gt;import&lt;/button&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>