Tutorial by Examples

Make sure to have a file input on your page: <input type="file" id="upload"> Then in JavaScript: document.getElementById('upload').addEventListener('change', readFileAsString) function readFileAsString() { var files = this.files; if (files.length === 0) { ...

Reading the contents of a file within a web application can be accomplished by utilizing the HTML5 File API. First, add an input with type="file" in your HTML: <input type="file" id="upload"> Next, we're going to add a change listener on the file-input. This e...

The blob.slice() method is used to create a new Blob object containing the data in the specified range of bytes of the source Blob. This method is usable with File instances too, since File extends Blob. Here we slice a file in a specific amount of blobs. This is useful especially in cases where yo...

function downloadCsv() { var blob = new Blob([csvString]); if (window.navigator.msSaveOrOpenBlob){ window.navigator.msSaveBlob(blob, "filename.csv"); } else { var a = window.document.createElement("a"); a.href = window.URL.createObjectURL(blob, { ...

The HTML5 file API allows you to restrict which kind of files are accepted by simply setting the accept attribute on a file input, e.g.: <input type="file" accept="image/jpeg"> Specifying multiple MIME types separated by a comma (e.g. image/jpeg,image/png) or using wild...

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...