Web File Management with Preview - Fully Customized

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.

Vue File Upload

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.

React File Upload

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!

Table of Contents

• Features
• Installation
• Examples
  • Canvas View
  • Square View
  • Horizontal Long Square View
  • Circular View
  • Over-ride CSS
• Contributing
• License
• Contact Information

Features

• 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

Installation

Vue

Using npm:

npm install @canopassoftware/vue-file-upload

Using yarn:

yarn add @canopassoftware/vue-file-upload

React

Using npm:

npm install @canopassoftware/react-file-upload

Using yarn:

yarn add @canopassoftware/react-file-upload

Examples

We are providing some examples with design. so, you can easily take it and use into your project.

Canvas View

vue - view code
react - view code

Square View

vue- view code
react - view code

Horizontal Long Square View

vue - view code
react - view code

Circular View

vue - view code
react - view code

Over-ride CSS

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;
}

Contributing

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.

License

This project is licensed under the MIT.

Contact Information

Web file upload is owned and maintained by the Canopas team. You can reach out them on Github at canopas for questions or need support.