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
– Carsten Løvbo Andersen, Commented Oct 9, 2018 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: stackoverflow.com/q/23344776/519413 — Rory McCrossan
– Rory McCrossan, Commented Oct 9, 2018 at 12:55
On change work once then i have to reload the page to make it work again.. — app_dev
– app_dev, Commented Oct 9, 2018 at 13:05

Sumesh TG · Accepted Answer · 2018-10-09 13:31:07Z

1

$(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];

edited Oct 9, 2018 at 13:31

answered Oct 9, 2018 at 13:05

Sumesh TG

2,5732 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

app_dev Over a year ago

{ "first_name" : "hello", "last_name" : "work", "online" : true }

Jeremi G · Accepted Answer · 2018-10-09 12:59:15Z

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 9, 2018 at 12:59

Jeremi G

4212 silver badges8 bronze badges

2 Comments

app_dev Over a year ago

yes i fixed it .. share the code also.. now how to get json i m not sure

Jeremi G Over a year ago

ReferenceError: WindowDispatcher is not defined

Collectives™ on Stack Overflow

Javascript/Jquery JSON File Upload

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related