Upload file JSON JavaScript

This morning, a student of mine asked me how to use JavaScript to import a JSON file and do something with the data in it. I thought Id write an article about it, because its a really cool browser feature!

Lets dig in.

An example

For this article, were going to look at a form element with the #upload ID.

It contains a single field, #file, with a type of file. Fields with this type allow you specify an accept parameter, with a comma-separated list of accepted file types. For our purposes, were going to restrict our uploads to only .json files.

File to upload Upload

Ill be using a simple wizard.json file for testing.

{ "name": "Merlin", "age": "old AF", "spells": ["Dancing brooms", "Transform into animal"] }

You can download the source code for todays lesson on GitHub.

Listening for uploads

To get started, were going to use some DOM manipulation fundamentals to detect when the user submits a file.

First, well use the document.querySelector() method to get the #upload and #file elements, and save them to the form and file variables, respectively.

// Get the form and file field let form = document.querySelector('#upload'); let file = document.querySelector('#file');

Then, well use the Element.addEventListener() method to listen for submit events on the form element. Well use a handleSubmit() function as the callback function.

// Listen for submit events form.addEventListener('submit', handleSubmit);

Inside the handleSubmit() function, the first thing well do is use event.preventDefault() to stop the form from reloading the page.

/** * Handle submit events * @param {Event} event The event object */ function handleSubmit (event) { // Stop the form from reloading the page event.preventDefault(); }

Next, well check that the file field has an actual file to process using the file.value property, then checking its length property.

If theres no file, well use the return operator to end the callback function.

/** * Handle submit events * @param {Event} event The event object */ function handleSubmit (event) { // Stop the form from reloading the page event.preventDefault(); // If there's no file, do nothing if (!file.value.length) return; }

Now, were ready to actually upload the file.

Uploading and processing the JSON file with JavaScript

The FileReader API is an asynchronous set of methods that let you process and read the content of files.

The first thing were going to do is use the new FileReader() constructor to create a new FileReader instance, and assign it to the reader variable.

/** * Handle submit events * @param {Event} event The event object */ function handleSubmit (event) { // Stop the form from reloading the page event.preventDefault(); // If there's no file, do nothing if (!file.value.length) return; // Create a new FileReader() object let reader = new FileReader(); }

To actually read the file, we can use the FileReader.readAsText() method.

We call it on our reader, and pass in the file to read as an argument. We can access the file using the files property on our file field. This returns an array (since [type="file"]) inputs can support multiple files.

Well use bracket notation to grab the first (and in our case, only) file.

/** * Handle submit events * @param {Event} event The event object */ function handleSubmit (event) { // Stop the form from reloading the page event.preventDefault(); // If there's no file, do nothing if (!file.value.length) return; // Create a new FileReader() object let reader = new FileReader(); // Read the file reader.readAsText(file.files[0]); }

This API is asynchronous, so we need to attach an onload event handler to the reader object. This will run whenever the reader reads a file.

This needs to be declared before we actually read the file.

To keep our code a bit more organized, well use a named function: logFile(). We dont want it to run immediately, so we leave the parentheses (()) off of it when assigning it to the event.

/** * Handle submit events * @param {Event} event The event object */ function handleSubmit (event) { // Stop the form from reloading the page event.preventDefault(); // If there's no file, do nothing if (!file.value.length) return; // Create a new FileReader() object let reader = new FileReader(); // Setup the callback event to run when the file is read reader.onload = logFile; // Read the file reader.readAsText(file.files[0]); }

The logFile() function receives an implicit event argument from the FileReader object, so well add it as a parameter.

The event.target.result property will be a stringified version of the uploaded JSON file. We can pass it into the JSON.parse() method to get a JSON object form it.

For our purposes, well log both the string and parsed JSON. You might want to use properties from the JSON file in your app, save it localStorage, or do something else with it (like send it along to an API).

/** * Log the uploaded file to the console * @param {event} Event The file loaded event */ function logFile (event) { let str = event.target.result; let json = JSON.parse(str); console.log('string', str); console.log('json', json); }

Now, whenever a user submits a JSON file, our code will read it and log it to the console.

Video liên quan

Related posts: