How to Retrieve File Metadata

Web APIs are simply amazing when you want to build web applications. Perhaps it becomes obvious when your application is highly user focused. Today, I will discuss about how we can access file metadata for a selected file in HTML file input.

Think of about a scenario where the user need to upload certain type of files and the system/app need to know the type, name, size and other information of about the file. We can use a simple JavaScript function to grab such information and process rest of the procedure based on the information received.

<input type="file" id="upload" onchange="getInfo(this)">
<script>
function getInfo(e) {
   var fileData = e.files['0'];
   console.log(fileData); }
</script>

Use this snippet within a HTML file and try selecting a file from the “Choose File” input field. From your console log, you should be able to find that “File” interface has provided some metadata of this particular object once a file has been selected.

Console Log File APIConsole Log from File API.

You can also add an event listener just in case if you think that you are comfortable that way. It can be something like this:

<input type="file" id="upload">
<script>
   var fileInput = document.getElementById('upload');
   fileInput.addEventListener('change', function() {
      var fileData = fileInput.files['0'];
      console.log(fileData); });
</script>

Regardless, how you want to proceed, you can access them using number of methods like this depending on your requirement.

<script>
function getInfo(e) {
   var fileData = e.files['0'];
   console.log(fileData.name);
   console.log(fileData.size);
   console.log(fileData.type);
   console.log(fileData.lastModified);
   console.log(fileData.lastModifiedDate); }
</script>

However, it is important to remember that these methods are inherited from “Blob” interface as File interface does not define any methods by default.

Multiple Files

Up until now, whatever we discussed applied to single individual file as you have seen we used “files['0']” instead of “files” only. Obviously, you have to allow users to select multiple files to begin with. Here is how you can do it.

<input type="file" id="upload" onchange="getInfo(this)" multiple>
<script>
function getInfo(e) {
   var fileData = e.files;
   for (var i = 0; i < fileData.length; i++) {
      console.log(fileData[i]); }
}
</script>

To access individual objects properties, you can call the methods like this:

console.log(fileData[i].name);

End of the day, it all comes down to your requirements. I hope you would find this snippet useful.

References: W3C File, File API

Today In History

  •  
  •  

Comment

Leave a Reply

Note: Convet HTML, PHP, JavaScripts from Postable, before posting from comment section.
License: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution. Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.