Popularity
2.1
Growing
Activity
0.0
Stable
198
28
89

Description

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

Code Quality Rank: L3
Programming language: JavaScript
License: GNU General Public License v3.0 or later

HTML5 AJAX File Uploader alternatives and similar libraries

Based on the "File Uploader" category.
Alternatively, view HTML5 AJAX File Uploader alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of HTML5 AJAX File Uploader or a related project?

Add another 'File Uploader' Library

README

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


*Note that all licence references and agreements mentioned in the HTML5 AJAX File Uploader README section above are relevant to that project's source code only.