by Caleb Evans

Table of Contents

    jFile

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

    Download

    jFile (minified) jFile (source)

    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)