Bs Custom File Input
A little plugin for Bootstrap 4 custom file input
Overview
bs-custom-file-input is a nifty little plugin designed to enhance Bootstrap 4's custom file input functionality. This minimalistic tool is built purely in VanillaJS, making it framework-agnostic and suitable for use in both React and Angular projects. With this plugin, you can bring life to your file inputs without relying on jQuery or heavy libraries, all while keeping your bundle size to a minimum.
This plugin offers a user-friendly way to display uploaded file names, reset inputs, and even allows for drag-and-drop file uploads. Its lightweight nature, combined with straightforward usage, makes it an appealing choice for developers looking to streamline file input handling in their web applications.
Features
- Works with Bootstrap 4: Integrates seamlessly with Bootstrap 4, enhancing the default file input experience.
- No dependencies required: Operates without the need for jQuery, optimizing performance and simplicity.
- Dynamic file name display: Automatically shows the name of the uploaded file, improving user interaction.
- Multi-file support: Capable of displaying names for multiple files when multiple inputs are used.
- Input reset functionality: Effortlessly reset the custom file input to its initial state for better form handling.
- Custom selectors: Allows the use of custom input and form selectors, providing flexibility in implementation.
- Drag and drop feature: Supports drag-and-drop functionality for even easier file uploads.
- Lightweight: At just 2kb (compressed), it adds minimal overhead to your project, keeping loading times fast.
- Angular
Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.