JavaScript library that manages file uploads using html5 drag and drop and file API's.
JavaScript C# HTML CSS ASP
Latest commit 4f6a2e7 Dec 9, 2015 @tkirda tkirda Merge pull request #11 from bigdb/thomaswelton-patch-1
Set Accept Headers for JSON responses
Permalink
Failed to load latest commit information.
Html5UploadDemo Set Accept Headers for JSON responses Dec 9, 2015
packages Initial commit Nov 6, 2012
.gitignore Add .gitignore Nov 6, 2012
Html5Upload.sln Initial commit Nov 6, 2012
README.md Update README.md Nov 9, 2012
license.txt license.txt added. Jul 30, 2014

README.md

HTML5 AJAX File Uploader Module

This module abstracts HTML5 file and drag and drop API and manages file upload process

  • Free, open source (MIT license)
  • Pure JavaScript - works with any web framework
  • Small & lightweight
  • No dependencies

Samples on how to use module and create custom user interface for file uploads are available.

Demos

Usage

html5Upload.initialize({
    // URL that handles uploaded files
    uploadUrl: '/file/upload',

    // HTML element on which files should be dropped (optional)
    dropContainer: document.getElementById('dragndropimage'),

    // HTML file input element that allows to select files (optional)
    inputField: document.getElementById('upload-input'),

    // Key for the file data (optional, default: 'file')
    key: 'File',

    // Additional data submitted with file (optional)
    data: { ProjectId: 1, ProjectName: 'Demo' },

    // Maximum number of simultaneous uploads
    // Other uploads will be added to uploads queue (optional)
    maxSimultaneousUploads: 2,

    // Callback for each dropped or selected file
    // It receives one argument, add callbacks 
    // by passing events map object: file.on({ ... })
    onFileAdded: function (file) {

        var fileModel = new models.FileViewModel(file);
        uploadsModel.uploads.push(fileModel);

        file.on({
            // Called after received response from the server
            onCompleted: function (response) {
                fileModel.uploadCompleted(true);
            },
            // Called during upload progress, first parameter
            // is decimal value from 0 to 100.
            onProgress: function (progress, fileSize, uploadedBytes) {
                fileModel.uploadProgress(parseInt(progress, 10));
            }
        });
    }
});

Support

IE10+, Firefox 15+, Chrome 22+, Safari 6+, Opera 12+

Authors

Tomas Kirda / @tkirda