File Input plugin with Bootstrap / CSS styling and AJAX based actions
An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. This plugin was initially inspired by this blog article and Jasny’s File Input plugin. But the plugin has now matured with various additional features and enhancements to be a complete (yet simple) file management tool and solution for web developers.
The plugin incorporates a simple HTML markup with enhanced CSS styling of a HTML file input. But it enhances this further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
With release v4.0.0, the plugin now supports AJAX based uploads using HTML 5 FormData and XHR2 protocol, which is supported in most modern browsers. It also has inbuilt support for AJAX based file deletion from the server. This thereby allows powerful features to append, add, remove files on the fly. The plugin also has added DRAG & DROP support for ajax uploads. In the event, the browser does not support FormData or XHR2, the plugin degrades it to a normal form submission.
The latest version of the plugin v4.1.4 has been released. Refer the CHANGE LOG for details.
File Input Features
- The file input consists of the following three sections with options and templates to control the display:
- file caption section: to display a brief information of the file(s) selected
- file action buttons section: to browse, remove, and upload files.
- file preview section: to display the selected files on client for preview (supports preview of image, text, flash, and video file types). Other file types will be displayed as normal thumbnails.
- The plugin automatically converts an input with
type = fileto an advanced file picker input if you set its
class = file. All options to the input can be passed as HTML5
- Ability to select and preview multiple files. Uses HTML 5 File reader API to read and preview files. Displays the progress of files being being loaded onto the preview zone, in case many files are chosen.
- Offers predefined templates and CSS classes which can be changed to style your file-input display as per your needs.
- With v1.5.0, you can now configure the plugin to show an initial preview of images/files with initial caption (more useful for record update scenarios). Refer the
initialCaptionproperties in the plugin options section for configuring this.
- Option to show/hide any or all of the following:
- caption section
- preview section
- upload button
- remove button
- Customise the location of the target container elements to display the entire plugin, the caption container, the caption text, the preview container, preview image, and preview status.
- For text file previews, autowrap the text to the thumbnail width, and show a wrap indicator link to display complete text on hover. You can customize the wrap indicator (which defaults to …).
- Customise the messages for preview, progress, and files selected.
- Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.
- Triggers JQuery events for advanced development. Events currently available are
- Disabled and readonly file input support.
- Dynamically auto size the file captions for long file names exceeding container width.
- Raise new
fileimageuploadedevent that fires after image is completely loaded on the preview container.
- Autosize preview images when they exceed the size of the preview container.
- Completely templatized and extensible to allow configuration of the file-input the way the developer wants.
- Preview intelligence based on various file preview types. The inbuilt file support types are categorized as
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
video, you can set this to
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. >NOTE: With release 2.5.0 you can now control which file types or extensions are allowed for upload by setting
layoutTemplates: Allows you to configure all layout template settings within one property. The layout objects that can be configured are:
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
allowedPreviewTypesand values are the templates used for previewing. There are default prebuilt templates for each preview file type (
generictemplate is used only for displaying
initialPreviewcontent 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
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
- Replacing tags within templates has been enhanced. With this release it will automatically check for multiple occurrences of each tag to replace within a template string.
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
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 through
maxFileSize property) so that it does not affect the preview performance. You can copy a few files from the
examples directory of this plugin repo, to test a few examples of flash and video files.