Uploading a JSON file and using it

Related searches

How can I upload a JSON file on some click on a button on my web page say "import", and use it to store in a variable to use and update it using JavaScript.

I have gone through the other posts but could not find any answer.

I am saving the JSON variable using this function:

function save(filename, data){

    if(!data) {
        alert('error : No data')
        return;
    }

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }

This is working fine and it downloads the file on clicking another button say "export". How upload this file back and make a JSON variable of this file data?

Without server side code, your best approach may be to provide a textarea element for the user to copy/paste the JSON into, and then parse it using JSON.parse.

You could even go as far as to use something like Ace Editor to provide syntax highlighting for JSON - you can see it in action on the Ace Editor Kitchen Sink Demo - select JSON from the dropdown list in the top left.


Edit:

Turns out I was wrong. Here is a fiddle demonstrating the FileReader in use, which is exactly what you need:

https://jsfiddle.net/Ln37kqc0/

Here is the code:

Javascript:

document.getElementById('import').onclick = function() {
    var files = document.getElementById('selectFiles').files;
  console.log(files);
  if (files.length <= 0) {
    return false;
  }

  var fr = new FileReader();

  fr.onload = function(e) { 
  console.log(e);
    var result = JSON.parse(e.target.result);
    var formatted = JSON.stringify(result, null, 2);
        document.getElementById('result').value = formatted;
  }

  fr.readAsText(files.item(0));
};

HTML:

<input type="file" id="selectFiles" value="Import" /><br />
<button id="import">Import</button>
<textarea id="result"></textarea>

Uploading a JSON file and using it, Without server side code, your best approach may be to provide a textarea element for the user to copy/paste the JSON into, and then parse it using JSON. parse� Without server side code, your best approach may be to provide a textarea element for the user to copy/paste the JSON into, and then parse it using JSON.parse.. You could even go as far as to use something like Ace Editor to provide syntax highlighting for JSON - you can see it in action on the Ace Editor Kitchen Sink Demo - select JSON from the dropdown list in the top left.

I have got a way to use the uploaded json file, here is the way i found.

$("#inputFile").change(function(e) {
    onChange(e);
});

function onChange(event) {
    var reader = new FileReader();
    reader.onload = onReaderLoad;
    reader.readAsText(event.target.files[0]);
}

function onReaderLoad(event){
    //alert(event.target.result);
    var obj = JSON.parse(event.target.result);
    alert(obj);
}

JSON file upload, The generator used the socket connection ID to uniquely identify uploaded files on the server which worked good for a single socket connection� Hi, I am trying to send a POST request using jQuery Ajax, where I would like to upload a file and some json data. Please find below code, var logoImg

Basic upload File:

    <input id="contentFile" type="file" accept="application/json" />
  document.getElementById('contentFile').onchange = function(evt) {
        try {
            let files = evt.target.files;
            if (!files.length) {
                alert('No file selected!');
                return;
            }
            let file = files[0];
            let reader = new FileReader();
            const self = this;
            reader.onload = (event) => {
                console.log('FILE CONTENT', event.target.result);
            };
            reader.readAsText(file);
        } catch (err) {
            console.error(err);
        }
    }
                     ` 

How to import Json file on server free|| Upload JSON file on server , How to import Json file on server free|| Upload json file on server || Android Studio Tutorial 14 Duration: 10:19 Posted: Jul 18, 2019 A JSONPaths file is a text file that contains a single JSON object with the name "jsonpaths" paired with an array of JSONPath expressions. Loading the json file. 0, upload file in MVC. Open your project folder in any of your favourite IDE editor (my favourite is Visual Studio Code), and create “. This sample serializes JSON to a file.

You may want to add the draggable option

Firs create your HTML

<div class="drag" id="drag_area">
        <input class="box_file disabled" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
        <label for="file"><strong>Choose save file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
</div>

Than write out your JS

$("#drag_area").on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
    e.preventDefault();
    e.stopPropagation();
})
.on('dragover dragenter', function () {
    $("#drag_area").addClass('dr_active');
    // this is needed if you wish to style your drag area on drag events
})
.on('dragleave dragend drop', function () {
    $("#drag_area").removeClass('dr_active');
    // this is needed if you wish to style your drag area on drag events
})
.on('drop', function (e) {
    let droppedFiles = e.originalEvent.dataTransfer.files;
    let reader = new FileReader()
    reader.readAsDataURL(droppedFiles[0])
    reader.onloadend = function () {
    $.ajax({
        url: reader.result,
        success: function (data) {
          console.log(JSON.parse(data)); // This is your JSON
        },
        error: function (request, error) {
            cliLog(2, "Upload", "Cant upload save file")
        }
    });
}
}),

Pull from JSON file, This step can pull JSON files. Parabola cannot pull updates to this file from your computer without you manually updating the file. When you upload your JSON file,� If you want to upload json file, you could create a FTP or convert the site to FTP site, so that you could use IIS ftp to upload the json file. 3, If you are using Angular version 4. File upload and sending data to backend using angular js Here we are going to discuss about uploading a file and sending to backend.

Uploading JavaScript objects as JSON-files to Firebase Storage , It is indeed possible and pretty simple. This tutorial will show you, how to upload your JavaScript objects into your storage bucket as JSON-files� In this article, we are going to learn the uploading process of the CSV and Json file into a Snowflake stage using SnowSQL client. Once the file is uploaded into the Stage, then we can perform bulk copy operation to load the data from the file to a Snowflake table.

How to upload a file and post JSON data in the same request , If the request was a valid multipart/form-data it will automatically be accessible from Request.Files . The HTTP Request is also invalid, you� In order to begin using JSON, you first have to have a location where a file is available for you to import into Power BI. The JSON file can be on a local file directory or it can actually be linked to via a URL. Step 1 of the process is to start Power BI Desktop.

Thanks to Craig answer, I found the solution. I will post both code ( client and server ) to help in case of future use. The CLient server is uploading file and Json in the "form" feature of flask. Then some ast and some dict to make the Payload clearer ( I know this is ugly way, but this is the best scholar approach ) On Client side :

Comments
  • Without a server side code?
  • yes without the server side code. @PraveenKumar
  • a fiddle provided will be much better