An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
Date: 09-Apr-2024
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