What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

File Access

The File API gives Web applications an access to the filesystem-level read-only 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.

The Native File System API, available in Google Chrome via origin trial in Spring 2020, aims to make it also possible to write into the file system to the handle chosen in the system-level file opening dialog by the user. The API is in its design phase, breaking changes are still expected.

API glimpse

File API

fileInputElement.files
Returns a collection of file objects that were selected by the user using <input type="file">DOM element.
file.name
Returns the original name of the file, without the path.
file.size
Returns the file size in bytes.
file.type
Returns the file's MIME type.
file.lastModifiedDate
Returns the file's last modification date.
const fileReader = new FileReader()
Creates an instance of a class responsible for reading the file content.
fileReader.readAsText(file)
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.
file.text()
Modern alternative for reading the file and encoding its content as text. Returns a Promise resolved with file content string.
file.arrayBuffer()
Returns a Promise resolved with file content represented as ArrayBuffer instance.

Native File System API (experimental)

const handle = await window.chooseFileSystemEntries(options)
Invokes the system-level file picker dialog for options given (i.e. for saving new file or picking files of specific type). Returns a Promise resolved with chosen file handle.
const file = await handle.getFile()
Returns a Promise resolved with chosen handle's File object, as in File API above.
const writer = handle.createWriter()
Returns a Promise resolved with handle's writer object, allowing to write data to the file.
writer.write(start, content)
Writes content to the stream.
writer.close()
Flushes the stream to the file system and closing it. Returns a Promise resolved when the stream has been closed.

Live Demo

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 readFiles(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));
    reader.readAsText(file);

    item.innerHTML = '<b>' + file.name + '</b>, ' + file.type + ', ' + file.size + ' bytes, last modified ' + file.lastModifiedDate + '<br>';
    target.appendChild(item);
  };
}

async function writeFile() {
  if (!window.chooseFileSystemEntries) {
    alert('Native File System API not supported');
    return;
  }
  
  const target = document.getElementById('target');
  target.innerHTML = 'Opening file handle...';
  
  const handle = await window.chooseFileSystemEntries({
    type: 'save-file',
  });
  
  const file = await handle.getFile()
  const writer = await handle.createWriter();
  await writer.write(0, 'Hello world from What Web Can Do!');
  await writer.close()
  
  target.innerHTML = 'Test content written to <b>' + file.name + '</b>.';
}
    • <div class="columns">
  <div class="column">
    <button class="btn-file">
      Choose some files to read<br>(File API) <input type="file" onchange="readFiles(this.files)" multiple>
    </button>
    
    <p>Number of selected files: <b id="count">N/A</b></p>
  </div>
  <div class="column">
    <button class="btn-file" onclick="writeFile()">
      Choose file to create or overwrite<br>(Native File System API)
    </button>
  </div>
</div>

<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;
}

    Resources

    Get in touch