Add vue and react file upload libraries

.github/workflows/lint.yml

@@ -0,0 +1,29 @@
+name: Run lint in vue and react
+
+on:
+  push:
+
+jobs:
+  vue-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - run: |
+          cd vue
+          npm ci
+          npm run lint
+
+  react-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - run: |
+          cd react
+          npm ci
+          npm run lint

.github/workflows/publish.yml

@@ -0,0 +1,69 @@
+name: Publish Package to npmjs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  vue-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+      - run: |
+          cd vue
+          npm ci
+          npm run build
+
+      # Check if the vue-file-upload version already exists on npm
+      - name: Check Version Existence
+        id: check_version
+        run: |
+          if npm show @canopassoftware/[email protected]; then
+            echo "Version already published. Skipping npm publish."
+            echo "::set-output name=skip_publish::true"
+          else
+            echo "::set-output name=skip_publish::false"
+          fi
+
+      # Publish only if the vue-file-upload version check passed
+      - name: Publish to npm
+        if: steps.check_version.outputs.skip_publish != true
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  react-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+      - run: |
+          cd react
+          npm ci
+          npm run build
+
+      # Check if the react-file-upload version already exists on npm
+      - name: Check Version Existence
+        id: check_version
+        run: |
+          if npm show @canopassoftware/[email protected]; then
+            echo "Version already published. Skipping npm publish."
+            echo "::set-output name=skip_publish::true"
+          else
+            echo "::set-output name=skip_publish::false"
+          fi
+
+      # Publish only if the react-file-upload version check passed
+      - name: Publish to npm
+        if: steps.check_version.outputs.skip_publish != true
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

LICENSE.md

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

README.md

@@ -1,2 +1,175 @@
-# web-file-upload
-A file management system built for vue and react that allows for single and multiple file uploading with a preview feature.
+# 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.
+
+<img src="./gifs/full.gif"/>
+
+---
+
+### 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](./vue/examples/demo/) project. so, it's easy to understand and you can use it directly.
+
+Checkout the live demo on, codesandbox <br /><br />
+[![codesandbox.io](https://codesandbox.io/favicon.ico)](https://codesandbox.io/p/sandbox/cranky-breeze-r4hht7?file=%2Fsrc%2Fmain.js)
+
+For more details, check out the [Vue README](./vue/README.md).
+
+## React File Upload
+
+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.
+
+Checkout the live demo on, codesandbox <br /><br />
+[![codesandbox.io](https://codesandbox.io/favicon.ico)](https://codesandbox.io/p/devbox/eager-mountain-n4zgs6?file=%2Fsrc%2FApp.tsx)
+
+For more details, check out the [React README](./react/README.md).
+
+Feel free to explore each folder for specific information about Vue and React!
+
+---
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Examples](#examples)
+  - [Canvas View](#canvas-view)
+  - [Square View](#square-view)
+  - [Horizontal Long Square View](#horizontal-long-square-view)
+  - [Circular View](#circular-view)
+  - [Over-ride CSS](#over-ride-css)
+- [Contributing](#contributing)
+- [License](#license)
+- [Contact Information](#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](./vue/examples/CanvasView.vue) <br>
+react - [view code](./react/examples/CanvasView.tsx)
+
+<img src="./gifs/canvas-view.gif"/>
+
+### Square View
+
+vue- [view code](./vue/examples/SquareView.vue) <br>
+react - [view code](./react/examples/SquareView.tsx)
+
+<img src="./gifs/square-view.gif"/>
+
+### Horizontal Long Square View
+
+vue - [view code](./vue/examples/LongSquareView.vue) <br>
+react - [view code](./react/examples/LongSquareView.tsx)
+
+<img src="./gifs/long-square-view.gif"/>
+
+### Circular View
+
+vue - [view code](./vue/examples/RoundView.vue) <br>
+react - [view code](./react/examples/RoundView.tsx)
+
+<img src="./gifs/round-view.gif"/>
+
+### Over-ride CSS
+
+For over-riding the design of default buttons, you can over-ride it's CSS by class name. <br>
+For example., <br>
+
+- Over-ride CSS of remove file button you can add it like,
+
+```css
+.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,
+
+```css
+.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](https://github.com/canopas/web-file-upload/blob/main/LICENSE).
+
+---
+
+## Contact Information
+
+Web 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.

react/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

react/.gitignore

@@ -0,0 +1,47 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+/dist
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+.vscode/*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# src/app/style.scss
+
+index.mjs
+index.umd.js
+next.svg
+vercel.svg
+style.css

react/.npmignore

@@ -0,0 +1 @@
+/*