bootstrap-fileinput
Date: under development
Date: 13-Oct-2022
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
(enh #1792): Advanced file mime type detection for preview irrespective of file extension.
Load the following new plugin files before fileinput.min.js
<!-- 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>
addToStack
is called.rotatableFileExtensions
defaults to ['jpg', 'jpeg', 'png', 'gif'],fileActionSettings
(rotateIcon
, rotateTitle
, rotateClass
)New properties previewZoomButtonIcons.rotate
, previewZoomButtonClasses.rotate
and previewZoomButtonTitles.rotate
(enh #1788): Enhancements to showUserError
method.
New 3rd parameter retainErrorHistory
which allows you to retain previous errors (defaults to false)
``js
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
dataas received above (the
dataobject 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);
});
```
(enh #1694): Thumbnail of images only but detailed preview/iconic view of all other files.
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:
```js
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);
});
- (enh #1777): Ensure `alt` property for image is applied via intial preview config if set.
- (bug #1775): Correct syntax error for Danish translations.
- (bug #1773): Fix blank preview issue for large files > `maxFilePreviewSize`.
- (enh #1771): Human readable sizes in messages like `msgSizeTooLarge`.
## version 5.2.7
**Date**: 17-Dec-2021
- (enh #1767): Enhance ajax task queuing to validate `maxAjaxThreads` correctly.
- enhancement for async uploads (with correct firing of events `filebatchuploadsuccess` and `filebatchuploaderror`)
- (enh #1765): Map missing icons in `gly` theme.
- (enh #1763): Preview centering enhancements for thumbnail, object and zoom content.
- (bug #1758): Correct bootstrap module parser.
## version 5.2.6
**Date**: 23-Sep-2021
- (bug #1758): Correct bootstrap module parser.
- (enh #1756): Replace `getLoadingUrl` to a new `$h.getZoomPlaceholder` method.
## version 5.2.5
**Date**: 19-Sep-2021
- (enh #1755): Simplify NPM module handling.
## version 5.2.4
**Date**: 18-Sep-2021
- (enh #1754): Default button styling & Explorer theme enhancements.
- (enh #1753): Enhance NPM module handling.
- (enh #1752): Enhance exif properties validation .
- (enh #1750): Enhancements to file caption icon and input group styling.
- (enh #1744): Enhance zoom cache temporary url to use loader image.
- (enh #1741): Fix zoom cache 404 console warnings.
## version 5.2.3
**Date**: 25-Jul-2021
- (enh #1738): Enhancements to zoomed preview to include additional description and better title styling.
- The `initialPreviewConfig` will include an additional property `description`
- The modal layout template will include a `kv-zoom-description` container which will render the description from `initialPreviewConfig`. This container will be hidden if no description found.
- The modal layout template will include `kv-zoom-caption` container which will render the `caption` or `filename` from `initialPreviewConfig`. If that is not found it will default to `msgZoomModalHeading`.
- The modal layout template will include `kv-zoom-size` container which will render the `size` as set in `initialPreviewConfig`.
- The description will be shown as a bubble text over the image/content.
- Additional new property `showDescriptionClose` (boolean). Will show a close icon to close the description bubble text when set to `true`. Defaults to `true`.
- (enh #1737): Configurable file size units and bitrate units. New plugin properties configurable and translateable via locale language files.
- `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']`
- (enh #1736): Correct byte to KB conversion.
- new property `bytesToKB` which defaults to `1024` is used for conversion.
- (enh #1735): Correct file caption reset after thumbnail delete.
- (bug #1734): Correct zoom data refresh for each individual file upload.
- (enh #1731): Enhance RTL Styling for bootstrap 4/5 input groups.
- (enh #1730): Enhancements for bootstrap input group styles.
- New plugin option `inputGroupClass` - defaults to empty string
- Can be set to `input-group-lg` or `input-group-sm` to get bootstrap input group styles
- Enhanced caption icon styling to match the bootstrap input group styles
- (enh #1727): Correct zoom navigation for reverse preview order.
- (enh #1726): Update Chinese translations.
- (enh #1722): Enhance zoom cache rendering and carousel navigation indicators.
- (enh #1721): Correct `fileselect` event triggering.
- (enh #1720): Enhance parsing of `zoomData` to lazy load content asynchronously only on zoom.
- (enh #1642): Enhance `filebatchpreupload` event listening for effective aborting.
## version 5.2.2
**Date**: 19-Jun-2021
- (enh #1719): Show loading / processing when browse button used for file selection
- (enh #1718): Enhancements for Bootstrap 5.x & New Theme
- Default to use bootstrap 5.x icons instead of glyphicons
- Correct `layoutTemplates.main2` to use wrapper container for the buttons to use `mainClass`
- Create a new theme `bs5` to support bootstrap 5.x icons and styles
- This is a BC breaking change - which will remove GLYPHICONS as default icons and replace them with Bootstrap 5.x Icon Library. Users must load the Bootstrap icons CSS on their pages for this new change to take effect (as mentioned in docs).
- (enh #1716): Update Czech Translations.
- (enh #1715): Update Slovak Translations.
- (enh #1714): Various enhancements to file caption styling and file preview processing.
- (enh #1713): Allow pasting files and images from clipboard to the fileinput.
- (enh #1710): Correct isEmpty helper.
- (bug #1709): Corrections to image resizing.
- (bug #1708): Corrections to reselection/upload of image file deleted earlier.
## version 5.2.1
**Date**: 19-May-2021
- (enh #1706): Enhance reset of file caption title.
- (enh #1705): Corrections to image resizing.
- (enh #1704): Enhance and fix CDN to use jsDelivr.
## version 5.2.0
**Date**: 06-May-2021
- (enh #1674): Enhancements to add support for Bootstrap v5.
- Major release to support Bootstrap version 5.x
- Bootstrap version is auto detected with this release if the bootstrap javascript library is loaded
- Additional flexibility is provided to developer to override a specific bootstrap version by setting `$.fn.fileinputBsVersion`
- There is an existing issue for MODAL dialog initialization in Bootstrap library v5.x. Refer the [issue reported](https://github.com/twbs/bootstrap/issues/33840#issuecomment-833462016) at the Bootstrap 5.x library repo with a workaround.
- (enh #1699): Update Danish Translations.
- (enh #1698): Tab index ordering enhancements.
- fix tab order breaking after file caption highlight
- added new property `tabIndexConfig` for configuration of tab indices for each section
which defaults to (null value means no tabindex property will be set for that section)
~~~
tabIndexConfig: {
caption: 500,
browse: 500,
remove: 500,
upload: 500,
cancel: null,
pause: null,
modal: -1
}
~~~
- (enh #1693): Add Latvian Translations.
- (enh #1690): Add Uzbek Cyrillic Translations.
- (enh #1647, #1679, #1695): Correct success file thumbs init.
## version 5.1.5
**Date**: 03-Mar-2021
- (enh #1687, #1688): Allow error history to be displayed for resumable uploads.
- new boolean property `resumableUploadOptions.retainErrorHistory`
- (enh #1683): Better correct CSP Buffer Stash using CSSStyleDeclaration.
- (enh #1681): Update Turkish Translations.
- (bug #1678): Resumable upload error handling fixes
- new boolean property `resumableUploadOptions.skipErrorsAndProceed`
- new event `filemaxretries`
## version 5.1.4
**Date**: 12-Jan-2021
- (enh #1672): Add namespace control on bootstrap modal show trigger to avoid interaction with other plugins.
- (bug #1671): Correct upload button behavior in file thumbnail footer.
- (enh #1664): Enhance upload stats and add bitrate update delay.
- (enh #1663): Correct upload bitrate.
- (enh #1657, #1659): Update Hungarian Translations.
- (bug #1656): Correct error in `_getThumbFileId`.
- (bug #1652): Correct thumb parsing error for events when `showPreview` is false.
- (enh #1651): Pass file id in `fileuploaded` event for non-resumable ajax async uploads.
- (enh #1650): Update Ukranian Translations.
- (bug #1649): Correct image size validation.
- (enh #1648): New plugin method `getFilesSize` to return sum of bytes of all files.
- (enh #1645): Update Polish Translations.
- (bug #1123): Fix clickable zone behavior on file validation error.
## version 5.1.3
**Date**: 24-Oct-2020
- (enh #1644): Fix problem with outlook deleting email after drag and drop.
- (enh #1643): Update Arabic Translations.
- (enh #1640): Update Greek Translations.
- (enh #1639): Update Greek Translations.
- (enh #1638): Correct zoom cache to prevent duplicate thumb frames display.
- (enh #1637): Remove dependency on DOM Purify Plugin.
- (enh #1636): Enhance preview for PDF, Text & HTML.
- (enh #1635): Enhance Text & HTML files initial preview to be read as links.
- (bug #1632): Correct preview for plain text content.
- (bug #1631): Correct modal dialog `aria-labelledby` binding.
- (enh #1630): New `preProcessUpload` callback that can convert / encrypt file content before upload.
- (enh #1627): Add bootstrap 4 progress bar animation.
- (enh #1625): Default `minFileSize` to -1 to allow zero byte files to be uploaded.
- (enh #1617): Better encoded file id generation.
- (enh #1612, #1614): Remove unsupported script-inline from template and CSP buffer.
## version 5.1.2
**Date**: 15-Jul-2020
- (enh #1604): Correct upload stats time calculation for sync uploads.
- (enh #1603): Add Serbian Latin Translations.
- (enh #1602): Enhance zoom cache sanitization by parsing all inputs.
- (enh #1595): Enhance styling for drop zone to maintain consistent size during file selections.
- (bug #1594): Correct `removeThumb` validation for in readFiles `throwError` method.
- (enh #1593): Correct resumable test upload validation.
- (enh #1591): Parse arguments as an array via vanilla JS.
- (enh #1589): Correct msgPlaceholder for de & uz translations.
- (enh #1588): Enhance duplicate validation for recently uploaded thumbs.
## version 5.1.1
**Date:** 20-Jun-2020
- (enh #1587): Enhance resumable ajax error trapping.
- (bug #1585): Correct file sorting and zoom cache handling.
## version 5.1.0
**Date:** 11-Jun-2020
- (enh #1584): Revamp Krajee Explorer Themes.
- (bug #1583): Correct cspBuffer stash html content store.
- (enh #1582): Set `showConsoleLogs` to `false` as default.
- (enh #1581): Enhance Sortable Behavior & Styles.
- Update to use latest release of Rubaxa Sortable Plugin
- Fix errors in sortable init
- Update drag handle styles to show correct grab cursor
- (enh #1580): Validate drop zone title by correctly checking if native input has files.
- (enh #1578): Enhance progress bar styling.
- (enh #1577): Use `…` instead of three dots.
- (enh #1576): Update French Translations.
## version 5.0.9
**Date:** 02-Jun-2020
- (enh #1574): Enhance filezoom events to fire correctly only once for the source file input.
- fixes issue when multiple file input plugins are initialized on the same page
- (enh #1573): Update French Translations.
- (enh #1572): Correct image auto orientation based on browser support.
- (bug #1565, #1571): Implement CSP compliance for HTML markup via templates.
- (bug #1569): Correctly validate persistent file validation errors and display them.
- (enh #1568): Correct timeout and resumable validation for async uploads.
- (enh #1536, #1567): Parse response as string in `_parseError` function.
- (enh #1525, #1566): Handle `filebeforeload` event abort when returning `false`.
- (enh #1563): Update Català Translations.
- (enh #1561): Correct triggering of events for cancelled & paused scenarios.
- (enh #1557, #1559): Enhance and fix resumable and ajax queues.
- (enh #1552, #1553): More correct full screen exit.
- (bug #1551): Correct MIME Type detection for PNG.
- (enh #1548): Correct `filebatchselected` trigger for single file uploads.
- (enh #1545, #1546): Enhance file path for folder drag.
- (enh #1540): Better validation of `required` property.
- (bug #1518, #1522): Initial preview rendering correction when preview returned by server immediately after upload.
## version 5.0.8
**Date:** 13-Dec-2019
- (enh #1514): Enhancements to duplicate file selection.
- New event `fileduplicateerror` will be triggered after every duplicate file detected.
- Duplicate error container can be closed by clicking the `close` icon.
- New property `fadeDelay` used in fade out / fade in animations of error containers.
- (enh #1513): New `filebeforeload` event (only for ajax uploads). Can be used to abort loading of specific files at runtime.
*Usage:*
$('#input').on('filebeforeload', function(event, file, index, reader) {
// perform your validations based on the 'file' or other parameters
if (file.name === 'UNAPPROVED_FILE.txt') {
return false; // will abort the file loading for the selected file
}
});
```
getFilesCount
method.showZoom
.showPreview
is false
.initialPreviewShowDelete
setting correctly.Date: 17-Nov-2019
addToStack
method.updateStack
methodclearStack
to clearFileStack
methodshowPreview
is false
.maxFileCount
and msgFilesTooMany
for files being selected before uploadmaxTotalFileCount
and msgTotalFilesTooMany
for total files selected and files included in initial previewfocusCaptionOnBrowse
and focusCaptionOnClear
which default to true
.
Date: 11-Sep-2019
filebatchselected
event trigger.removeFromPreviewOnError
validation.other
when invalid file type is passed.Date: 23-Aug-2019
showConsoleLogs
to control display of plugin console messages..npmignore
to clean unwanted files for NPM package.Date: 30-Jun-2019
preferIconicPreview
parsing.getFileStack
and getFileList
methods.Date: 12-May-2019
filechunksuccess
event.enableResumableUpload
is true
):
indicatorPaused
indicatorPausedTitle
resume
method and enhance pause
method for resumable uploadsuploadParamNames
to include all parameters.Date: 18-Apr-2019
msgProgressError
msgDeleteError
msgUploadError
(modification)retryErrorUploads
setting.showPreview
is false
.fileActionSettings
.Date: 26-Mar-2019
resumableUploadOptions.chunkSize
and progressDelay
.
progressDelay
to 0
and resumableUploadOptions.chunkSize
to 2048 KB
i.e. (2 MB
)uploadExtraData
to be submitted correctly with ajax responses.(enh #1379): Add ability to sanitize zoom cache. New property sanitizeZoomCache
which is a function callback and defaults to:
function(content) {
var $container = $(document.createElement('div')).append(content);
$container.find('input,select,.file-thumbnail-footer').remove();
return $container.html();
}
uploadUrl
, deleteUrl
, resumableUploadOptions.testUrl
.
These can now be also setup as a function callback that will be executed at runtime.Date: 24-Mar-2019
uploadProgressDelay
in microseconds - will default to 100
- this will control how frequent the xhr upload progress will be checked. If set to null or 0 - will do it every microsecond.maxAjaxThreads
(will default to 5
) that will allow to spawn only this limit of ajax requests in parallel.resumableUploadOptions['maxThreads']
(defaults to 4) which is applicable for spawning number of ajax chunk requests for resumable uploads. The resumableUploadOptions['maxThreads']
property must be less than or equal to maxThreads
- else it will be over-ridden by maxThreads
global setting.layoutTemplates['stats']
for displaying stats
js
layoutTemplates.stats = '<div class="text-info file-upload-stats">' +
'<span class="pending-time">{pendingTime}</span> ' +
'<span class="upload-speed">{uploadSpeed}</span>' +
'</div>';
{stats}
will be replaced with abovelayoutTemplates['progress']
(enh #1374): Allow exif data of images to be read from server.
initialPreviewConfig
sent from the server can contain the exif
property as an object.autoOrientImageInitial
is a new boolean property that controls whether images need to be auto-oriented based on exif orientation.(enh #1373): Selectively disable file selection and preview for certain file extensions.
- `allowedPreviewTypes` (existing)
- `allowedPreviewMimeTypes` (existing)
- `allowedPreviewExtensions` (new)
- `disabledPreviewTypes` (new)
- `disabledPreviewExtensions` (new) - defaults to `['msi', 'exe', 'com', 'zip', 'rar', 'app', 'vb', 'scr']`
- `disabledPreviewMimeTypes` (new) - defaults to `['application/octet-stream']`
(enh #1370): Add ability for pausing and resuming uploads
(enh #1368): Better enhanced file management and queuing.
fileManager
and resumableManager
internal objects.filestack
property has been removedaddToFileStack
and updateFileStack
methods have been removed(enh #1321): Add ability to define separate thumbnail and zoom images / file data.
(enh #1264, #1145): Allow configurable file actions as a callback.
showXXX
properties in fileActionSettings
ca3n now be setup as a callback.initialPreviewConfig
for initial preview thumbnails(enh #1249, #290): Add capability for resumable and chunk uploads.
enableResumableUpload
and resumableUploadOptions
Date: 21-Mar-2019
alt
and title
attributes for images in initialPreviewConfig
.Date: 03-Jan-2019
createObjectURL
and revokeObjectURL
.mimeTypeAliases
.
.mov
files to be previewed in non Apple browsers like Chrome/Firefox/IE.encodeUrl
boolean option that encodes all URL passed by default.Date: 25-Sep-2018
browseOnZoneClick
behavior.Date: 30-Aug-2018
htmlEncode
to parse undefined variables.autoOrientImage
to false
.filebrowse
event to be prevented.usePdfRenderer
callback check to detect android phones.Date: 25-Jul-2018
previewContentTemplates
.showBrowse
is false
.Date: 11-Apr-2018
explorer-fas
).elErrorContainer
validation for browseOnZoneClick
.reversePreviewOrder
to allow reversing files displayed in preview.showRemove
validation in fileActionSettings
.Date: 22-Jan-2018
readFiles
to allow input & preview of file objects programmatically.Date: 13-Nov-2017
ajaxAborted
status more correctly before upload.button
markup.cs
.piexif
errors).Date: 01-Oct-2017
Date: 21-Sep-2017
This release adds Bootstrap v4.x support.
showPreview
is false
.initialPreviewConfig
supplied.previewCache
splices deleted initial preview content items).refresh
method to overwrite options.{key}
& {filename}
tags.removeFromPreviewOnError
validation.Date: 27-Aug-2017
reset
method in docs.uploadUrlThumb
.retryErrorUploads
: boolean, will determine if errored out thumbnails can be retried for upload and submitted again.fileActionSettings.uploadRetryIcon
: Will change the icon of the upload button to retry icon specified here.fileActionSettings.uploadRetryTitle
: Will change the title of the upload button to retry title specified here.msgUploadError
: will be displayed within the progress bar on the errored out thumbnails.retryErrorUploads
is false
, then no upload button is shown on the errored out thumbnails.{dataKey}
.filebeforedelete
and enhance delete abort logic.reset
method.Date: 24-Jun-2017
hideThumbnailContent
) and display only file name/size.rtl
to be set) - includes new fileinput-rtl.css
(to be loaded after fileinput.css
for RTL styling).Date: 25-May-2017
getFrames
to get all thumbnail frames as jQuery objects.getExif
to retrieve exif data for a selected jpeg image.piexif
plugin.showPreview
is false
.Date: 13-May-2017
required
and msgFileRequired
properties.setTokens
string helper for easier replacement of tokens.sourceMappingUrl
in purify.min.js
.autoOrientImage
).showDelete
validation in fileActionSettings
.indicator
.data-fileindex
validation.initialPreviewShowDelete
.resizeIfMoreThan
to control image resize conditionally.Date: 02-Apr-2017
allowedFileTypes
to accept null values.overwriteInitial
validation for async batch uploads returning dynamic initial preview post upload.file-success-remove
event handling.msgUploadBegin
and msgUploadEnd
to display a better progress status. The layoutTemplates.progress
will support a new token {status}
.fileclear
and filepreajax
to be aborted via event.preventDefault()
.body
element if available to avoid multiple BS modals conflict.allowedFileTypes
.zoom
with parameter frameId
to allow custom triggering of zoomed preview for each thumbnail frame.Date: 21-Feb-2017
bootstrap.min.css
.Date: 11-Feb-2017
explorer
.layoutTemplates
.frameClass
setting in initialPreviewConfig
is considered.body
tag exists).initialPreview
generation and sortable behavior for async uploads.allowedPreviewTypes
.initialPreview
config set (post upload).fileimagesresized
event triggering.msgUploadEmpty
has been incorporated.uploadSingle
action in thumbnails.msgFileTypes
to control descriptions/localizations of file types displayed.Date: 17-Dec-2016
preferIconicPreview
will try to parse the previewFileIconSettings
and previewFileExtSettings
to automatically force iconic previews for file thumbnails.preferIconicZoomPreview
will try to parse the previewFileIconSettings
and previewFileExtSettings
to automatically force iconic previews in the zoomed content.initialPreview
content as well.minFileSize
which validates the minimum file size in KB for upload, else throws
a validation error using msgSizeTooSmall
. This defaults to 0
.minFileSize
is set to null
, then above validation is skipped and no minimum file size
check is performed.msgInvalidFileName
.false
then the next file will be read and current file skipped.Date: 20-Sep-2016
fileuploaded
event params.Date: 07-Aug-2016
getFilesCount
for returning upl + non-upl files count.progressUploadThreshold
to show processing when waiting for server response.previewId
to fileuploaded
event.ifSet
validation.Date: 09-Jul-2016
Date: 11-Jun-2016
themes
folder.showBrowse
that allows you to control the display of the browse buttonbrowseOnZoneClick
that allows you to select a file:
defaultPreviewContent
and that will be clickable to browse filesdropZoneClickTitle
that will be appended to the dragZoneTitle
for ajax uploads when browseOnZoneClick
is true
.actionDrag
will be available within layoutTemplates
to configure your drag indicator markup.other
template).js/plugins
folder.fileActionSettings
:
showDrag
dragIcon
dragClass
dragTitle
dragSettings
locales
: all translation JS files will be located herethemes
: all theme JS files will be located hereplugins
: third party JS plugins that will be used to work with bootstrap-fileinputtheme
added.upload
and remove
showZoom
, showDrag
, showRemove
, showUpload
are now added to fileActionSettings
to control display of these buttonszoomIcon
, zoomClass
, zoomTitle
are available within fileActionSettings
for controlling the zoom button styles and display.dragIcon
, dragClass
, dragTitle
are available within fileActionSettings
for controlling the drag indicator styles and display.actionZoom
and actionDrag
are available within layoutTemplates
to configure the markup of the zoom and drag buttons.initialPreview
can be setup MORE easier without writing or returning entire markup. Thus the new functionality will enable to use built in previewTemplates
.initialPreviewAsData
is available to control the above. If set to true
, it will allow developers to now pass just the data within initialPreview
(instead of complete markup) and the markup will be auto generated using previewTemplates
.initialPreviewFileType
to set the default file type for initial preview. Defaults to image
. Must be on of the keys in fileTypeSettings
.initialPreviewConfig
. The new properties available within initialPreviewConfig
are:
type
: Override initialPreviewFileType
at global level and set a separate type for each file in the initial preview.previewAsData
: boolean property to override the initialPreviewAsData
setting at global levelprev
next
fullscreen
borderless
toggleheader
close
previewZoomSettings
: Will allow to set the CSS style (e.g. width, height and other CSS style settings) for each zoomed content type (i.e. image
, pdf
, video
etc.).previewZoomButtonIcons
: Ability to set the labels for previous, next, fullscreen, borderless, and close buttons.previewZoomButtonTitles
: Ability to set the titles for previous, next, fullscreen, borderless, and close buttons.previewZoomButtonClasses
: Ability to set the CSS classes for previous, next, fullscreen, borderless, and close buttons.initialPreview
. In addition a new template for PDF is available within previewTemplates
.DOMPurify
plugin (and available in plugins folder). This processes and cleans the HTML from XSS before previewing. This behavior can be controlled via purifyHtml
property that defaults to true
.maxFilePreviewSize
to control preview of large size files.allowedPreviewTypes
.Date: 28-Feb-2016
_
.peerDependencies
.msg
param in fileerror
, fileuploaderror
, and filefoldererror
events.removeFromPreviewOnError
to false
.webkitdirectory
for upload.removeFromPreviewOnError
to false
.Date: 25-Jan-2016
Date: 22-Jan-2016
removeFromPreviewOnError
.sass
for bootstrap-sass-official
support.change
and fileselect
events.Date: 18-Nov-2015
zh-TW
translation browseLabel
wording.buttonLabelClass
.file
.Date: 13-Sep-2015
defaultPreviewContent
to control a default preview.showClose
and new layout template close
to control close icon display.fileimageloaded
(fires after each image is loaded in preview) - this is an existing eventfileimagesloaded
(fires after all images are loaded in preview)fileimageresized
(fires after each image in preview is resized)fileimagesresized
(fires after all images in preview are resized)fileimageresizeerror
(fires when any image resize error is faced)showPreview
is false
.Date: 26-Aug-2015
data.errorkeys
more correctly.initialCaption
better when preview is cleared.parseError
method.fileActionSettings
.Date: 27-Jul-2015
filepreajax
.autoReplace
property.Date: 22-Jul-2015
refresh
method.destroy
method.beforeSend
events.previewId
and index
in extra data for individual thumbnail uploads (ajax).Date: 21-Jun-2015
initUploadSuccess
.Date: 18-Jun-2015
Date: 15-Jun-2015
minImageWidth
minImageHeight
maxImageWidth
maxImageHeight
msgImageWidthSmall
msgImageHeightSmall
msgImageWidthLarge
msgImageHeightLarge
data.error
being empty.initialPreviewConfig
.revokeObjectURL
.showUploadedThumbs
that will display uploaded thumbnails until the remove/clear button is explicitly pressed.filesuccessremove
. This will be triggered on removing the uploaded thumbnail using the thumbnail delete button. The event shares the following parameters:
id
: the HTML id attribute of the thumbnail container
The event
can be set to return false
to abort the thumbnail removal.overwriteInitial
correctly for ajax uploads.Date: 11-May-2015
language
property to allow configuring multi lang widgets on same page.Date: 02-May-2015
deleteExtraData
.Date: 30-Mar-2015
previewThumbTags
and initialPreviewThumbTags
will be available for configuration.filebatchselected
event is triggered after FileReader completes reading files selected.showAjaxErrorDetails
.msgFoldersNotAllowed
added to the plugin to allow configuring the message shown. The event filefoldererror
is triggered when a folder is dragged.filebatchuploadsuccess
or filebatchuploadcomplete
) e.g. change
, fileselect
, filepreupload
, filebatchpreupload
etc. The object can return the following keys:
message
: string, the validation error message to be displayed before upload. If this is set the plugin will automatically abort the upload whenever called and display this as an error message. You can use this property for example to read a file and perform your own custom validation.data
: object, an optional associative array of additional data that you can pass for usage later.abortData
in the parameters for the new filecustomerror
event. This new event will be triggered during upload, when you have triggered an abort from any of the other events.filebatchuploadcomplete
& filebatchuploadsuccess
.
initialPreview
and initialPreviewConfig
after an ajax upload by returning these within the data object from your ajax response on fileuploaded
& filebatchuploadsuccess
.fileMinCount
and msgFilesTooLess
(useful to make file input mandatory).
fileMinCount
property will allow to set the minimum file count needed before triggering upload. It will work for both ajax
uploads and normal form based submission
.fileMinCount
= 1
). The msgFilesTooLess
will be displayed and error raised.fileMinCount
is set to 0
it will be treated as files are optional and no error will be triggered.$.fn.fileinput.locales['<lang-code>']
$.fn.fileinput.locales['en']
within the plugin core code<lang>.js
filebatchuploadcomplete
on async batch upload completion.ajaxDeleteSettings
to help extend and add to delete ajax settings.ajaxSettings
to help extend and add upload ajax settingspreviewFileIcon
to configure file icon shown in preview for unreadable file types.maxFileSize
and maxFileCount
to numeric - even if they have been setup as a string.false
.initialPreviewConfig
.deleteUrl
property.deleteExtraData
property for ajax deletions.Date: 13-Feb-2015
outData
for events.progressClass
: styling for progress bar when upload is in processprogressCompleteClass
: styling for progress bar when upload is completemsgFileSecured
will display the security exception message.replaceAll
method instead of regexp parsing to replace tags in templates.filebatchselected
event triggered after every batch of files are selected.customLayoutTags
and customPreviewTags
included).Date: 20-Jan-2015
filedisabled
and fileenabled
.Date: 12-Jan-2015
Date: 26-Dec-2014
filebatchpreupload
for both synchronous and asynchronous batch uploads.otherActionButtons
to allow adding customized initial preview content actions.Date: 20-Dec-2014
filepreupload
fileuploaded
fileuploaderror
filebatchuploaderror
filebatchuploadsuccess
filebatchuploadcomplete
Date: 19-Dec-2014
filebatchuploadsuccess
filebatchuploadcomplete
uploadExtraData
and responseData
to following events
filepreupload
fileuploaded
fileuploaderror
filebatchuploaderror
filebatchuploadsuccess
filebatchuploadcomplete
filelock
fileunlock
Date: 18-Dec-2014
showPreview
is false.textEncoding
for reading the text files with right encoding.Date: 17-Dec-2014
Date: 14-Dec-2014
initialDelimiter
to initialPreviewDelimiter
uploadUrl
property is MANDATORY and must be set.showPreview
is set to false, or uploadUrl is not supported plugin will degrade to normal form based upload.showCancel
: shows a cancel button for aborting ajax uploads (defaults to true
).cancelLabel
: label for the cancel button.cancelTitle
: title for the cancel button on hover.cancelIcon
: icon markup for the cancel buttoncancelClass
: CSS class for the cancel button.removeTitle
: title for the remove button on hover.uploadTitle
: title for the upload button on hover.uploadUrl
: the url that will be used to process AJAX based uploads (using FormData XHR2).uploadExtraData
: extra data that will be passed as data to the url/AJAX server call via POSTuploadAsync
: whether the batch upload of multiple files will be asynchronous/in parallel. Defaults to true
.initialPreviewShowDelete
: shows a delete button for each initial preview content's thumbnail (defaults to true
).initialPreviewConfig
: configuration for setting up each initialPreviewContent
item (associative array/object)
caption
: The caption or filename to display for each initial preview item content.width
: The CSS width of the image/content displayed.url
: The URL for deleting the image/content via AJAX (shown only for initialPreviewContent
).key
: The key that will be passed to the URL via POST (shown only for initialPreviewContent
).dropZoneEnabled
: Enable a drag and drop zone for dragging files and is available only for ajax based uploads (defaults to true
).dropZoneTitle
: Title to be displayed in the drag & drop zone.dropZoneTitleClass
: CSS class for the drag & drop zone title.fileActionSettings
: configuration for setting up actions for newly selected file thumbnails in the preview (associative array/object)
removeIcon
: icon for remove button to be displayed in each file thumbnail.removeClass
: CSS class for the remove button in each file thumbnail.removeTitle
: title for remove button in each file thumbnail.uploadIcon
: icon for upload button to be displayed in each file thumbnail.uploadClass
: CSS class for the remove button in each file thumbnail.uploadTitle
: title for remove button in each file thumbnail.indicatorNew
: an indicator (HTML markup) for new pending upload displayed in each file thumbnail.indicatorSuccess
: an indicator (HTML markup) for successful upload displayed in each file thumbnail.indicatorError
: an indicator (HTML markup) for error in upload displayed in each file thumbnail.indicatorLoading
: an indicator (HTML markup) for ongoing upload displayed in each file thumbnail.indicatorNewTitle
: title to display on hover of indicator for new pending upload in each file thumbnail.indicatorSuccessTitle
: title to display on hover of indicator for successful in each file thumbnail.indicatorErrorTitle
: title to display on hover of indicator for error in upload in each file thumbnail.indicatorLoadingTitle
: title to display on hover of indicator for ongoing upload in each file thumbnail.Date: 08-Dec-2014
refreshPreview
using updateFileDetails
.slugCallback
property.<a>
tag.Date: 23-Nov-2014
filebrowse
and fileselectnone
.Date: 13-Nov-2014
fileimageloaded
event.autoFitCaption
is added which defaults to true
. When this is true
the plugin will auto fit caption text within the container dynamically
and responsively based on window size.Date: 11-Nov-2014
fileloaded
event when showPreview
is false
.Date: 15-Oct-2014
elErrorContainer
for displaying validation errors.Date: 09-Oct-2014
Date: 20-Sep-2014
Note: There are BC Breaking Changes with release v2.4.0.
With release v2.4.0, the plugin has been revamped to support and configure a wide variety of file formats for preview. This may break some backward compatibility (BC) for older versions that use custom templates.
The following are the major changes with release v2.4.0:
image
, text
, html
, video
, audio
, flash
, object
, and other
.allowedPreviewTypes
: You can now configure which all file types are allowed to be shown as a preview. This defaults to ['image', 'html', 'text', 'video', 'audio', 'flash', 'object']
.
Thus all file types are treated as an object to preview by default. For exampleTo preview only image
and video
, you can set this to ['image', 'video']
.allowedPreviewMimeTypes
: In addition to allowedPreviewTypes
, you can also control which all mime types can be displayed for preview. This defaults to null,
meaning all mime types are supported.layoutTemplates
: Allows you to configure all layout template settings within one property. The layout objects that can be configured are: main1
, main2
,
preview
, caption
, and modal
.previewTemplates
: All preview templates for each preview type have been combined into one property, instead of separate templates for image, text etc.
The keys are the formats as set in allowedPreviewTypes
and values are the templates used for previewing. There are default prebuilt templates for each
preview file type (generic
, image
, text
, html
, video
, audio
, flash
, object
, and other
). The generic
template is used only for displaying
initialPreview
content using direct markup.previewSettings
: Allows you to configure width and height for each preview image type. The plugin has default widths and heights predefined for each type i.e
image
, text
, html
, video
, audio
, flash
, and object
.fileTypeSettings
: Allows you to configure and identify each preview file type using a callback. The plugin has default callbacks predefined to identify each type i.e
image
, text
, html
, video
, audio
, flash
, and object
.NOTE: Flash preview will require Shockwave flash to be installed and supported by the client browser. The flash preview currently works successfully with webkit browsers only. Video & Audio formats are however supported by all modern browsers that support the HTML5
video
/audio
tags. Note that browsers have limited number of video/audio formats supported by the HTML5 video element (e.g. mp4, webm, ogg, mp3, wav). The size of video files are recommended to be small (to be controlled throughmaxFileSize
property) so that it does not affect the preview performance. You can copy a few files from theexamples
directory of this plugin repo, to test a few examples of flash and video files.
Date: 19-Sep-2014
Date: 19-Aug-2014
Date: 11-Aug-2014
fileloaded
event to increment previewId
and enhance to return file index.msgFilesTooMany
, msgFileNotFound
, msgFileNotReadable
, msgFilePreviewAborted
, and msgFilePreviewError
.maxFilesCount
. Defaults to 0
which means unlimited.Date: 25-Jul-2014
initialPreview
to pass multiple content delimited as a string.initPreview
is false.msgSelected
.disable
, enable
fileerror
, fileloaded
, filecleared
.maxFileSize
configuration.Date: 21-Jul-2014
Date: 15-Jul-2014
Date: 02-Jul-2014
overwriteInitial
option. This is by default set to true
, whereby, any initialPreview
content set will be overwritten, when new file is uploaded or when files are cleared. Setting it to false
will help displaying
a saved image or file from database always - useful especially when using the multiple
file upload feature.Date: 03-Jun-2014
refresh
method. This enables you to dynamically change element attributes or plugin options
at runtime and refresh the widget.Date: 23-May-2014
Date: 01-Jan-2014
Initial release. The following features are included in this release:
type = file
to an advanced file picker input if you set its class = file
. All options to the input can be passed as HTML5 data
attributes.filereset
and fileclear
.