File Access

The File API gives Web applications an access to the filesystem-level information about the files that the user decides to share with the application, i.e. size, MIME type, modification date, content, without sending the file to the server.

API glimpse

Returns a collection of file objects that were selected by the user using <input type="file">DOM element.
Returns the original name of the file, without the path.
Returns the file size in bytes.
Returns the file's MIME type.
Returns the file's last modification date.
Initiates a process of reading the file and encoding its content as text.
fileReader.addEventListener('load', listener)
An event fired when the reading operation has completed successfully. The data read is available via fileReader.result property.

Live Demo

Choose some files

Number of selected files: N/A

    • function getReadFile(reader, i) {
        return function () {
          var li = document.querySelector('[data-idx="' + i + '"]');
          li.innerHTML += 'File starts with "' + reader.result.substr(0, 25) + '"';
      function handleFiles(files) {
        document.getElementById('count').innerHTML = files.length;
        var target = document.getElementById('target');
        target.innerHTML = '';
        for (var i = 0; i < files.length; ++i) {
          var item = document.createElement('li');
          item.setAttribute('data-idx', i);
          var file = files[i];
          var reader = new FileReader();
          reader.addEventListener('load', getReadFile(reader, i));
          item.innerHTML = '<b>' + + '</b>, ' + file.type + ', ' + file.size + ' bytes, last modified ' + file.lastModifiedDate + '<br>';
    • <span class="btn btn-default btn-file">
          Choose some files <input type="file" onchange="handleFiles(this.files)" multiple>
      <p>Number of selected files: <b id="count">N/A</b></p>
      <ul id="target"></ul>
    • .btn-file {
          position: relative;
          overflow: hidden;
          margin: 10px;
      .btn-file input[type=file] {
          position: absolute;
          top: 0;
          right: 0;
          min-width: 100%;
          min-height: 100%;
          opacity: 0;
          outline: none;
          background: #fff;
          cursor: inherit;
          display: block;