• Stars
    star
    414
  • Rank 100,845 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 13 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A lightweight wrapper for the JavaScript FileReader interface

FileReader.js

http://bgrins.github.com/filereader.js/

A small library independant wrapper for the JavaScript FileReader interface.

This plugin is open source under the MIT License. It was developed in conjunction with a CSS sprite generator project: http://instantsprite.com.

Specifications

Usage:

FileReaderJS.setupInput(document.getElementById('file-input'), opts);
FileReaderJS.setupDrop(document.getElementById('dropzone'), opts);
FileReaderJS.setupClipboard(document.body, opts);

If you have jQuery:

$("#file-input, #dropzone").fileReaderJS(opts);
$("body").fileClipboard(opts);

FileReaderJS.sync

Use the FileReaderSync object when available to load the files in a separate worker. false by default. This will cause only the load or error events to fire (there will be none of the other ProgressEvents, as the operation is synchronous).

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' | 'Text' | 'DataURL' (default)
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, and 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

Any contributions are welcome. Author: Brian Grinstead.

More Repositories

1

TinyColor

Fast, small color manipulation and conversion for JavaScript
JavaScript
4,917
star
2

devtools-snippets

A collection of helpful snippets to use inside of browser devtools
HTML
2,945
star
3

videoconverter.js

[UNMAINTAINED] Convert videos in your browser
JavaScript
2,342
star
4

spectrum

The No Hassle JavaScript Colorpicker
JavaScript
2,305
star
5

javascript-astar

A* Search / Pathfinding Algorithm in Javascript
JavaScript
1,307
star
6

ExpandingTextareas

jQuery plugin for elegant expanding textareas
JavaScript
262
star
7

bindWithDelay

jQuery Plugin For Delayed Event Execution
JavaScript
151
star
8

InstantSprite

A fast browser based CSS Sprite Generator
JavaScript
141
star
9

nativesortable

Use native drag and drop APIs to provide sortable items. No dependancies.
JavaScript
87
star
10

colorwheel-1k

HSV colorpicker entry for js1k
JavaScript
32
star
11

DrawWindow

A Javascript implementation for canvas.drawWindow
JavaScript
29
star
12

ui.anglepicker

A jQuery UI Angle Picker Widget
JavaScript
28
star
13

devtools-demos

JavaScript
18
star
14

browser-diff

Get the differences between text files
JavaScript
16
star
15

window-performance

A small JavaScript plugin to view the window.performance data
JavaScript
15
star
16

xbl-analysis

HTML
13
star
17

codemirror-accessible

JavaScript
9
star
18

musicviz

A Canvas / Audio Experiment
JavaScript
9
star
19

inverse-intersection

Given a parent rectangle and a collection of children rectangles on a 2D plane, find a collection of non-overlapping rectangles that cover the inverse of the original set.
JavaScript
8
star
20

wordsolver.js

Unscramble words in browser with a variety of dictionaries
JavaScript
7
star
21

ColorStash

JavaScript
6
star
22

photo-editor

JavaScript
5
star
23

webdesigner

A totally unfinished visual web page editor...
JavaScript
5
star
24

neon-mentat

JavaScript
5
star
25

esm_sandbox_eval

JavaScript
4
star
26

arewefissionyet

JavaScript
3
star
27

firefox-patches

Patch queue for Firefox
3
star
28

bgrins.github.com

My Github Page
HTML
3
star
29

html5-workshop

Content to go along with ComoRichWeb workshop night for learning HTML5
3
star
30

sqlite-datagrid-demo

JavaScript
2
star
31

image-editor-scaffold

Experimental image editor project scaffold. Not ready for prime time in any way
JavaScript
2
star
32

firefox-user-testing-helpers

Batchfile
2
star
33

asciigram

JavaScript
2
star
34

data-ui-tests

HTML
2
star
35

unicode_searcher

search for unicode characters
JavaScript
1
star
36

bug-tools

Some scripts for working with bugzilla and commits to mozilla-central
JavaScript
1
star
37

webdata

JavaScript
1
star
38

console-output-experiment

JavaScript
1
star
39

-super-spork

JavaScript
1
star
40

caption-o-matic

CSS
1
star
41

xul-document-burndown

JavaScript
1
star
42

component-prototype

JavaScript
1
star
43

comorichweb

JavaScript
1
star
44

colorwheel-full

1
star
45

rust-ci-starter

Rust
1
star
46

marquee-test

HTML
1
star
47

areweyet

Shared code for arewe*yet sites
JavaScript
1
star
48

table_to_csv

Convert HTML table to CSV
HTML
1
star
49

Original_DrawWindow_Development

Render HTML in the Canvas Element
PHP
1
star
50

imgedit

Playing around with canvas... totally unfinished
JavaScript
1
star
51

ColorStashMini

A devtools playground for talks
JavaScript
1
star
52

opfs-sqlite-demo

JavaScript
1
star
53

kitchen-sink

JavaScript
1
star
54

webdev-sandbox

TypeScript
1
star
55

editor-tests

JavaScript
1
star
56

benchmark-reporting-server

JavaScript
1
star
57

crossbrowser-selenium-action-test

JavaScript
1
star
58

alt-text-test-results

HTML
1
star