Load a JSON file from user input

Question

I want to get and read a JSON file that would be uploaded by the user.

I created the html input file:

<div id="button_open" class="button">
    <span>Open a JSON file</span>
    <input id="input_open" class="input_file" type="file">
</div>

And now, I don't know how to load the data from the file. I only can get the filename.

Here is what I wrote:

$(document).ready(function(){
    $("#input_open").change(onOpenChange);
})

function onOpenChange(e) {
    var filname = $("#input_open").val();
    var fileContent = ... ?
    var jsonData = JSON.parse(fileContent);
}

Anyone knows how to get the file content?

Have a read: [Using files from web applications](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications) — emerson.marini, Dec 19 '14 at 10:26

score 4 · Answer 1 · answered Dec 19 '14 at 10:28

4

    <script>
 $(document).ready(function(){
        $("#input_open").change(onOpenChange);
    })

    function onOpenChange(e) {
        var filname = $("#input_open").val();
        var fileContent = getTxt();
        var jsonData = JSON.parse(fileContent);
    }
    getTxt = function (){

      $.ajax({
      url:'text.json',
      success: function (data){
          fileContent =data;           
          return data 
      }
      });
    }
    </script>

answered Dec 19 '14 at 10:28

the json file is not loaded from the url of the site, as it's uploaded. – superrache Dec 19 '14 at 10:50
you could able to refer that path as url of the file. – Dec 19 '14 at 10:51
OK, and maybe I have to replace 'text.json' by the filename? I will try. – superrache Dec 19 '14 at 10:53
Thanks, it works very well. I also have to extract the filename from the full path before calling ajax(). I post the complete solution. – superrache Dec 19 '14 at 11:20
you're welcome vote please :p – Dec 19 '14 at 11:29

score -3 · Accepted Answer · answered Dec 19 '14 at 11:22

Here is the solution I get with the help of Ameen:

    $(document).ready(function(){

    $("#input_open").change(onOpenChange);

})

function onOpenChange() {
    var filePath = $("#input_open").val();
    var startIndex = filePath.indexOf('\\') >= 0 ? filePath.lastIndexOf('\\') : filePath.lastIndexOf('/');
    var filename = filePath.substring(startIndex);
    if(filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }

    $.ajax({
        url: filename,
        success: onOpenLoad
    });
}

function onOpenLoad(fileContent) {
    var data = JSON.parse(fileContent);
    // do something with the data
}

I don't get it, you got the guy's answer, changed it to fit your exact code (his answer was working as a general idea, he couldn't foresee what your exact code or filenames looked like) and then selected your own answer as the correct one? — Luca Bezerra, Mar 06 '20 at 16:44

Load a JSON file from user input

2 Answers2