How to Access Data of Uploaded JSON File

How to access data of uploaded JSON file?

You will need an HTML5 browser, but this is possible.

(function(){        function onChange(event) {        var reader = new FileReader();        reader.onload = onReaderLoad;        reader.readAsText(event.target.files[0]);    }
    function onReaderLoad(event){        console.log(event.target.result);        var obj = JSON.parse(event.target.result);        alert_data(obj.name, obj.family);    }        function alert_data(name, family){        alert('Name : ' + name + ', Family : ' + family);    }     document.getElementById('file').addEventListener('change', onChange);
}());

<input id="file" type="file" />
<p>Select a file with the following format.</p><pre>{  "name": "testName",  "family": "testFamily"}    </pre>

How to access uploaded json file google colab

If you upload just 1 file. You can get the content from its values()

data = next(iter(uploaded.values()))

Then, you can convert json string to dict

d = json.loads(data.decode())

Here's an example notebook

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.

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>

How to read an external local JSON file in JavaScript?

You cannot make a AJAX call to a local resource as the request is made using HTTP.

A workaround is to run a local webserver, serve up the file and make the AJAX call to localhost.

In terms of helping you write code to read JSON, you should read the documentation for jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON/

React app - upload and read JSON file into variable without a server?

Have an input of type file and maintain a state and update the state upon onChange

working demo is here

Code snippet

import React, { useState } from "react";

export function Upload({ children }) {
  const [files, setFiles] = useState("");

  const handleChange = e => {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0], "UTF-8");
    fileReader.onload = e => {
      console.log("e.target.result", e.target.result);
      setFiles(e.target.result);
    };
  };
  return (
    <>
      <h1>Upload Json file - Example</h1>

      <input type="file" onChange={handleChange} />
      <br />
      {"uploaded file content -- " + files}
    </>
  );
}

FastAPI - How to read an json file while using UploadFile

You can use the standard json module to parse the content by using json.load()--(Doc) from an uploaded JSON file as

from fastapi import FastAPI, File, UploadFile
import json
app = FastAPI(debug=True)

@app.post("/uploadfiles/")
def create_upload_files(upload_file: UploadFile = File(...)):
    json_data = json.load(upload_file.file)
    return {"data_in_file": json_data}

Thus, you will have the JSON contents in your json_data variable.

Alternatively, you can use json.loads()--(Doc) function as

json_data = json.loads(upload_file.file.read())

---

Related Topics