A versatile and user-friendly file management system built for Vue and React that allows single and multiple file uploading with a preview feature, returning an array of selected files. It supports custom designs by overriding the style classes.
The library provides support for Vue and React. Each has its own set of features and information. Explore the individual folders for more details.
This folder includes files and resources related to the Vue file upload library. and also, it has demo project. so, it's easy to understand and you can use it directly.
Checkout the live demo on, codesandbox
For more details, check out the Vue README.
This folder includes files and resources related to the React file upload library. and also, it has demo project. so, it's easy to understand and you can use it directly.
Checkout the live demo on, codesandbox
For more details, check out the React README.
Feel free to explore each folder for specific information about Vue and React!
- Single File Upload: Users can upload or change a single file.
- Multiple File Management: Easily manage multiple files.
- File Preview: Provides a preview of uploaded files (e.g., images, videos, gifs).
- Responsive Design: Ensures a seamless experience on various devices.
- Fully customized: Customize file upload UI as per your requirements
Using npm:
npm install @canopassoftware/vue-file-upload
Using yarn:
yarn add @canopassoftware/vue-file-upload
Using npm:
npm install @canopassoftware/react-file-upload
Using yarn:
yarn add @canopassoftware/react-file-upload
We are providing some examples with design. so, you can easily take it and use into your project.
vue - view code
react - view code
vue- view code
react - view code
vue - view code
react - view code
vue - view code
react - view code
For over-riding the design of default buttons, you can over-ride it's CSS by class name.
For example.,
- Over-ride CSS of remove file button you can add it like,
.remove-btn {
color: white;
background-color: red;
font-size: 25px;
padding: 5px;
}- Over-ride CSS of submit/upload file button you can add it like,
.upload-btn {
color: white;
background-color: rgb(51, 65, 85);
font-size: 25px;
padding: 5px 10px;
}We welcome contributions from the community. To contribute to this project, please follow these guidelines:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them.
- Push your changes to your fork.
- Submit a pull request with a clear description of your changes.
- Please ensure your code follows the project's coding standards and includes appropriate documentation.
This repository is owned and maintained by the Canopas team. If you are interested in building web apps or designing products, please let us know. We'd love to hear from you!
This project is licensed under the MIT.