Description
Samples on how to use module and create custom user interface for file uploads are available.
HTML5 AJAX File Uploader alternatives and similar libraries
Based on the "File Uploader" category
-
jQuery-File-Upload
File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. -
dropzone
Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars. -
filepond
A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. -
plupload
A JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and Flash. -
FileAPI
A set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF. -
flow.js
A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.
Scout APM: Application Performance Monitoring
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of HTML5 AJAX File Uploader or a related project?
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.