# kartik-v/bootstrap-fileinput

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/kartik-v-bootstrap-fileinput).**

5,350 stars · 2,347 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/kartik-v/bootstrap-fileinput
- Homepage: http://plugins.krajee.com/file-input
- awesome-repositories: https://awesome-repositories.com/repository/kartik-v-bootstrap-fileinput.md

## Topics

`ajax-upload` `bootstrap` `bootstrap-fileinput` `bower` `chunk` `chunked-uploads` `css` `filereader-api` `html` `html5` `javascript` `jquery` `jquery-plugin` `krajee` `krajee-explorer-theme` `resumable` `resumable-upload` `theme` `upload` `xhr`

## Description

bootstrap-fileinput is a Bootstrap-compatible HTML5 file upload widget and plugin. It provides a customizable interface for selecting and uploading multiple files, featuring integrated image previews, drag-and-drop support, and client-side validation for file types, sizes, and counts.

The project includes a resumable file upload client that slices large files into chunks to ensure stability over intermittent connections and allow transfers to be paused and resumed. It also features a client-side image processor capable of resizing images and reading EXIF metadata to automatically correct image orientation before transmission.

The system covers a broad range of capabilities, including asynchronous file transfers with real-time progress tracking, recursive folder uploads, and PDF document rendering. The interface supports extensive customization through layout templates, custom themes, and multi-language localization with right-to-left orientation support.

## Tags

### User Interface & Experience

