BootStrap file upload demo

bootstrap-fileinput ==================== [](http://badge.fury.io/bo/bootstrap-fileinput) [](https://packagist.org/packages/kartik-v/bootstrap-fileinput) [](https://packagist.org/packages/kartik-v/bootstrap-fileinput) [](https://packagist.org/packages/kartik-v/bootstrap-fileinput) [](https://packagist.org/packages/kartik-v/bootstrap-fileinput) An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality 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.  This plugin was initially inspired by [this blog article](http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/) and [Jasny's File Input plugin](http://jasny.github.io/bootstrap/javascript/#fileinput). 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. > NOTE: The latest version of the plugin is v4.2.8 (dev-master). Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. ## Features ### File Input Features 1. The plugin will convert a simple HTML file input to an advanced file picker control. Will help fallback to a normal HTML file input for browsers not supporting JQuery or Javascript. 2. 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. 3. The plugin automatically converts an input with `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. 4. 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. 5. Offers predefined templates and CSS classes which can be changed to style your file-input display as per your needs. 6. 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 [`initialPreview`](https://github.com/kartik-v/bootstrap-fileinput/blob/master/README.md#initialpreview) and [`initialCaption`](https://github.com/kartik-v/bootstrap-fileinput/blob/master/README.md#initialcaption) properties in the plugin options section for configuring this. 7. Option to show/hide any or all of the following: - caption section - preview section - upload button - remove button 8. 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. 9. 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 …). 10. Customise the messages for preview, progress, and files selected. 11. Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload. 12. Triggers JQuery events for advanced development. Events currently available are `filereset`, `fileclear`, `filecleared`, `fileloaded`, and `fileerror`. 13. Disabled and readonly file input support. 14. Dynamically auto size the file captions for long file names exceeding container width. 15. Raise new `fileimageuploaded` event that fires after image is completely loaded on the preview container. 16. Autosize preview images when they exceed the size of the preview container. 17. Completely templatized and extensible to allow configuration of the file-input the way the developer wants. 18. Preview intelligence based on various file preview types. The inbuilt file support types are categorized as `image`, `text`, `html`, `video`, `audio`, `flash`, `object`, and `other`. 19. `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']`. 20. `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 `allowedFileTypes` and `allowedFileExtensions`. 21. `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`. 22. `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. 23. `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`. 24. `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`. 25. 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. 26. Manipulate events and add your own custom validation messages easily by returning output to abort uploads in any of the other events. 27. Support for translations and locales. ### File Upload Features With release 4.0.0, the plugin now also includes inbuilt support for AJAX Uploads and selectively adding or deleting files. AJAX upload functionality are built upon HTML5 FormData and XMLHttpRequest Level 2 standards. Most modern browsers do support this standard, but the plugin will automatically degrade to normal form based submission for unsupported browsers. 1. Add functionality for AJAX based UPLOAD using HTML5 FormDat