Javascript/Jquery JSON File Upload

Question

I have to create a html list with one li name import . On back i have create input type ="file" which will be hidden .

If user click on import it should fire file upload from back using .click()[![enter image description here][1]][1].

Once the use select the .json file it can be of any name ..

Then On click of open button of file upload it should save the json and pass the json object with an event dispatcher . I have create event dispatcher but not able to get json

Issue : I am not able to save the json object using .onChange and also .onChange work single time then i have to refresh then it work again.

Requirement: On click of import button, hidden file import 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 getjson but it if for single file name .

   <!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(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);

 });

 });
</script>
</head>

<body>
<input type='file' id='import' style = "display:none" accept='.json ' aria-hidden="true" >
<ul>
<li>
<button id="importLink" >import</button>
</li>
</ul>




</body>
</html>

Please don't post images of your code, it's way better to post the actual code itself. — Carsten Løvbo Andersen, Oct 09 '18 at 12:49
It seems like you want to read the JSON of a file chosen using a file input. As such you don't need AJAX, but a FileReader: https://stackoverflow.com/q/23344776/519413 — Rory McCrossan, Oct 09 '18 at 12:55
On change work once then i have to reload the page to make it work again.. — app_dev, Oct 09 '18 at 13:05

Sumesh TG · Answer 1 · 2018-10-09T13:31:07.323

$(document).ready(function(){
   $("#importLink").click(function(){
      $("#import").click();   
   });
   function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}
    $("#import").on('change',function(e){
      var file =  e. target. files[0];
      var path = (window.URL || window.webkitURL).createObjectURL(file);
readTextFile(path, function(text){
    var data = JSON.parse(text);
    console.log(data);
    //Your ajax call here.
      });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="file" id="import" style="display:none" accept='.json' aria-hidden="true" >
<ul>
 <li id="importLink">import</li>
 </ul>
 <output id="list"></output>
 <div id="name">list</div>
  <div id="age">list</div>

Read file from e. target. files[0];

{ "first_name" : "hello", "last_name" : "work", "online" : true } — app_dev, Oct 09 '18 at 13:10

score 0 · Answer 2 · answered Oct 09 '18 at 12:59

0

Off what I can see, you are missing an argument list for your import onChange listener.

In the first image, you are calling $'#import').click() -- you are missing the leading (

you should be getting a javascript error when running the code you mentioned, since you don't include at least an empty argument list when the file input changes, though I could be wrong.

answered Oct 09 '18 at 12:59

Jeremi G

405
2
8

yes i fixed it .. share the code also.. now how to get json i m not sure – app_dev Oct 09 '18 at 13:04
ReferenceError: WindowDispatcher is not defined – Jeremi G Oct 09 '18 at 13:09

Javascript/Jquery JSON File Upload

2 Answers2