Bootstrap file input plugin enhances the HTML 5 file input for Bootstrap 3.x into an advanced widget with file preview for various files, multiple selection and more. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It offers support for previewing a wide variety of files i.e. images, text, html, video, audio, flash, and objects.

Example

Single file upload can be also considered the default state, because JS configuration is the same in both single and multiple modes. The only difference is multiple attribute in file input type. You can disable certain features like previews and make it a regular customized 1 line file input. Keep in mind that input field itself has readonly attribute by default.

Example

When files are selected, file input library displays a list of thumbnails with actions by default. This preview area with all thumbnails and actions can be hidden by setting data-show-preview attribute or showPreview JS configuration option to false. Note - this option also disables initial drag and drop area and makes it less interactive, so that user can use only 1 option to choose files by clicking Browse button

Example

Use file input attributes (e.g. multiple upload) for setting input behavior and data attributes to control plugin options. For example, hide/show display of upload button and caption. Note that for multiple inputs, your server code must receive an array of file objects (e.g. for PHP server code, you must use the array naming convention for your input)

Example

Set the file input widget to be readonly or disabled by adding corresponding attribute to the file input. The following example demonstrates the disabled input field, which also disables input styling in focus state and removes pointer events from file input field and "Browse" button. See "Using plugin methods" example for reference

Example

Initialize file input widget via javascript (data attributes are not supported in this particular example). Hide the caption and display widget with only buttons (and hide the drop zone by setting dropZoneEnabled to false). You can envelop the input within a container with the file-loading class to show a spinning indicator, while the plugin loads.

Example

Since file input library is built on top of Bootstrap, it re-uses class name logic accross containers. This allows us to control input group sizing just like we would do it in the input group component itself. Use input-group-[sm|lg] class values in data-input-group-class data attribute to change default sizing to small or large.

Thanks to deep customization possibilities via both JS and data attributes, file input allows us to adjust default styling without even touching any CSS. In the following example we configured file input to show only image files for selection & preview. We also changed control button labels, styles, and icons for the browse, upload, and remove buttons

Example

Using data attributes to configure the entire widget. This example shows how you can pass json within data attributes in the HTML markup (check data-allowed-file-extensions which basically sets the plugin property allowedFileExtensions) Allow only specific file extensions. In this example only jpg, gif, png and txt extensions are allowed

Example

With accept option that can be specified in the markup, you can control file types that users are allowed to upload. In this example we limited file types to image and video only by adding accept="image/*, video/*" attribute. Additionally you can configure the condition for validating the file types using `fileTypeSettings` in your JS configuration

Example

Display preview on load with preset files/images and captions with overwriteInitial set to false. So the initial preview is always displayed when additional files are overwritten (useful for multiple upload) scenario. Check how the initial preview config can allow file thumbnails to include actions for delete and download (via the delete url (url) and the download url (downloadUrl)

Example

Similar configuration to scenario 1, but with overwriteInitial set to true that will overwrite files in the initial preview on selection. This scenario shows how you can set a different file name than the caption for your file actions. The file name for download is automatically displayed as the caption setting.

Example

File input configuration options allows us to change default styles of any button: browse, upload, remove etc. Besides different color options, we can also use our utility classes to change width of the main "Browse" button. Here we added w-100 width helper class to data-browse-class attribute to give the button 100% width.

Example

Demonstration on usage of enable/disable plugin methods to manipulate the fileinput plugin. Besides mode toggle, file input also supports destroy, create, refresh and clear methods. Click the button to disable file input and click again to enable it. JS config looks like this - $([selector]).fileinput([method]).

Example

Asynchronous / Parallel AJAX based uploads with drag and drop functionality. Just set the uploadUrl data property and multiple to true. Note that the file input name attribute for multiple uploads should be setup as a array format. You can modify files selected before upload i.e. append or delete

Example