by Caleb Evans

jFile

jFile is a jQuery plugin which greatly simplifies working with the HTML5 File API.

Download

Demo

Drop Files Here

Documentation

Methods

jFile includes a single jQuery method for creating uploader elements, called createUploader().

Objects

All callbacks accept the event and file objects as arguments.

event

Properties
fileCount
The total number of files received by the upload control.
file
The file object associated with this event.
data
The current file data being received
bytesLoaded
The current number of bytes being received during the upload
percentLoaded
The percentage of bytes loaded out of the total. The percentage ranges from 0 to 1.
bytesRemaining
The current number of bytes that are yet to be received during the upload
totalBytes
The total number of bytes that the browser has received during the upload
date
The date (as a Date object) on which the event object was created.
errors
An object containing the statuses of various errors which might occur.
state
An object containing the statuses of various upload states.
type
The type of event that fired (loadstart, progress, etc.)
originalEvent
The original ProgressEvent object
Methods
abort()
Aborts the file-reading process, which will trigger the abort and error events

file

Properties
name
The name of the file, including its extension
displayName
The name of the file without its extension
extension
The extension of the file
lastModified
The last modified date of the file as a Date object
size
The size of the file in bytes
type
The MIME type of the file as a string
originalFile
The original File object

Events

dragenter()
Triggers when a file enters a dropzone when dragging
dragover()
Triggers continually as a file is hovering over a dropzone when dragging
dragleave()
Triggers when a file leaves a dropzone when dragging
loadstart()
Triggers when a file begins loading
loadend()
Triggers when a file finishes loading, regardless of any errors which may have occured
load()
Triggers when a file finishes loading, but only if no errors occured
progress()
Triggers continually as a file is being uploaded
error()
Triggers when an error occurs while loading a file
abort()
Triggers when an error occurs or the process of loading a file is aborted

jFile Parameters

The createUploader() method accepts a single object, the properties and methods of which will be used to configure the upload control:

Properties

dropzone
If true, treats the given element as a dropzone for uploading files
dropEffect
The cursor to use when dragging over a dropzone.
Accepted values include "copy", "move", "link", and "none"
output
The type of file data to be outputted.
Accepted values include "data-url", "text", "binary-string", and "array-buffer". The default value is "data-url".

Methods

filter()
A callback function that determines which files are accepted
reject()
A callback function that is run for each file that is rejected by the filter() function (if given)