├── .babelrc ├── .eslintrc.cjs ├── .gitignore ├── .npmignore ├── .prettierrc.json ├── LICENSE.md ├── README.md ├── env.d.ts ├── examples ├── CanvasView.vue ├── LongSquareView.vue ├── RoundView.vue ├── SquareView.vue └── demo │ ├── README.md │ ├── env.d.ts │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── favicon.ico │ ├── src │ ├── App.vue │ ├── assets │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ ├── main.ts │ ├── router │ │ └── index.ts │ └── views │ │ └── IndexView.vue │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── gifs ├── canvas-view.gif ├── full.gif ├── long-square-view.gif ├── multiple-file-uploading.gif ├── round-view.gif ├── single-file-uploading.gif └── square-view.gif ├── index.html ├── package-lock.json ├── package.json ├── public └── favicon.ico ├── src ├── App.vue ├── assets │ ├── images │ │ ├── apk-icon.png │ │ ├── canvas.svg │ │ ├── file-icon.png │ │ ├── loader.png │ │ ├── music-icon.png │ │ ├── pdf-icon.png │ │ ├── placeholder.png │ │ ├── sql-icon.png │ │ ├── text-icon.png │ │ └── zip-icon.png │ └── logo.svg ├── components │ ├── MultipleFile.vue │ └── SingleFile.vue ├── input.css ├── main.ts ├── router │ └── index.ts └── views │ └── IndexView.vue ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/env", 5 | { 6 | "targets": { 7 | "node": "current" 8 | } 9 | } 10 | ] 11 | ], 12 | "plugins": [ 13 | "@babel/plugin-proposal-class-properties", 14 | "@babel/plugin-proposal-object-rest-spread" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require('@rushstack/eslint-patch/modern-module-resolution') 3 | 4 | module.exports = { 5 | root: true, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | '@vue/eslint-config-typescript', 10 | '@vue/eslint-config-prettier/skip-formatting' 11 | ], 12 | parserOptions: { 13 | ecmaVersion: 'latest' 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | .vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | src/assets/style.scss -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | /dist/* 13 | !/dist/output.css 14 | !/dist/style.scss 15 | dist-ssr 16 | coverage 17 | *.local 18 | 19 | /cypress/videos/ 20 | /cypress/screenshots/ 21 | 22 | # Editor directories and files 23 | .vscode/* 24 | !.vscode/extensions.json 25 | .idea 26 | *.suo 27 | *.ntvs* 28 | *.njsproj 29 | *.sln 30 | *.sw? 31 | 32 | src/assets/style.scss 33 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "semi": false, 4 | "tabWidth": 2, 5 | "singleQuote": true, 6 | "printWidth": 100, 7 | "trailingComma": "none" 8 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # File Management with Preview - Fully Customized 2 | 3 | A versatile and user-friendly file management system built with Vue.js and TypeScript that allows for single and multiple file uploading with a preview feature. It allows you to select files and preview them, returning an array of selected files. It allows customizing design by overriding the style classes. 4 | 5 | 6 | 7 | Checkout the live demo on, codesandbox
8 | [![codesandbox.io](https://codesandbox.io/favicon.ico)](https://codesandbox.io/p/sandbox/cranky-breeze-r4hht7?file=%2Fsrc%2Fmain.js) 9 | 10 | --- 11 | 12 | ## Table of Contents 13 | 14 | - [Features](#features) 15 | - [Getting Started](#getting-started) 16 | - [Prerequisites](#prerequisites) 17 | - [Installation](#installation) 18 | - [Examples](#examples) 19 | - [Canvas View](#canvas-view) 20 | - [Square View](#square-view) 21 | - [Horizontal Long Square View](#horizontal-long-square-view) 22 | - [Circular View](#circular-view) 23 | - [Over-ride CSS](#over-ride-css) 24 | - [Properties and Events](#properties-and-events) 25 | - [Usage](#usage) 26 | - [Contributing](#contributing) 27 | - [License](#license) 28 | - [Contact Information](#contact-information) 29 | 30 | --- 31 | 32 | ## Features 33 | 34 | - **Single File Upload:** Users can upload or change a single file. 35 | - **Multiple File Management:** Easily manage multiple files. 36 | - **File Preview:** Provides a preview of uploaded files (e.g., images, videos, gifs). 37 | - **Responsive Design:** Ensures a seamless experience on various devices. 38 | - **Fully customized:** Customize file upload UI as per your requirements 39 | 40 | --- 41 | 42 | ## Getting Started 43 | 44 | Follow below instructions to configure this package into your project. 45 | 46 | ### Prerequisites 47 | 48 | Before you begin, make sure you have the following software installed: 49 | 50 | - [Node.js](https://nodejs.org/) - v20.x 51 | - Vue3 52 | - sass 53 | 54 | ### Installation 55 | 56 | Using npm: 57 | 58 | ``` 59 | npm install @canopassoftware/vue-file-upload 60 | ``` 61 | 62 | Using yarn: 63 | 64 | ``` 65 | yarn add @canopassoftware/vue-file-upload 66 | ``` 67 | 68 | --- 69 | 70 | ## Examples 71 | 72 | We are providing some examples with design. so, you can easily take it and use into your project. 73 | 74 | ### Canvas View 75 | 76 | [view code](./examples/CanvasView.vue) 77 | 78 | 79 | 80 | ### Square View 81 | 82 | [view code](./examples/SquareView.vue) 83 | 84 | 85 | 86 | ### Horizontal Long Square View 87 | 88 | [view code](./examples/LongSquareView.vue) 89 | 90 | 91 | 92 | ### Circular View 93 | 94 | [view code](./examples/RoundView.vue) 95 | 96 | 97 | 98 | ### Over-ride CSS 99 | 100 | For over-riding the design of default buttons, you can over-ride it's CSS by class name.
101 | For example.,
102 | 103 | - Over-ride CSS of remove file button you can add it like, 104 | 105 | ```css 106 | .remove-btn { 107 | color: white; 108 | background-color: red; 109 | font-size: 25px; 110 | padding: 5px; 111 | } 112 | ``` 113 | 114 | - Over-ride CSS of submit/upload file button you can add it like, 115 | 116 | ```css 117 | .upload-btn { 118 | color: white; 119 | background-color: rgb(51, 65, 85); 120 | font-size: 25px; 121 | padding: 5px 10px; 122 | } 123 | ``` 124 | 125 | --- 126 | 127 | ## Properties and Events 128 | 129 | ### props 130 | 131 | - **:callback="handleFileUploading"** 132 | 133 | - `required` 134 | - **Description:** Add your upload callback function while receive the selected file/files 135 | 136 | - **:uploadedFile="uploadedFile"** - For single file component 137 | 138 | - `required` 139 | - Uploaded file object with below format, 140 | ``` 141 | { 142 | fileType: string, 143 | fileUrl: string, 144 | fileName: string 145 | } 146 | ``` 147 | 148 | - **:uploadedFiles="uploadedFiles"** - For multiple file component 149 | 150 | - `required` 151 | - Uploaded files array with below format, 152 | ``` 153 | [ 154 | { 155 | fileType: string, 156 | fileUrl: string, 157 | fileName: string 158 | } 159 | ] 160 | ``` 161 | 162 | - **:uploadBtnText="'Upload'"** 163 | 164 | - **default** : Upload 165 | - Text for save or upload file button 166 | 167 | - **:progressBtnText="'Uploading...'"** 168 | 169 | - **default** : Uploading... 170 | - Text for the progress bar, showing file uploading under the process 171 | 172 | - **:removeBtnText="'Uploading...'"** 173 | 174 | - **default** : x 175 | - Text for remove file button 176 | 177 | - **:accept="'image/jpg, image/jpeg, image/png, video/mp4, audio/mp3, application/zip'"** 178 | 179 | - Validation for file type. By default it will select all the type of file. 180 | 181 | - **:(filetype)Preview="'(file location)'"** 182 | - **default** : Default file icons as per file types 183 | - Set path for your customized icon if needed 184 | 185 | --- 186 | 187 | ## Usage 188 | 189 | To manage and preview files with this library, follow these steps: 190 | 191 | ### Import the library into your file 192 | 193 | ```js 194 | // using CommonJS 195 | const { SingleFileUpload, MultipleFileUpload } = require('@canopassoftware/vue-file-upload') 196 | 197 | OR 198 | // using esModules 199 | import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload' 200 | ``` 201 | 202 | ### Creating custom UI with file preview 203 | 204 | - You can customize file uploading UI in `template` block. 205 | - The `file` slot containing `file` object with following keys, we will use this object to show preview. 206 | 207 | ```js 208 | file = file: { 209 | previewType: 'video', // type of the preview. like, file is image or video 210 | previewUrl: 'data:image/jpeg;base64,/9j/D1AAAACRsdW1pAAAD...', // URL of the file preview 211 | previewName: 'a152148640581.62d918f12a0b4.mp4', // preview file name 212 | isDragging: false // you will get it `true` when you dragging the file on design 213 | } 214 | ``` 215 | 216 | ### Single File Upload Management 217 | 218 | ```html 219 |
220 | 235 | 238 | 239 |
240 | ``` 241 | 242 | ```js 243 | 271 | ``` 272 | 273 | ### Multiple File Upload Management 274 | 275 | ```html 276 |
277 | 292 | 295 | 296 |
297 | ``` 298 | 299 | ```js 300 | 333 | ``` 334 | 335 | ## Contributing 336 | 337 | We welcome contributions from the community. To contribute to this project, please follow these guidelines: 338 | 339 | - Fork the repository. 340 | - Create a new branch for your feature or bug fix. 341 | - Make your changes and commit them. 342 | - Push your changes to your fork. 343 | - Submit a pull request with a clear description of your changes. 344 | - Please ensure your code follows the project's coding standards and includes appropriate documentation. 345 | 346 | ## License 347 | 348 | This project is licensed under the [MIT](https://github.com/canopas/vue-file-upload/blob/main/LICENSE). 349 | 350 | ## Contact Information 351 | 352 | 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. 353 | -------------------------------------------------------------------------------- /env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/CanvasView.vue: -------------------------------------------------------------------------------- 1 | 118 | 119 | 167 | -------------------------------------------------------------------------------- /examples/LongSquareView.vue: -------------------------------------------------------------------------------- 1 | 96 | 97 | 145 | -------------------------------------------------------------------------------- /examples/RoundView.vue: -------------------------------------------------------------------------------- 1 | 109 | 110 | 158 | -------------------------------------------------------------------------------- /examples/SquareView.vue: -------------------------------------------------------------------------------- 1 | 109 | 110 | 158 | -------------------------------------------------------------------------------- /examples/demo/README.md: -------------------------------------------------------------------------------- 1 | # test-vue-file-upload 2 | 3 | This ready-to-use example shows real-time usage of the `vue-file-upload` library with custom UI. 4 | 5 | ## Customize configuration 6 | 7 | See [Vite Configuration Reference](https://vitejs.dev/config/). 8 | 9 | ## Project Setup 10 | 11 | ```sh 12 | npm install 13 | ``` 14 | 15 | ### Compile and Hot-Reload for Development 16 | 17 | ```sh 18 | npm run dev 19 | ``` 20 | 21 | ### Type-Check, Compile and Minify for Production 22 | 23 | ```sh 24 | npm run build 25 | ``` 26 | 27 | ### Lint with [ESLint](https://eslint.org/) 28 | 29 | ```sh 30 | npm run lint 31 | ``` 32 | -------------------------------------------------------------------------------- /examples/demo/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-vue-file-upload", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "run-p type-check \"build-only {@}\" --", 8 | "preview": "vite preview", 9 | "build-only": "vite build", 10 | "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", 11 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", 12 | "format": "prettier --write src/" 13 | }, 14 | "dependencies": { 15 | "@canopassoftware/vue-file-upload": "^1.0.3", 16 | "vue": "^3.3.4", 17 | "vue-router": "^4.2.5" 18 | }, 19 | "devDependencies": { 20 | "@rushstack/eslint-patch": "^1.3.3", 21 | "@tsconfig/node18": "^18.2.2", 22 | "@types/node": "^18.18.5", 23 | "@vitejs/plugin-vue": "^4.4.0", 24 | "@vue/eslint-config-prettier": "^8.0.0", 25 | "@vue/eslint-config-typescript": "^12.0.0", 26 | "@vue/tsconfig": "^0.4.0", 27 | "eslint": "^8.49.0", 28 | "eslint-plugin-vue": "^9.17.0", 29 | "npm-run-all2": "^6.1.1", 30 | "prettier": "^3.0.3", 31 | "sass": "^1.69.5", 32 | "typescript": "~5.2.0", 33 | "vite": "^4.4.11", 34 | "vue-tsc": "^1.8.19" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/examples/demo/public/favicon.ico -------------------------------------------------------------------------------- /examples/demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/demo/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/demo/src/assets/main.css: -------------------------------------------------------------------------------- 1 | #app { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | 6 | font-weight: normal; 7 | } 8 | 9 | a, 10 | .green { 11 | text-decoration: none; 12 | color: hsla(160, 100%, 37%, 1); 13 | transition: 0.4s; 14 | } 15 | 16 | @media (hover: hover) { 17 | a:hover { 18 | background-color: hsla(160, 100%, 37%, 0.2); 19 | } 20 | } 21 | 22 | @media (min-width: 1024px) { 23 | body { 24 | display: flex; 25 | place-items: center; 26 | } 27 | 28 | #app { 29 | display: grid; 30 | grid-template-columns: 1fr 1fr; 31 | padding: 0 2rem; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/demo/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 42 | -------------------------------------------------------------------------------- /examples/demo/src/components/TheWelcome.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 89 | -------------------------------------------------------------------------------- /examples/demo/src/components/WelcomeItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 88 | -------------------------------------------------------------------------------- /examples/demo/src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/demo/src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/demo/src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/demo/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/demo/src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /examples/demo/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload' 6 | 7 | const app = createApp(App) 8 | 9 | app.component('SingleFileUpload', SingleFileUpload) 10 | app.component('MultipleFileUpload', MultipleFileUpload) 11 | 12 | app.use(router) 13 | 14 | app.mount('#app') 15 | -------------------------------------------------------------------------------- /examples/demo/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import IndexView from '../views/IndexView.vue' 3 | 4 | const router = createRouter({ 5 | history: createWebHistory(import.meta.env.BASE_URL), 6 | routes: [ 7 | { 8 | path: '/', 9 | name: 'IndexView', 10 | component: IndexView 11 | } 12 | ] 13 | }) 14 | 15 | export default router 16 | -------------------------------------------------------------------------------- /examples/demo/src/views/IndexView.vue: -------------------------------------------------------------------------------- 1 | 121 | 122 | 171 | -------------------------------------------------------------------------------- /examples/demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "baseUrl": ".", 8 | "paths": { 9 | "@/*": ["./src/*"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.node.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /examples/demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node18/tsconfig.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "nightwatch.conf.*", 8 | "playwright.config.*" 9 | ], 10 | "compilerOptions": { 11 | "composite": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Bundler", 14 | "types": ["node"] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | ], 11 | resolve: { 12 | alias: { 13 | '@': fileURLToPath(new URL('./src', import.meta.url)) 14 | } 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /gifs/canvas-view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/gifs/canvas-view.gif -------------------------------------------------------------------------------- /gifs/full.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/gifs/full.gif -------------------------------------------------------------------------------- /gifs/long-square-view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/gifs/long-square-view.gif -------------------------------------------------------------------------------- /gifs/multiple-file-uploading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/gifs/multiple-file-uploading.gif -------------------------------------------------------------------------------- /gifs/round-view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/gifs/round-view.gif -------------------------------------------------------------------------------- /gifs/single-file-uploading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/gifs/single-file-uploading.gif -------------------------------------------------------------------------------- /gifs/square-view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/gifs/square-view.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Manage file/image uploading 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@canopassoftware/vue-file-upload", 3 | "version": "1.0.4", 4 | "description": "Show the preview of file and manage files data to upload", 5 | "main": "src/main.ts", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/canopas/file-upload-web-frontend.git" 9 | }, 10 | "keywords": [ 11 | "file-upload", 12 | "image-upload", 13 | "file-management", 14 | "file-preview", 15 | "image-preview" 16 | ], 17 | "author": "dharti", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/canopas/file-upload-web-frontend/issues" 21 | }, 22 | "homepage": "https://github.com/canopas/file-upload-web-frontend#readme", 23 | "scripts": { 24 | "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css && vite", 25 | "build": "vite build && tailwindcss -i ./src/input.css -o ./dist/output.css --minify && cp ./src/assets/style.scss ./dist/style.scss", 26 | "preview": "vite preview", 27 | "build-only": "vite build", 28 | "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", 29 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", 30 | "format": "prettier --write src/", 31 | "test": "echo \"Error: no test specified\" && exit 1" 32 | }, 33 | "dependencies": { 34 | "vue": "^3.3.4", 35 | "vue-router": "^4.2.4" 36 | }, 37 | "devDependencies": { 38 | "@babel/cli": "^7.23.0", 39 | "@babel/core": "^7.23.2", 40 | "@babel/preset-env": "^7.23.2", 41 | "@rushstack/eslint-patch": "^1.3.3", 42 | "@tsconfig/node18": "^18.2.2", 43 | "@types/node": "^18.17.17", 44 | "@vitejs/plugin-vue": "^4.3.4", 45 | "@vue/eslint-config-prettier": "^8.0.0", 46 | "@vue/eslint-config-typescript": "^12.0.0", 47 | "@vue/tsconfig": "^0.4.0", 48 | "autoprefixer": "^10.4.16", 49 | "eslint": "^8.49.0", 50 | "eslint-plugin-vue": "^9.17.0", 51 | "npm-run-all2": "^6.0.6", 52 | "prettier": "^3.0.3", 53 | "prettier-plugin-tailwindcss": "^0.5.6", 54 | "sass": "^1.69.4", 55 | "tailwindcss": "^3.3.3", 56 | "typescript": "~5.2.0", 57 | "vite": "^4.4.9", 58 | "vue-tsc": "^1.8.11" 59 | }, 60 | "directories": { 61 | "example": "examples" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/public/favicon.ico -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /src/assets/images/apk-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/apk-icon.png -------------------------------------------------------------------------------- /src/assets/images/canvas.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/file-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/file-icon.png -------------------------------------------------------------------------------- /src/assets/images/loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/loader.png -------------------------------------------------------------------------------- /src/assets/images/music-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/music-icon.png -------------------------------------------------------------------------------- /src/assets/images/pdf-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/pdf-icon.png -------------------------------------------------------------------------------- /src/assets/images/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/placeholder.png -------------------------------------------------------------------------------- /src/assets/images/sql-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/sql-icon.png -------------------------------------------------------------------------------- /src/assets/images/text-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/text-icon.png -------------------------------------------------------------------------------- /src/assets/images/zip-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canopas/vue-file-upload/87ef15f19bf36fd8bfd6104cf4c57333b1f517e2/src/assets/images/zip-icon.png -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/MultipleFile.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 334 | -------------------------------------------------------------------------------- /src/components/SingleFile.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 210 | -------------------------------------------------------------------------------- /src/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import '../dist/output.css' 2 | import '../dist/style.scss' 3 | 4 | import SingleFileUpload from './components/SingleFile.vue' 5 | import MultipleFileUpload from './components/MultipleFile.vue' 6 | 7 | import { createApp } from 'vue' 8 | import App from './App.vue' 9 | import router from './router' 10 | 11 | const app = createApp(App) 12 | 13 | app.component('SingleFileUpload', SingleFileUpload) 14 | app.component('MultipleFileUpload', MultipleFileUpload) 15 | 16 | app.use(router) 17 | 18 | app.mount('#app') 19 | 20 | export { SingleFileUpload, MultipleFileUpload } 21 | -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import IndexView from '../views/IndexView.vue' 3 | 4 | const router = createRouter({ 5 | history: createWebHistory(import.meta.env.BASE_URL), 6 | routes: [ 7 | { 8 | path: '/', 9 | name: 'IndexView', 10 | component: IndexView 11 | } 12 | ] 13 | }) 14 | 15 | export default router 16 | -------------------------------------------------------------------------------- /src/views/IndexView.vue: -------------------------------------------------------------------------------- 1 | 97 | 98 | 148 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: {} 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [] 11 | } 12 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "baseUrl": ".", 8 | "paths": { 9 | "@/*": ["./src/*"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.node.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node18/tsconfig.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "nightwatch.conf.*", 8 | "playwright.config.*" 9 | ], 10 | "compilerOptions": { 11 | "composite": true, 12 | "module": "ESNext", 13 | "strict": true, 14 | "moduleResolution": "Bundler", 15 | } 16 | } -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | ], 11 | resolve: { 12 | alias: { 13 | '@': fileURLToPath(new URL('./src', import.meta.url)) 14 | } 15 | } 16 | }) 17 | --------------------------------------------------------------------------------