Automatically convert a file input to a bootstrap file input widget by setting its class as file.

Hide file preview thumbnails.

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.

Set the file input widget to be readonly or disabled.

Initialize file input widget via javascript. Hide the caption and display widget with only buttons. You can add the file-loading class to show a spinning indicator, while the plugin loads.

Change size of whole widget (e.g. bootstrap input group styling) and set max files count allowed to 10.

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)

×

The Moon and the Earth

Remove Cancel Upload

  Browse …

Set maximum file upload size to 100 KB. 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.

×

The Moon and the Earth

Remove Cancel Upload

  Browse …

Display preview on load with preset files/images and captions with overwriteInitial set to true.

Show only image files for selection & preview. Control button labels, styles, and icons for the browse, upload, and remove buttons.

Preview section control. Change preview background and allow text files ONLY for selection as well as preview.

Advanced customization using templates. For example, change position of buttons from right to left.

Using plugin methods to alter input at runtime. For example, click the Modify button to disable the plugin and change plugin options.

Allow only image and video file types to be uploaded. You can configure the condition for validating the file types using fileTypeSettings.

Allow only specific file extensions.

Disable preview and customize your own error container and messages.