JavaScript File API, Blobs and FileReaders Get the properties of the file

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

If you want to get the properties of the file (like the name or the size) you can do it before using the File Reader. If we have the following html piece of code:

<input type="file" id="newFile">

You can access the properties directly like this:

document.getElementById('newFile').addEventListener('change', getFile);

function getFile(event) {
    var files = event.target.files
        , file = files[0];

    console.log('Name of the file', file.name);
    console.log('Size of the file', file.size);
}

You can also get easily the following attributes: lastModified (Timestamp), lastModifiedDate (Date), and type (File Type)



Got any JavaScript Question?