Read local files and metadata using HTML5 without uploading them to the server

2 min


This quick guide explains the steps to Read local files and metadata using HTML5 without uploading them to the server.

HTML5 comes with an array of features which breaks away from traditional file reading, file upload method. It provides a FileReader object which provides you lots of functions to manipulate the local files in the user system without having them uploaded to the server. This provides great benefits when you need to perform file types checking, size, etc of user-uploaded content on the browser itself by reducing the load on your server.

Read local files and metadata using HTML5

The below example is based on HTML5, JQuery using the FileReader object. This simple example shows how to add an “INPUT” tag, read the file name, file size, file type, and read the content.

HTML

First, we will declare an INPUT tag to let the user choose a file using the ‘Browse’ button. Also, we will add some placeholder to display the file and its metadata.

<div class="example"><input id="myfile" name="myfiles" type="file">
 <p></p>
 <p id="fname"></p>
 <p id="fsize"></p>
 <p id="fdate"></p>
 <p id="fcontent"></p>
 </div>

Catch the Event

Then we will add some code to handle the event when the user chooses a file. It can be done using the ‘change’ event of the INPUT tag. As soon as the user chooses a file using Browse/Choose File button, the ‘change’ event gets triggered.

$(document).ready(function() {
  $("#myfile").change(function() {
  // Your code to handle the file
  });
  });

Now we caught the change event and its time to get hold of the file.

Hold the file and read its metadata

SEE ALSO:   JavaScript variable initialization

Once we get hold of the file, we can access all of its properties through ‘this’ or JQuery as below.

var thefile = $("#myfile").get(0).files[0];

Lets read some of the file properties and display on the screen.

Read the file using FileReader

Now it’s time to read the content of the file. HTML5 provides a FileReader interface that can be used to read a local file as text/binary/blob objects. In this example, we will read the file as a binary string.

Create a new instance of the FileReader interface using its constructor. Define a function to catch the reader’s onload event and get the file data through Filereader’s ‘result’ properties.

 var reader = new FileReader(); // Declare a new file reader
 reader.onload = function(e) {
 $("#fcontent").text("File Content: " + reader.result); // Show the file content
 }

We have declared all functions, it’s time to read the file by calling the readAsBinaryString method of FileReader.

 reader.readAsBinaryString(thefile);  // Read the file

Complete Code:

A simple JQuery HTML5 file read Demo using FileReader.

<script>
$(document).ready(function() {
  $("#myfile").change(function() {
 var thefile = $("#myfile").get(0).files[0];  //Get the file   $("#fname").text("File name: "+thefile.name); // Print the file name $("#fsize").text("Size: "+thefile.size + " bytes."); // Print the file size $("#fdate").text("Modified Date: "+thefile.lastModifiedDate.toLocaleDateString()); // Print the file size   var reader = new FileReader(); // Declare a new file reader reader.onload = function(e) { $("#fcontent").text("File Content: " + reader.result); // Show the file content
 }
 reader.readAsBinaryString(thefile);  // Read the file
     });
 });
  </script>

I hope this guide helped you to understand the concept and helped you to read local files and metadata using HTML5.


We bring the latest tech, software news and stuff that matters. Stay in touch via Telegram, Twitter, YouTube, and Facebook and never miss an update!

Join our Telegram channel and stay informed on the move.

Also Read


Like it? Share with your friends!

Arindam

Creator of debugpoint.com. All time Linux user and open-source supporter. Connect with me via Telegram, Twitter, LinkedIn, or send us an email.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x