An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
Date: 11-Mar-2024
maxMultipleFileSize feature check.autocomplete for button.Date: 17-Aug-2022
Major Release: BC Breaking
Date: 29-Jun-2022
{maxSize}, {minSize}, {size}.fa6
explorer-fa6
fa theme to fa4
fas theme to fa5
explorer-fa theme to explorer-fa4
explorer-fas theme to explorer-fa5
<!-- buffer.min.js and filetype.min.js are necessary in the order listed for advanced mime type parsing and more correct
preview. This is a feature available since v5.5.0 and is needed if you want to ensure file mime type is parsed
correctly even if the local file's extension is named incorrectly. This will ensure more correct preview of the
selected file (note: this will involve a small processing overhead in scanning of file contents locally). -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/filetype.min.js" type="text/javascript"></script>
(enh #1791): Enhance preview update automatically when addToStack is called.
(enh #1785): Image rotation button action feature in thumbnail and zoom.
rotatableFileExtensions defaults to ['jpg', 'jpeg', 'png', 'gif'],fileActionSettings (rotateIcon, rotateTitle, rotateClass)previewZoomButtonIcons.rotate, previewZoomButtonClasses.rotate and previewZoomButtonTitles.rotate
(enh #1788): Enhancements to showUserError method.
retainErrorHistory which allows you to retain previous errors (defaults to false)var $input = $('#file-input-id');
$input.on('fileuploaderror', function(event, data) {
var userMessage = 'We could not process the upload because of a server error.',
retainErrorHistory = true; // whether to retain error history
// to show error specific to each file pass `data` as received above (the `data` object must contain the `fileId` property)
$input.fileinput('showUserError', userMessage, data, retainErrorHistory);
// to show a constant global error not specific to each file do not pass `data` (uncomment below line to achieve this)
// $input.fileinput('showUserError', userMessage);
});
alwaysPreviewFileExtensions - setup as an array list of extensions whose content will always be shown in preview (irrespective of preferIconPreview or previewFileIconSettings which will be used to control icon preview for configured types).Date: 10-May-2022
layoutTemplates.fileIcon.autoReplace behavior to clear already uploaded thumbnails.showUserError and new event fileusererror.
Usage:var $input = $('#file-input-id');
$input.on('fileuploaderror', function(event, data) {
var userMessage = 'We could not process the upload because of a server error.';
// to show error specific to each file pass `data` as received above (the `data` object must contain the `fileId` property)
$input.fileinput('showUserError', userMessage, data);
// to show a constant global error not specific to each file do not pass `data` (uncomment below line to achieve this)
// $input.fileinput('showUserError', userMessage);
});
alt property for image is applied via intial preview config if set.maxFilePreviewSize.msgSizeTooLarge.Date: 17-Dec-2021
maxAjaxThreads correctly.
filebatchuploadsuccess and filebatchuploaderror)gly theme.Date: 23-Sep-2021
getLoadingUrl to a new $h.getZoomPlaceholder method.Date: 19-Sep-2021
Date: 17-Sep-2021
Date: 25-Jul-2021
initialPreviewConfig will include an additional property description
kv-zoom-description container which will render the description from initialPreviewConfig. This container will be hidden if no description found.kv-zoom-caption container which will render the caption or filename from initialPreviewConfig. If that is not found it will default to msgZoomModalHeading.kv-zoom-size container which will render the size as set in initialPreviewConfig.showDescriptionClose (boolean). Will show a close icon to close the description bubble text when set to true. Defaults to true.sizeUnits defaults to ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
bitRateUnits defaults to ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s']
bytesToKB which defaults to 1024 is used for conversion.inputGroupClass - defaults to empty stringinput-group-lg or input-group-sm to get bootstrap input group stylesfileselect event triggering.zoomData to lazy load content asynchronously only on zoom.filebatchpreupload event listening for effective aborting.