Popularity
1.8
Growing
Activity
0.0
Stable
179
24
88

Description

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

Code Quality Rank: L3
Programming language: JavaScript

HTML5 AJAX File Uploader alternatives and similar libraries

Based on the "File Uploader" category

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

Add another 'File Uploader' Library
Proactively identify front-end issues with easy-to-build synthetics tests. 14-day free trial.
More from our partner

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
More from our team

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.