tessl/npm-blueimp-file-upload
jQuery File Upload widget with multiple file selection, drag-and-drop support, progress bars, validation and preview images, audio and video
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-blueimp-file-upload@10.32.0index.mddocs/
jQuery File Upload
jQuery File Upload is a comprehensive file upload widget that provides multiple file selection, drag-and-drop support, progress bars, validation, and preview capabilities for images, audio, and video files. It supports cross-domain uploads, chunked file transfers, resumable uploads, and works with any server-side platform through standard HTML form file upload protocols.
Package Information
- Package Name: blueimp-file-upload
- Package Type: npm
- Language: JavaScript
- Installation:
npm install blueimp-file-upload
Core Imports
The package provides multiple modules that can be included as needed:
// Core widget (required)
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.fileupload.js"></script>
// Optional UI plugin
<script src="js/jquery.fileupload-ui.js"></script>
// Optional processing and media plugins
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-image.js"></script>
<script src="js/jquery.fileupload-audio.js"></script>
<script src="js/jquery.fileupload-video.js"></script>
<script src="js/jquery.fileupload-validate.js"></script>
// Optional transport extensions for cross-browser support
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/cors/jquery.postmessage-transport.js"></script>
<script src="js/cors/jquery.xdr-transport.js"></script>For npm/CommonJS usage:
require('blueimp-file-upload/js/vendor/jquery.ui.widget.js');
require('blueimp-file-upload/js/jquery.fileupload.js');Basic Usage
$('#fileupload').fileupload({
url: '/upload',
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css('width', progress + '%');
}
});Architecture
jQuery File Upload is built as a modular system with several key components:
- Core Widget: Base file upload functionality with drag-drop, chunked uploads, and event system
- UI Plugin: Template-based user interface with progress indicators and file lists
- Processing Pipeline: Extensible file processing system for validation, image resizing, and media handling
- Transport Extensions: Cross-browser and cross-domain upload support through multiple transport mechanisms
- jQuery UI Widget Foundation: Standard widget lifecycle, options management, and event triggering
Capabilities
Core File Upload
The foundation widget providing essential file upload functionality including drag-and-drop, multiple file selection, progress tracking, and chunked uploads.
$('#fileupload').fileupload(options);
// Widget methods
.fileupload('active') // Returns number of active uploads
.fileupload('progress') // Returns progress object
.fileupload('add', data) // Add files programmatically
.fileupload('send', data) // Send files immediatelyUser Interface
Template-based UI system providing visual feedback, file lists, and interactive controls for managing uploads.
// UI-specific options
{
uploadTemplateId: 'template-upload',
downloadTemplateId: 'template-download',
filesContainer: '.files',
showElementClass: 'in'
}
// UI methods
.fileupload('enable') // Enable widget UI
.fileupload('disable') // Disable widget UIFile Processing
Extensible processing pipeline for file validation, image resizing, audio/video preview generation, and custom transformations.
// Processing configuration
{
processQueue: [
{ action: 'validate' },
{ action: 'loadImage', fileTypes: /^image\// },
{ action: 'resizeImage', maxWidth: 1920, maxHeight: 1080 }
]
}
// Processing methods
.fileupload('processing') // Returns number of files being processed
.fileupload('process', data) // Process files through queueValidation
Comprehensive validation system for file types, sizes, and upload limits with customizable error messages.
// Validation options
{
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
minFileSize: 1000, // 1 KB
maxNumberOfFiles: 10
}Cross-Browser Support
Transport extensions providing upload compatibility across all browsers including legacy IE support and cross-domain capabilities.
// Transport configuration
{
forceIframeTransport: false, // Force iframe fallback
redirect: '/upload-redirect', // Cross-domain redirect URL
postMessage: '/post-message-handler' // PostMessage transport URL
}