Thanks to visit codestin.com
Credit goes to github.com

Skip to content

vbosh/filereader.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

filereader.js
A small library independant wrapper for the JavaScript FileReader interface
Developed in conjunction with a project of mine, http://instantsprite.com, a browser based CSS Sprite Generator which required this functionality.

See http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface for basic information
See http://dev.w3.org/2006/webapi/FileAPI/#event-summary for details on Options/on.* callbacks

Usage:
FileReaderJS.setupInput(input, opts);
FileReaderJS.setupDrop(div, opts); 

If you have jQuery:
$(input).fileReaderJS(opts);

Options:
	readAsMap: A collection taking key as a string that will be matched with regex against
		file types and the type to read as.  If no match is found, it will use readAsDefault.
		The default map is:
		{
			'image/*': 'DataURL',
			'text/*' : 'Text'
		}
	readAsDefault: 'ArrayBuffer' | 'BinaryString' (default) | 'Text' | 'DataURL' 
	accept: A regex string to match the contenttype of a given file.
			For example: 'image/*' to only accept images.
			on.skip will be called when a file does not match the filter.
	dragClass: A CSS class to add onto the element called with setupDrop while dragging
	on: 
		loadstart: function(e, file) { }
		progress: function(e, file) { }
		load: function(e, file) { }
		abort: function(e, file) { }
		error: function(e, file) { }
		loadend: function(e, file) { }
		beforestart: function(file) { } Called before a file is passed to the FileReader.  Return false to prevent processing.  This is used along with the 'accept' parameter to skip a file (ex: an image is too big to process).  This wouldn't be needed, except that Chrome sometimes crashes when calling abort(): http://code.google.com/p/chromium/issues/detail?id=60979
		skip: function(file) { } Called only when a read has been skipped because of the accept string
		groupstart: function(group) { } 
		groupend: function(group) { } 

Parameters to events:
	e - the native ProgressEvent created by the FileReader
	file - an extension of the original File object.  See W3 link above for all native parameters.  Here are the extra fields 
		file.extra = { 
			fileID: a generated int id for this file.
			groupID: the group that it belongs to
			nameNoExtension: 'myImage' instead of 'myImage.png'
			extension: 'png' instead of 'myImage.png'
			prettySize: '46.47' kb instead of 47585 (size field)
		}
	
	group: simple grouping of files.  Each time a change event or drop even happens and a FileList is created, all of these files are stored inside a group object.
		groupID: a generated int id for this group
		files: the FileList associated with the group
		started: the Date the group was recieved as input
		ended: the Date all files in the group finished loading
	
What it isn't:
* Completely cross browser - Chrome 6+, Firefox 3.6+, are the only current versions that support the File API. Safari 5.*+ (future releases) are planning on it.

Future changes (hopefully):
* Once FileReaderSync in implemented in browsers, provide this as an option to provide a non-blocking way to read files using Web Workers.  See http://www.w3.org/TR/FileAPI/#FileReaderSync and https://bugs.webkit.org/show_bug.cgi?id=41567.

Any contributions welcome.  This plugin is open source under the MIT License.
Author: Brian Grinstead

About

A lightweight wrapper for the JavaScript FileReader interface

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published