CtrlK
BlogDocsLog inGet started
Tessl Logo

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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 immediately

Core Widget

User 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 UI

User Interface

File 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 queue

File Processing

Validation

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
}

Validation

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
}

Cross-Browser Support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/blueimp-file-upload@10.32.x
Publish Source
CLI
Badge
tessl/npm-blueimp-file-upload badge