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.

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!

• Features
• Installation
  • Vue
  • React
• Examples
  • Canvas View
  • Square View
  • Horizontal Long Square View
  • Circular View
  • Over-ride CSS
• Contributing
• Credits
• License

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