The UI plugin extends the core widget with template-based user interface functionality, providing visual feedback, file lists, progress indicators, and interactive controls for managing uploads.
Options for controlling the visual interface and templating system.
interface UIOptions {
/** CSS class for showing/hiding elements, default: "in" */
showElementClass?: string;
/** Upload template ID, default: "template-upload" */
uploadTemplateId?: string;
/** Download template ID, default: "template-download" */
downloadTemplateId?: string;
/** Container for file list, default: element with .files class */
filesContainer?: JQuery;
/** Prepend files instead of append, default: false */
prependFiles?: boolean;
/** Expected response data type, default: "json" */
dataType?: string;
}Additional methods provided by the UI plugin for controlling interface state.
/**
* Enable the widget UI
* @returns jQuery object for chaining
*/
.fileupload('enable');
/**
* Disable the widget UI
* @returns jQuery object for chaining
*/
.fileupload('disable');Events fired by the UI plugin for interface state changes.
interface UIEvents {
/** File added to UI (after processing) */
added?: (e: Event, data: FileUploadData) => void;
/** Upload sent (UI confirmation) */
sent?: (e: Event, data: FileUploadData) => void;
/** Upload completed in UI */
completed?: (e: Event, data: FileUploadData) => void;
/** Upload failed in UI */
failed?: (e: Event, data: FileUploadData) => void;
/** Upload finished in UI (success or fail) */
finished?: (e: Event, data: FileUploadData) => void;
/** Upload started in UI */
started?: (e: Event) => void;
/** Upload stopped in UI */
stopped?: (e: Event) => void;
/** File destroyed/deleted */
destroyed?: (e: Event, data: FileUploadData) => void;
/** File destruction failed */
destroyfailed?: (e: Event, data: FileUploadData) => void;
}The UI plugin uses JavaScript template elements to render upload and download interfaces.
/**
* Upload template structure for file upload UI
* Template ID specified by uploadTemplateId option
*/
interface UploadTemplate {
/** File name display */
name: string;
/** File size display */
size: string;
/** Upload progress bar */
progress: HTMLElement;
/** Cancel/abort button */
cancel: HTMLElement;
/** Start upload button (when autoUpload is false) */
start?: HTMLElement;
}
/**
* Download template structure for completed uploads
* Template ID specified by downloadTemplateId option
*/
interface DownloadTemplate {
/** File name with download link */
name: string;
/** File size display */
size: string;
/** File type/preview */
preview?: HTMLElement;
/** Delete button */
delete?: HTMLElement;
/** Error message display */
error?: string;
}Utility methods for formatting file information in the UI.
/**
* Format bytes as human-readable size (KB/MB/GB)
* @param bytes - Number of bytes
* @returns string - Formatted size string
*/
_formatFileSize(bytes: number): string;
/**
* Format bitrate as human-readable string (kbit/s, Mbit/s, Gbit/s)
* @param bits - Bitrate in bits per second
* @returns string - Formatted bitrate string
*/
_formatBitrate(bits: number): string;
/**
* Format seconds as time string (HH:MM:SS)
* @param seconds - Duration in seconds
* @returns string - Formatted time string
*/
_formatTime(seconds: number): string;
/**
* Format decimal as percentage
* @param floatValue - Decimal value (0.0 to 1.0)
* @returns string - Formatted percentage string
*/
_formatPercentage(floatValue: number): string;Extended progress information provided by the UI plugin.
interface ExtendedProgress {
/** Bytes loaded */
loaded: number;
/** Total bytes */
total: number;
/** Upload bitrate */
bitrate: number;
/** Formatted file size */
formattedFileSize: string;
/** Formatted bitrate */
formattedBitrate: string;
/** Estimated time remaining */
estimatedTime: number;
/** Formatted time remaining */
formattedEstimatedTime: string;
/** Progress percentage (0-100) */
percentage: number;
/** Formatted percentage */
formattedPercentage: string;
}Usage Examples:
// Basic UI setup with templates
$('#fileupload').fileupload({
url: '/upload',
dataType: 'json',
uploadTemplateId: 'template-upload',
downloadTemplateId: 'template-download',
filesContainer: '#files',
// UI event handlers
added: function (e, data) {
console.log('File added to UI:', data.files[0].name);
},
completed: function (e, data) {
console.log('Upload completed in UI');
},
failed: function (e, data) {
console.log('Upload failed in UI');
}
});
// Template examples (HTML)
// Upload template
/*
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
*/
// Download template
/*
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery>
<img src="{%=file.thumbnailUrl%}">
</a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}">{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
*/
// Enable/disable UI
$('#fileupload').fileupload('disable');
$('#fileupload').fileupload('enable');
// Custom formatting
var fileSize = $('#fileupload').fileupload('_formatFileSize', 1048576); // "1 MB"
var bitrate = $('#fileupload').fileupload('_formatBitrate', 1024000); // "1000 kbit/s"
var time = $('#fileupload').fileupload('_formatTime', 3661); // "01:01:01"