pgarciacamou/FileHandler.js

## FileHandler.js
// ----
// CONSTRUCTOR
//
// name: FileHandler
//  Handles input files and reads the data.
//  Once the file is loaded it will execute the callback with that file.
function FileHandler(options){
  if(!(window.File && window.FileReader && window.FileList && window.Blob)) throw new Error("File APIs not supported in current browser");
  this.elem = options.element;
}
FileHandler.prototype = {
  constructor: FileHandler,

  // ----
  // PUBLIC METHOD
  // ** onload **
  //
  // Sets the callback for the data collected from the files
  //
  // PARAMETERS
  //  callback :: function that receives each parsed file.
  onload: function(callback){
    if(this.listener) this.elem.removeEventListener("change", this.listener);
    this.callback = callback;
    this.listener = this.elem.addEventListener("change", this._handleChange.bind(this));
  },

  // ----
  // PRIVATE METHOD
  // ** _handleChange **
  //
  // Handles load of files and parsing.
  // Also, executes the callback when the data is parsed.
  //
  // PARAMETERS
  //  event :: receives the Event from the browser.
  //           We use this event to get the files selected
  //
  // CALLBACK ARGUMENTS
  //  data  :: Array of Objects (each row in the file is a JavaScript object in the Array)
  //  index :: index of the file starting from 0.
  //           This index is related to the files selected.
  //           It can have a different order than the expected.
  //  file  :: actual file
  //           You can gather information like name, type of file and bytes.
  //           Filtering by name is more reliable than filtering by index.
  _handleChange: function(event){
    Array.prototype.forEach.call(event.target.files, function(file, index){
      var reader = new FileReader();
      reader.addEventListener("load", function(e) {
        this.data = e.target.result.trim().split("\n").map(function(value, index, array){
          return JSON.parse(value);
        });
        this.callback.call(this, this.data, index, file);
      }.bind(this));
      reader.readAsText(file);
    }.bind(this));
  }
};

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Read File</title>
</head>
<body>
  <section class="container">
    <input type="file" id="file-input" multiple>
  </section>
  <script type="text/javascript" src="./FileHandler.js"></script>
  <script type="text/javascript" src="./readfile.js"></script>
</body>
</html>

## readfile.js
// ----
// PUBLIC FUNCTION
// ** dataReceiver **
//
// Used as callback for the FileHandler
// Shows how the parameters can be used.
var dataBuffer = [];
function dataReceiver(data, index, file){
  dataBuffer.push(data);
  if(index > 100) return;
  console.log(file.name, index);
  console.log(data[0].gamma);
}

// ----
// PUBLIC FUNCTION
//
// Initializes the FileHandler instance and sets the callback.
function initFileHandler(){
  new FileHandler({
    element: document.querySelector("input#file-input")
  }).onload(dataReceiver);
}

// ----
// EVENT LISTENER
//
// JavaScript best practice
// Only start working when the Document Object Model (DOM) is loaded.
document.addEventListener("DOMContentLoaded", initFileHandler);
	// ----
	// CONSTRUCTOR
	//
	// name: FileHandler
	// Handles input files and reads the data.
	// Once the file is loaded it will execute the callback with that file.
	function FileHandler(options){
	if(!(window.File && window.FileReader && window.FileList && window.Blob)) throw new Error("File APIs not supported in current browser");
	this.elem = options.element;
	}
	FileHandler.prototype = {
	constructor: FileHandler,

	// ----
	// PUBLIC METHOD
	// onload
	//
	// Sets the callback for the data collected from the files
	//
	// PARAMETERS
	// callback :: function that receives each parsed file.
	onload: function(callback){
	if(this.listener) this.elem.removeEventListener("change", this.listener);
	this.callback = callback;
	this.listener = this.elem.addEventListener("change", this._handleChange.bind(this));
	},

	// ----
	// PRIVATE METHOD
	// _handleChange
	//
	// Handles load of files and parsing.
	// Also, executes the callback when the data is parsed.
	//
	// PARAMETERS
	// event :: receives the Event from the browser.
	// We use this event to get the files selected
	//
	// CALLBACK ARGUMENTS
	// data :: Array of Objects (each row in the file is a JavaScript object in the Array)
	// index :: index of the file starting from 0.
	// This index is related to the files selected.
	// It can have a different order than the expected.
	// file :: actual file
	// You can gather information like name, type of file and bytes.
	// Filtering by name is more reliable than filtering by index.
	_handleChange: function(event){
	Array.prototype.forEach.call(event.target.files, function(file, index){
	var reader = new FileReader();
	reader.addEventListener("load", function(e) {
	this.data = e.target.result.trim().split("\n").map(function(value, index, array){
	return JSON.parse(value);
	});
	this.callback.call(this, this.data, index, file);
	}.bind(this));
	reader.readAsText(file);
	}.bind(this));
	}
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Read File</title>
	</head>
	<body>
	<section class="container">
	<input type="file" id="file-input" multiple>
	</section>
	<script type="text/javascript" src="./FileHandler.js"></script>
	<script type="text/javascript" src="./readfile.js"></script>
	</body>
	</html>
	// ----
	// PUBLIC FUNCTION
	// dataReceiver
	//
	// Used as callback for the FileHandler
	// Shows how the parameters can be used.
	var dataBuffer = [];
	function dataReceiver(data, index, file){
	dataBuffer.push(data);
	if(index > 100) return;
	console.log(file.name, index);
	console.log(data[0].gamma);
	}

	// ----
	// PUBLIC FUNCTION
	//
	// Initializes the FileHandler instance and sets the callback.
	function initFileHandler(){
	new FileHandler({
	element: document.querySelector("input#file-input")
	}).onload(dataReceiver);
	}

	// ----
	// EVENT LISTENER
	//
	// JavaScript best practice
	// Only start working when the Document Object Model (DOM) is loaded.
	document.addEventListener("DOMContentLoaded", initFileHandler);