- [Multi-Method File Uploads](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/drag-and-drop-file-upload/multi-method-file-uploads.md) — Provides a comprehensive interface for selecting and uploading files via drag-and-drop and multi-file selection.
- [File Inputs](https://awesome-repositories.com/f/user-interface-experience/file-inputs.md) — Implements a customizable HTML5 file input component for validating file types, sizes, and counts.
- [File Upload Queue Widgets](https://awesome-repositories.com/f/user-interface-experience/file-upload-queue-widgets.md) — Manages an internal upload queue to coordinate the flow and retrieval of pending files. ([source](http://plugins.krajee.com/file-input/plugin-methods))
- [Asynchronous Uploaders](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/asynchronous-uploaders.md) — Provides non-blocking background file transfers with the ability to start, cancel, pause, or resume uploads. ([source](http://plugins.krajee.com/file-input/plugin-methods))
- [Drag-and-Drop File Upload](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/drag-and-drop-file-upload.md) — Implements a dedicated drop zone for users to drag and drop files from their system to initiate uploads. ([source](http://plugins.krajee.com/file-input/plugin-options))
- [Multiple File Selection](https://awesome-repositories.com/f/user-interface-experience/multiple-file-selection.md) — Allows selecting and submitting multiple files simultaneously through a single input interface. ([source](http://plugins.krajee.com/))
- [Layout Template Overrides](https://awesome-repositories.com/f/user-interface-experience/control-template-customizations/layout-template-overrides.md) — Enables overriding default HTML markup for components like progress bars, file icons, and action buttons. ([source](http://plugins.krajee.com/file-input/plugin-options))
- [Widget Customizations](https://awesome-repositories.com/f/user-interface-experience/custom-widget-frameworks/extensible-widget-toolkits/ui-component-libraries/widget-customizations.md) — Provides custom CSS classes and templates to modify the appearance of the widget's caption and preview sections. ([source](http://plugins.krajee.com/file-input))
- [File Previewers](https://awesome-repositories.com/f/user-interface-experience/file-previewers.md) — Implements a system for selecting multiple files and viewing their content previews before initiating an upload. ([source](http://plugins.krajee.com/file-input/demo))
- [Resumable Transfer Tracking](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/asynchronous-uploaders/resumable-transfer-tracking.md) — Tracks byte-offsets and chunk status to resume interrupted uploads and verify server reception. ([source](http://plugins.krajee.com/file-input/plugin-events))
- [Folder Upload Support](https://awesome-repositories.com/f/user-interface-experience/folder-upload-support.md) — Supports uploading entire directory structures while recursively reading files and preserving hierarchy. ([source](http://plugins.krajee.com/file-input/demo))
- [Right-To-Left Support](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits/right-to-left-support.md) — Adjusts the visual layout and alignment for right-to-left languages using specific CSS styling. ([source](http://plugins.krajee.com/file-input/plugin-options))
- [HTML Markup Templates](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates.md) — Generates HTML markup for previews and progress bars using configurable layout templates.
- [Interface Localization](https://awesome-repositories.com/f/user-interface-experience/interface-localization.md) — Supports multi-language interface localization using ISO locale codes for labels and messages. ([source](http://plugins.krajee.com/file-input/plugin-options))
- [Interface Text Localization](https://awesome-repositories.com/f/user-interface-experience/interface-text-localization.md) — Translates interface labels and messages using ISO locale codes and external translation files.
- [Client-Side Resizing](https://awesome-repositories.com/f/user-interface-experience/media-uploaders/editor-image-uploaders/client-side-resizing.md) — Modifies image dimensions in the browser to reduce bandwidth before transmission. ([source](http://plugins.krajee.com/file-input/plugin-options))
- [UI Localizations](https://awesome-repositories.com/f/user-interface-experience/ui-localizations.md) — Provides a localized interface supporting various ISO locale codes and right-to-left text orientation.
- [Upload Batching Strategies](https://awesome-repositories.com/f/user-interface-experience/upload-batching-strategies.md) — Supports sending selected files as a single combined batch or via multiple individual parallel requests. ([source](http://plugins.krajee.com/file-input))
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Allows customization of the visual appearance through predefined themes and custom CSS selectors. ([source](http://plugins.krajee.com/file-input/demo))

### Part of an Awesome List

- [Chunked Uploaders](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/chunked-uploaders.md) — Splits large files into smaller segments to support resumable uploads and prevent network timeouts.
- [File Upload Constraint Validation](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/upload-constraints/file-upload-constraint-validation.md) — Enforces minimum and maximum limits on the number of files selected for upload. ([source](http://plugins.krajee.com/file-input/demo))
- [Pre-Upload File Previews](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/pre-upload-file-previews.md) — Displays pre-existing files with captions and allows users to rearrange or delete them before uploading. ([source](http://plugins.krajee.com/file-input))
- [Upload Lifecycle Hooks](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/upload-lifecycle-hooks.md) — Provides customizable event hooks to manage UI states and logic before and after file transfers. ([source](http://plugins.krajee.com/file-input/plugin-events))
- [Asynchronous Upload Queues](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/upload-queuing/parallel-upload-optimizers/asynchronous-upload-queues.md) — Maintains an internal queue to coordinate sequential or parallel transmission of selected files.

### DevOps & Infrastructure

- [Large File Optimization](https://awesome-repositories.com/f/devops-infrastructure/file-uploaders/large-file-optimization.md) — Implements chunking protocols to ensure the stable transfer of oversized files over unstable connections. ([source](http://plugins.krajee.com/file-input/demo))
- [Client-Side File Processing](https://awesome-repositories.com/f/devops-infrastructure/file-uploaders/client-side-file-processing.md) — Offers a callback mechanism to convert or encrypt file content in the browser before transmission. ([source](http://plugins.krajee.com/file-input/plugin-options))

### Networking & Communication

- [Multipart File Uploads](https://awesome-repositories.com/f/networking-communication/http-file-uploads/large-file-uploads/multipart-file-uploads.md) — Sends files to a server using background HTTP requests with real-time progress tracking. ([source](http://plugins.krajee.com/file-input))
- [Chunked Resumable Transfers](https://awesome-repositories.com/f/networking-communication/resumable-file-transfers/chunked-resumable-transfers.md) — Divides large files into fixed-size chunks to ensure stability and enable resumable transfers. ([source](http://plugins.krajee.com/file-input))

### Security & Cryptography

- [File Type Validators](https://awesome-repositories.com/f/security-cryptography/file-upload-security/file-type-validators.md) — Validates selected files against a list of allowed extensions or MIME types. ([source](http://plugins.krajee.com/file-input/plugin-options))

### Web Development

- [Bootstrap Form Enhancements](https://awesome-repositories.com/f/web-development/bootstrap-form-enhancements.md) — Adds advanced file input capabilities and custom styling to web forms built with the Bootstrap framework.
- [Client-Side File Validations](https://awesome-repositories.com/f/web-development/client-side-file-validations.md) — Checks file types, sizes, and quantities in the browser before transmitting data to a remote server.
- [File Size Validations](https://awesome-repositories.com/f/web-development/file-size-validations.md) — The project checks if files exceed maximum size limits or fall below minimum size requirements. ([source](http://plugins.krajee.com/file-input/plugin-options))
- [Image Resizing](https://awesome-repositories.com/f/web-development/client-side-media-processing/client-side-image-matting/image-resizing.md) — Resizes images and validates dimensions on the client side before sending them to the server. ([source](http://plugins.krajee.com/file-input/demo))

### Data & Databases

- [Client-Side Metadata Extraction](https://awesome-repositories.com/f/data-databases/file-metadata-services/client-side-metadata-extraction.md) — Extracts EXIF orientation tags in the browser to automatically rotate and mirror image thumbnails.

### Development Tools & Productivity

- [API Error Handling](https://awesome-repositories.com/f/development-tools-productivity/api-error-handling.md) — Displays human-readable error messages for validation failures, duplicate files, or server-side errors. ([source](http://plugins.krajee.com/file-input/plugin-events))
- [Media Selection Previews](https://awesome-repositories.com/f/development-tools-productivity/developer-utilities-libraries/workflow-productivity-enhancers/developer-productivity-utilities/developer-productivity/selection-content-previews/media-selection-previews.md) — Renders thumbnails or content for images, text, audio, and video files during the selection process. ([source](http://plugins.krajee.com/file-input))

### Graphics & Multimedia

- [Orientation Corrections](https://awesome-repositories.com/f/graphics-multimedia/exif-metadata-handling/orientation-corrections.md) — Automatically rotates or mirrors JPEG images based on EXIF orientation tags for correct display. ([source](http://plugins.krajee.com/file-input/plugin-options))

### Software Engineering & Architecture

- [Lifecycle Event Hooks](https://awesome-repositories.com/f/software-engineering-architecture/lifecycle-event-hooks.md) — Executes custom callback functions at specific stages of the file processing lifecycle.
- [Recursive Directory Traversers](https://awesome-repositories.com/f/software-engineering-architecture/recursive-validation-engines/recursive-tree-traversers/file-system-traversers/recursive-directory-traversers.md) — Recursively walks directory trees using the File System API to queue all nested files for upload.