Skip to content

Commit c3730a1

Browse files
cp-dharti-rcp-dharti-r
committed
Combine vue and react file upload libraries
1 parent 56084c9 commit c3730a1

File tree

134 files changed

+23188
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

134 files changed

+23188
-2
lines changed

‎.github/workflows/lint.yml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: Run lint in vue and react
2+
3+
on:
4+
push:
5+
6+
jobs:
7+
vue-lint:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- uses: actions/checkout@v4
11+
- uses: actions/setup-node@v3
12+
with:
13+
node-version: "20.x"
14+
- run: |
15+
cd vue
16+
npm ci
17+
npm run lint
18+
19+
react-lint:
20+
runs-on: ubuntu-latest
21+
steps:
22+
- uses: actions/checkout@v4
23+
- uses: actions/setup-node@v3
24+
with:
25+
node-version: "20.x"
26+
- run: |
27+
cd react
28+
npm ci
29+
npm run lint
30+
31+

‎.github/workflows/react-publish.yml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: Publish React Package to npmjs
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
publish:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v4
13+
- uses: actions/setup-node@v3
14+
with:
15+
node-version: "20.x"
16+
registry-url: "https://registry.npmjs.org"
17+
- run: |
18+
cd react
19+
npm ci
20+
npm run build
21+
22+
# Check if the version already exists on npm
23+
- name: Check Version Existence
24+
id: check_version
25+
run: |
26+
if npm show @canopassoftware/[email protected]; then
27+
echo "Version already published. Skipping npm publish."
28+
echo "::set-output name=skip_publish::true"
29+
else
30+
echo "::set-output name=skip_publish::false"
31+
fi
32+
33+
# Publish only if the version check passed
34+
- name: Publish to npm
35+
if: steps.check_version.outputs.skip_publish != 'true'
36+
run: npm publish --access public
37+
env:
38+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.github/workflows/vue-publish.yml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: Publish Vue Package to npmjs
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
publish:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v4
13+
- uses: actions/setup-node@v3
14+
with:
15+
node-version: "20.x"
16+
registry-url: "https://registry.npmjs.org"
17+
- run: |
18+
cd vue
19+
npm ci
20+
npm run build
21+
22+
# Check if the version already exists on npm
23+
- name: Check Version Existence
24+
id: check_version
25+
run: |
26+
if npm show @canopassoftware/[email protected]; then
27+
echo "Version already published. Skipping npm publish."
28+
echo "::set-output name=skip_publish::true"
29+
else
30+
echo "::set-output name=skip_publish::false"
31+
fi
32+
33+
# Publish only if the version check passed
34+
- name: Publish to npm
35+
if: steps.check_version.outputs.skip_publish != 'true'
36+
run: npm publish --access public
37+
env:
38+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎LICENSE.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 Canopas
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 175 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,175 @@
1-
# web-file-upload
2-
A file management system built for vue and react that allows for single and multiple file uploading with a preview feature.
1+
# Web File Management with Preview - Fully Customized
2+
3+
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.
4+
5+
<img src="./gifs/full.gif"/>
6+
7+
---
8+
9+
### The library provides support for Vue and React. Each has its own set of features and information. Explore the individual folders for more details.
10+
11+
## Vue File Upload
12+
13+
This folder includes files and resources related to the Vue file upload library. and also, it has [demo](./vue/examples/demo/) project. so, it's easy to understand and you can use it directly.
14+
15+
Checkout the live demo on, codesandbox <br /><br />
16+
[![codesandbox.io](https://codesandbox.io/favicon.ico)](https://codesandbox.io/p/sandbox/cranky-breeze-r4hht7?file=%2Fsrc%2Fmain.js)
17+
18+
For more details, check out the [Vue README](./vue/README.md).
19+
20+
## React File Upload
21+
22+
This folder includes files and resources related to the React file upload library. and also, it has [demo](./react/examples/demo/) project. so, it's easy to understand and you can use it directly.
23+
24+
Checkout the live demo on, codesandbox <br /><br />
25+
[![codesandbox.io](https://codesandbox.io/favicon.ico)](https://codesandbox.io/p/devbox/eager-mountain-n4zgs6?file=%2Fsrc%2FApp.tsx)
26+
27+
For more details, check out the [React README](./react/README.md).
28+
29+
Feel free to explore each folder for specific information about Vue and React!
30+
31+
---
32+
33+
## Table of Contents
34+
35+
- [Features](#features)
36+
- [Installation](#installation)
37+
- [Examples](#examples)
38+
- [Canvas View](#canvas-view)
39+
- [Square View](#square-view)
40+
- [Horizontal Long Square View](#horizontal-long-square-view)
41+
- [Circular View](#circular-view)
42+
- [Over-ride CSS](#over-ride-css)
43+
- [Contributing](#contributing)
44+
- [License](#license)
45+
- [Contact Information](#contact-information)
46+
47+
---
48+
49+
## Features
50+
51+
- **Single File Upload:** Users can upload or change a single file.
52+
- **Multiple File Management:** Easily manage multiple files.
53+
- **File Preview:** Provides a preview of uploaded files (e.g., images, videos, gifs).
54+
- **Responsive Design:** Ensures a seamless experience on various devices.
55+
- **Fully customized:** Customize file upload UI as per your requirements
56+
57+
---
58+
59+
## Installation
60+
61+
### Vue
62+
63+
Using npm:
64+
65+
```
66+
npm install @canopassoftware/vue-file-upload
67+
```
68+
69+
Using yarn:
70+
71+
```
72+
yarn add @canopassoftware/vue-file-upload
73+
```
74+
75+
---
76+
77+
### React
78+
79+
Using npm:
80+
81+
```
82+
npm install @canopassoftware/react-file-upload
83+
```
84+
85+
Using yarn:
86+
87+
```
88+
yarn add @canopassoftware/react-file-upload
89+
```
90+
91+
---
92+
93+
## Examples
94+
95+
We are providing some examples with design. so, you can easily take it and use into your project.
96+
97+
### Canvas View
98+
99+
vue - [view code](./vue/examples/CanvasView.vue) <br>
100+
react - [view code](./react/examples/CanvasView.vue)
101+
102+
<img src="./gifs/canvas-view.gif"/>
103+
104+
### Square View
105+
106+
vue- [view code](./vue/examples/SquareView.vue) <br>
107+
react - [view code](./react/examples/SquareView.vue)
108+
109+
<img src="./gifs/square-view.gif"/>
110+
111+
### Horizontal Long Square View
112+
113+
vue - [view code](./vue/examples/LongSquareView.vue) <br>
114+
react - [view code](./react/examples/LongSquareView.vue)
115+
116+
<img src="./gifs/long-square-view.gif"/>
117+
118+
### Circular View
119+
120+
vue - [view code](./vue/examples/RoundView.vue) <br>
121+
react - [view code](./react/examples/RoundView.vue)
122+
123+
<img src="./gifs/round-view.gif"/>
124+
125+
### Over-ride CSS
126+
127+
For over-riding the design of default buttons, you can over-ride it's CSS by class name. <br>
128+
For example., <br>
129+
130+
- Over-ride CSS of remove file button you can add it like,
131+
132+
```css
133+
.remove-btn {
134+
color: white;
135+
background-color: red;
136+
font-size: 25px;
137+
padding: 5px;
138+
}
139+
```
140+
141+
- Over-ride CSS of submit/upload file button you can add it like,
142+
143+
```css
144+
.upload-btn {
145+
color: white;
146+
background-color: rgb(51, 65, 85);
147+
font-size: 25px;
148+
padding: 5px 10px;
149+
}
150+
```
151+
152+
---
153+
154+
## Contributing
155+
156+
We welcome contributions from the community. To contribute to this project, please follow these guidelines:
157+
158+
- Fork the repository.
159+
- Create a new branch for your feature or bug fix.
160+
- Make your changes and commit them.
161+
- Push your changes to your fork.
162+
- Submit a pull request with a clear description of your changes.
163+
- Please ensure your code follows the project's coding standards and includes appropriate documentation.
164+
165+
---
166+
167+
## License
168+
169+
This project is licensed under the [MIT](https://github.com/canopas/web-file-upload/blob/main/LICENSE).
170+
171+
---
172+
173+
## Contact Information
174+
175+
Vue file upload is owned and maintained by the [Canopas team](https://canopas.com/). You can reach out them on Github at [canopas](https://github.com/canopas) for questions or need support.

‎gifs/canvas-view.gif

32.2 MB
Loading

‎gifs/full.gif

6.64 MB
Loading

‎gifs/long-square-view.gif

7.35 MB
Loading

‎gifs/multiple-file-uploading.gif

43.1 MB
Loading

‎gifs/round-view.gif

28.7 MB
Loading

‎gifs/single-file-uploading.gif

3.85 MB
Loading

‎gifs/square-view.gif

30.2 MB
Loading

‎react/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎react/.gitignore

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
/dist
16+
17+
# production
18+
/build
19+
20+
# misc
21+
.DS_Store
22+
*.pem
23+
24+
# debug
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*
28+
29+
# local env files
30+
.env*.local
31+
32+
.vscode/*
33+
34+
# vercel
35+
.vercel
36+
37+
# typescript
38+
*.tsbuildinfo
39+
next-env.d.ts
40+
41+
# src/app/style.scss
42+
43+
index.mjs
44+
index.umd.js
45+
next.svg
46+
vercel.svg
47+
style.css

‎react/.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*

0 commit comments

Comments
 (0)