File Input Features

• 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.
• 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 = 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.
• 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.

1. 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 and initialCaption properties in the plugin options section for configuring this.
2. Option to show/hide any or all of the following:
   • caption section
   • preview section
   • upload button
   • remove button
3. 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.
4. 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 …).
5. Customise the messages for preview, progress, and files selected.
6. Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.
7. Triggers JQuery events for advanced development. Events currently available are filereset, fileclear, filecleared, fileloaded, and fileerror.
8. Disabled and readonly file input support.
9. Dynamically auto size the file captions for long file names exceeding container width.
10. Raise new fileimageuploaded event that fires after image is completely loaded on the preview container.
11. Autosize preview images when they exceed the size of the preview container.
12. Completely templatized and extensible to allow configuration of the file-input the way the developer wants.
13. 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.
14. 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'].
15. 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.
16. 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.
17. 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.
18. 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.
19. 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.
20. 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.