HTML and CSS Reference
In-Depth Information
3. The client could choose to send a subset of a file to the server rather than the whole file,
therefore reducing bandwidth requirements.
All major web browsers now support the FileReader API.
In order to demonstrate the FileReader API, we are going to allow users to import a set of
tasks from a comma separated (CSV) file. The CSV file will contain three columns:
1. Task description.
2. Date required by.
3. Task category.
The CSV file will contain a single row header, and all other lines will contain tasks.
The following is an example CSV file (this is available in the chapter13 zip file from the
topic's web site):
Task,Required By,Category
Prepare slide show,2013-11-20,Work
Attend Product Lanuch,2013-11-21,Work
As a first step, we will provide an import option on the main screen. Add the following
code immediately before the closing
main
tag in tasks.html:
<section id="csvImport">
<div>
<label for="task">Import tasks from a CSV file</label>
<input type="file" id="importFile" name="importFile"/>
</div>
</section>
We will next add a function to tasks-controller.js that will listen for a change event on the
file input field, and then read the file contents. Add this in the private section of the tasks-
controller.js file:
function loadFromCSV(event) {
var reader = new FileReader();
reader.onload = function(evt) {
console.log(evt.target.result);
};
reader.onerror = function(evt) {
errorLogger('cannot_read_file', 'The file specified cannot be read');
