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
Securityby
Pending
The risk profile of this skill
file-processing.mddocs/
File Processing
The processing plugin provides an extensible file processing pipeline for validation, image resizing, audio/video preview generation, and custom transformations before upload.
Capabilities
Processing Configuration
Configure the processing pipeline through the processQueue option.
interface ProcessingOptions {
/** Array of processing actions to execute */
processQueue: ProcessAction[];
}
interface ProcessAction {
/** Action name (validate, loadImage, resizeImage, etc.) */
action: string;
/** Action-specific configuration options */
[key: string]: any;
}Processing Methods
Methods for controlling and monitoring file processing.
/**
* Get number of files currently being processed
* @returns number - Count of files in processing queue
*/
.fileupload('processing');
/**
* Process files through the processing queue
* @param data - Data object containing files to process
* @returns Promise - Resolves when processing completes
*/
.fileupload('process', data);Processing Events
Events fired during file processing operations.
interface ProcessingEvents {
/** File processing started */
process?: (e: Event, data: FileUploadData) => void;
/** File processing completed successfully */
processdone?: (e: Event, data: FileUploadData) => void;
/** File processing failed */
processfail?: (e: Event, data: FileUploadData) => void;
/** File processing finished (success or fail) */
processalways?: (e: Event, data: FileUploadData) => void;
/** Processing queue started */
processstart?: (e: Event) => void;
/** Processing queue stopped */
processstop?: (e: Event) => void;
}Image Processing Actions
Actions for processing image files including metadata loading, resizing, and format conversion.
/**
* Load image metadata (EXIF, IPTC)
*/
interface LoadImageMetaDataAction {
action: 'loadImageMetaData';
/** Include EXIF data, default: true */
includeExif?: boolean;
/** Include IPTC data, default: true */
includeIptc?: boolean;
}
/**
* Load image as img element
*/
interface LoadImageAction {
action: 'loadImage';
/** File types to load, default: /^image\/(gif|jpeg|png|svg\+xml)$/ */
fileTypes?: RegExp;
/** Max file size to load, default: 10000000 (10MB) */
maxFileSize?: number;
/** Disable image head loading, default: false */
noRevoke?: boolean;
}
/**
* Resize image with orientation and crop options
*/
interface ResizeImageAction {
action: 'resizeImage';
/** Max resized image width, default: 1920 */
maxWidth?: number;
/** Max resized image height, default: 1080 */
maxHeight?: number;
/** Min image width, default: 1 */
minWidth?: number;
/** Min image height, default: 1 */
minHeight?: number;
/** Use canvas for resizing, default: true */
canvas?: boolean;
/** Crop images during resize, default: false */
crop?: boolean;
/** Image orientation handling, default: true */
orientation?: boolean | number;
/** Force image resize, default: false */
forceResize?: boolean;
}
/**
* Convert canvas to blob and save
*/
interface SaveImageAction {
action: 'saveImage';
/** Image quality (0-1), default: 0.8 */
quality?: number;
/** Output image type, default: 'image/jpeg' */
type?: string;
}
/**
* Restore metadata to processed image
*/
interface SaveImageMetaDataAction {
action: 'saveImageMetaData';
}
/**
* Set processed image as file property
*/
interface SetImageAction {
action: 'setImage';
}
/**
* Clean up image references
*/
interface DeleteImageReferencesAction {
action: 'deleteImageReferences';
}Preview Generation Actions
Actions for generating image previews and thumbnails.
/**
* Generate image preview
*/
interface PreviewAction {
action: 'loadImage';
/** Max preview width, default: 80 */
maxWidth?: number;
/** Max preview height, default: 80 */
maxHeight?: number;
/** Preview orientation handling, default: true */
orientation?: boolean | number;
/** Use EXIF thumbnail for preview, default: true */
thumbnail?: boolean;
/** Crop preview images, default: false */
crop?: boolean;
/** Use canvas for preview generation, default: true */
canvas?: boolean;
}Audio Processing Actions
Actions for processing audio files and generating previews.
/**
* Load audio file as audio element
*/
interface LoadAudioAction {
action: 'loadAudio';
/** Audio file types to load, default: /^audio\/.*$/ */
fileTypes?: RegExp;
}
/**
* Set audio element as file property
*/
interface SetAudioAction {
action: 'setAudio';
}Video Processing Actions
Actions for processing video files and generating previews.
/**
* Load video file as video element
*/
interface LoadVideoAction {
action: 'loadVideo';
/** Video file types to load, default: /^video\/.*$/ */
fileTypes?: RegExp;
}
/**
* Set video element as file property
*/
interface SetVideoAction {
action: 'setVideo';
}Validation Processing Action
Action for validating files against size, type, and count constraints.
/**
* Validate file against constraints
*/
interface ValidateAction {
action: 'validate';
}Processing Data Object Extensions
Additional properties added to data objects during processing.
interface ProcessingData extends FileUploadData {
/** Processing state */
processing(): boolean;
/** Process files with resolve/reject functions */
process(resolveFunc?: Function, rejectFunc?: Function): Promise<any>;
/** Image element (when loadImage action used) */
img?: HTMLImageElement;
/** Canvas element (when image processing used) */
canvas?: HTMLCanvasElement;
/** Audio element (when loadAudio action used) */
audio?: HTMLAudioElement;
/** Video element (when loadVideo action used) */
video?: HTMLVideoElement;
/** Image metadata (when loadImageMetaData action used) */
exif?: object;
iptc?: object;
/** Processing errors */
processingError?: string;
}Usage Examples:
// Basic image processing pipeline
$('#fileupload').fileupload({
url: '/upload',
processQueue: [
{
action: 'loadImage',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resizeImage',
maxWidth: 1920,
maxHeight: 1080,
orientation: true
},
{
action: 'saveImage'
}
]
});
// Validation and preview processing
$('#fileupload').fileupload({
url: '/upload',
processQueue: [
{ action: 'validate' },
{
action: 'loadImage',
fileTypes: /^image\//,
maxWidth: 80,
maxHeight: 80,
thumbnail: true,
crop: true
}
],
processdone: function (e, data) {
if (data.img) {
// Preview image available
$('#preview').html(data.img);
}
}
});
// Audio/video processing
$('#fileupload').fileupload({
url: '/upload',
processQueue: [
{ action: 'validate' },
{
action: 'loadAudio',
fileTypes: /^audio\/(mp3|wav|ogg)$/
},
{
action: 'loadVideo',
fileTypes: /^video\/(mp4|webm|ogg)$/
}
]
});
// Custom processing with metadata
$('#fileupload').fileupload({
url: '/upload',
processQueue: [
{ action: 'loadImageMetaData' },
{
action: 'loadImage',
orientation: false // Keep original orientation
},
{
action: 'resizeImage',
maxWidth: 800,
maxHeight: 600,
crop: true
},
{ action: 'saveImageMetaData' },
{ action: 'saveImage', quality: 0.9 }
],
processdone: function (e, data) {
console.log('EXIF data:', data.exif);
console.log('Original size:', data.originalFiles[0].size);
console.log('Processed size:', data.files[0].size);
}
});
// Check processing status
var processingCount = $('#fileupload').fileupload('processing');
console.log('Files being processed:', processingCount);
// Manual processing
$('#fileupload').fileupload('process', {
files: [file1, file2],
processQueue: [
{ action: 'validate' },
{ action: 'loadImage' }
]
}).done(function (data) {
console.log('Processing completed');
});