Upload

Allow users to upload files through a file input form element or a placeholder area.


Usage

This JavaScript component utilizes the latest XMLHttpRequest Level 2 specification and provides the ability of uploading files via ajax including tracking of the upload progress. The component provides two ways of uploading files: select and drop. While the select request can only be applied to <input type="file"> elements, you can basically use any element with drop, which enables you to simply drag and drop files from your desktop into the specified element to upload them. Note that this component does not handle your file uploads on the server.

The Upload component always needs to be implemented individually according to your requirements. In our example case we used the Placeholder and the Form file component, applying both the drop and select requests. Additionally we used the Progress component to illustrate the uploading progress.

Example

Attach binaries by dropping them here orselecting one.

Markup

<div id="upload-drop" class="placeholder">
    Info text...
    <a class="form-file">Select a file<input id="upload-select" type="file"></a>.
</div>
<div id="progressbar" class="progress hidden">
    <div class="progress-bar" style="width: 0%;">...</div>
</div>

JavaScript

To create select and drop upload listeners you need to instantiate each upload class with the target element and options, which defines callbacks and useful settings.

$(function(){
var progressbar = $("#progressbar"),
    bar = progressbar.find('.progress-bar'),
    settings = {
        // upload url
        action : '/',

        // allow only images
        allow : '*.(jpg|jpeg|gif|png)',

        loadstart : function() {
            bar.css("width", "0%").text("0%");
            progressbar.removeClass("hidden");
        },
        progress : function(percent) {
            percent = Math.ceil(percent);
            bar.css("width", percent+"%").text(percent+"%");
        },
        allcomplete : function(response) {
            bar.css("width", "100%").text("100%");
            setTimeout(function(){
                progressbar.addClass("hidden");
            }, 250);
            alert("Upload Completed")
        }
    },
    select = Clique.uploadSelect($("#upload-select"), settings),
    drop = Clique.uploadDrop($("#upload-drop"), settings);
});

JavaScript options

Option Possible value Default Description
action string '' Target url for the upload
single boolean true Send each file one by one
param string files[] Post query name
params JSON Object {} Additional request parameters
allow string *.* File filter
filelimit integer false Limit the number of files to upload
type (text | json) text Response type from server

Callback events

Name Parameter
before settings, files
beforeAll files
beforeSend xhr
progress percent
complete response, xhr
allcomplete response, xhr
notallowed file, settings
loadstart event
load event
loadend event
error event
abort event
readystatechange event