├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .prettierrc ├── eslint.config.mjs ├── index.html ├── license.txt ├── package.json ├── readme.md ├── svelte ├── .gitignore ├── cypress.config.js ├── cypress │ ├── e2e │ │ └── demos.cy.js │ ├── fixtures │ │ └── example.json │ └── support │ │ ├── commands.js │ │ └── e2e.js ├── demos │ ├── cases │ │ ├── BasicInit.svelte │ │ ├── ClientHandler.svelte │ │ ├── CustomControls.svelte │ │ ├── DropAPI.svelte │ │ └── OpenAPI.svelte │ ├── common │ │ ├── Index.svelte │ │ ├── Link.svelte │ │ ├── Router.svelte │ │ └── helpers.js │ ├── custom │ │ ├── CustomButton.svelte │ │ └── CustomDropArea.svelte │ ├── data.js │ ├── index.html │ ├── index.js │ └── routes.js ├── index.html ├── license.txt ├── package.json ├── postcss.config.js ├── readme.md ├── src │ ├── components │ │ ├── Uploader.svelte │ │ └── UploaderList.svelte │ ├── helpers │ │ └── consts.js │ └── index.js ├── svelte.config.js ├── tests │ ├── Index.svelte │ ├── index.html │ ├── index.js │ └── routes.js ├── vite.config.js └── whatsnew.md └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | indent_size = 4 -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | es6: true, 7 | }, 8 | extends: ["plugin:cypress/recommended", "eslint:recommended", "prettier"], 9 | parserOptions: { 10 | ecmaVersion: 2020, 11 | sourceType: "module", 12 | extraFileExtensions: [".svelte"], 13 | }, 14 | plugins: ["svelte3"], 15 | 16 | overrides: [ 17 | { 18 | files: ["*.svelte"], 19 | processor: "svelte3/svelte3", 20 | }, 21 | ], 22 | settings: { 23 | // [todo] we can add stylelint for this 24 | "svelte3/ignore-styles": () => true, 25 | }, 26 | rules: { 27 | "no-bitwise": ["error"], 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | 4 | *.zip 5 | .Ds_store 6 | *.tgz 7 | *.log 8 | .vscode 9 | .idea 10 | .env.local -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | yarn run lint-staged 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "semi": true, 4 | "singleQuote": false, 5 | "quoteProps": "as-needed", 6 | "trailingComma": "es5", 7 | "bracketSpacing": true, 8 | "arrowParens": "avoid", 9 | "svelteSortOrder": "options-scripts-markup-styles", 10 | "plugins": [ 11 | "prettier-plugin-svelte" 12 | ], 13 | "overrides": [ 14 | { 15 | "files": "*.svelte", 16 | "options": { 17 | "parser": "svelte" 18 | } 19 | }, 20 | { 21 | "files": "*.ts", 22 | "options": { 23 | "parser": "typescript" 24 | } 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import eslintConfigPrettier from "eslint-config-prettier"; 2 | import eslintPluginSvelte from 'eslint-plugin-svelte'; 3 | import tsLint from "typescript-eslint"; 4 | import jsLint from "@eslint/js"; 5 | import vitest from "eslint-plugin-vitest"; 6 | import globals from "globals"; 7 | 8 | export default [{ 9 | ignores: ["node_modules/", "dist/", "build/", "coverage/", "public/", "svelte/vite.config.js"], 10 | }, 11 | jsLint.configs.recommended, 12 | ...tsLint.configs.recommended, 13 | ...eslintPluginSvelte.configs['flat/recommended'], 14 | eslintConfigPrettier, 15 | vitest.configs.recommended, 16 | ...eslintPluginSvelte.configs["flat/prettier"], 17 | { 18 | rules: { 19 | "no-bitwise": ["error"], 20 | // there is a misconception between esLint and svelte compiler 21 | // rules that are necessary for compiler, throw errors in esLint 22 | // need to be revised with next version of toolchain 23 | "svelte/no-unused-svelte-ignore": "off", 24 | "svelte/valid-compile": "off", 25 | // Ignore unused vars starting with _ 26 | // "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }], 27 | // // Turn off the need for explicit function return types 28 | // "@typescript-eslint/explicit-function-return-type": "off", 29 | // // Warn when "any" type is used 30 | "@typescript-eslint/no-explicit-any": "off", 31 | // // Warn on @ts-ignore comments 32 | // "@typescript-eslint/ban-ts-comment": "warn", 33 | // // Public methods should have return types 34 | // "@typescript-eslint/explicit-module-boundary-types": "error", 35 | }, 36 | }, 37 | { 38 | languageOptions: { 39 | globals: { ...globals.browser, ...globals.es2022 }, 40 | ecmaVersion: 2022, 41 | sourceType: "module", 42 | parserOptions: { 43 | extraFileExtensions: [".svelte"], 44 | warnOnUnsupportedTypeScriptVersion: false, 45 | tsconfigRootDir: import.meta.dirname, 46 | }, 47 | }, 48 | 49 | }, 50 | { 51 | 52 | files: ["**/*.svelte"], 53 | rules: { 54 | "@typescript-eslint/no-unused-expressions": "off" 55 | } 56 | } 57 | ]; 58 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 XB Software Sp. z o.o. 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. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "wx-uploader", 4 | "workspaces": [ 5 | "svelte" 6 | ], 7 | "scripts": { 8 | "build:deps": "true", 9 | "build:site": "cd site && yarn build", 10 | "build:tests": "cd svelte && yarn build:tests", 11 | "build": "cd svelte && yarn build", 12 | "lint": "yarn eslint ./svelte/src ./svelte/demos", 13 | "prepare": "husky", 14 | "start:demos": "cd svelte && yarn start", 15 | "start:site": "cd site && yarn start", 16 | "start:tests": "cd svelte && yarn start:tests", 17 | "start": "cd svelte && yarn start", 18 | "test:cypress": "cd svelte && yarn test:cypress", 19 | "test": "true" 20 | }, 21 | "devDependencies": { 22 | "@sveltejs/vite-plugin-svelte": "4.0.0", 23 | "@vitest/coverage-v8": "1.6.0", 24 | "wx-vite-tools": "1.0.5", 25 | "autoprefixer": "10.4.20", 26 | "cypress": "13.6.4", 27 | "eslint": "9.14.0", 28 | "eslint-config-prettier": "9.1.0", 29 | "eslint-plugin-cypress": "4.1.0", 30 | "eslint-plugin-svelte": "2.46.0", 31 | "eslint-plugin-vitest": "0.5.4", 32 | "husky": "9.1.6", 33 | "lint-staged": "15.2.10", 34 | "npm-run-all": "4.1.5", 35 | "postcss": "8.4.47", 36 | "prettier": "3.3.3", 37 | "prettier-plugin-svelte": "3.2.7", 38 | "rollup-plugin-visualizer": "5.12.0", 39 | "shx": "0.3.4", 40 | "svelte": "5.1.9", 41 | "svelte-spa-router": "4.0.1", 42 | "typescript-eslint": "8.13.0", 43 | "typescript": "5.6.3", 44 | "vite-plugin-conditional-compile": "1.4.5", 45 | "vite-plugin-dts": "3.7.2", 46 | "vite": "5.4.10", 47 | "vitest": "1.5.0" 48 | }, 49 | "lint-staged": { 50 | "*.{ts,js,svelte}": [ 51 | "eslint --fix --no-warn-ignored", 52 | "prettier --write" 53 | ], 54 | "*.{css,md,json}": [ 55 | "prettier --write" 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # SVAR Svelte File Uploader 4 | 5 | [![npm](https://img.shields.io/npm/v/wx-svelte-uploader.svg)](https://www.npmjs.com/package/wx-svelte-uploader) 6 | [![License](https://img.shields.io/github/license/svar-widgets/uploader)](https://github.com/svar-widgets/uploader/blob/main/license.txt) 7 | [![npm downloads](https://img.shields.io/npm/dm/wx-svelte-uploader.svg)](https://www.npmjs.com/package/wx-svelte-uploader) 8 | 9 |
10 | 11 | A Svelte UI component for easy and intuitive file uploading, allowing users to drag and drop files or select them from their device. 12 | 13 | ### How to Use 14 | 15 | To use the widget, simply import the package and include the component in your Svelte file: 16 | 17 | ```svelte 18 | 28 | 29 | 30 | 31 | ``` 32 | 33 | ### Svelte 4 and Svelte 5 versions 34 | 35 | There are two versions of the library: the 1.x version, designed to work with Svelte 4, and the 2.x version, created for Svelte 5. Please note that the 2.x version is in beta and may contain some instabilities. 36 | 37 | To use the SVAR Uploader beta for Svelte 5, install it as follows: 38 | 39 | ``` 40 | npm install wx-svelte-uploader 41 | ``` 42 | 43 | To use the SVAR Uploader for Svelte 4: 44 | 45 | ``` 46 | npm install wx-svelte-uploader@1.3.0 47 | ``` 48 | 49 | ### How to Modify 50 | 51 | Typically, you don't need to modify the code. However, if you wish to do so, follow these steps: 52 | 53 | 1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work 54 | 2. Start the project in development mode with `yarn start` 55 | 56 | ### Run Tests 57 | 58 | To run the test: 59 | 60 | 1. Start the test examples with: 61 | ```sh 62 | yarn start:tests 63 | ``` 64 | 2. In a separate console, run the end-to-end tests with: 65 | ```sh 66 | yarn test:cypress 67 | ``` 68 | -------------------------------------------------------------------------------- /svelte/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | cypress/screenshots 3 | cypress/videos 4 | -------------------------------------------------------------------------------- /svelte/cypress.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "cypress"; 2 | 3 | export default defineConfig({ 4 | video: false, 5 | e2e: { 6 | setupNodeEvents() {}, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /svelte/cypress/e2e/demos.cy.js: -------------------------------------------------------------------------------- 1 | const cases = [ 2 | "/base/:skin", 3 | "/client/:skin", 4 | "/controls/:skin", 5 | "/api/:skin", 6 | "/dropzone/:skin", 7 | ]; 8 | 9 | const skins = ["material", "willow", "willow-dark"]; 10 | const links = []; 11 | 12 | cases.forEach(w => { 13 | skins.forEach(s => { 14 | links.push(w.replace(":skin", s)); 15 | }); 16 | }); 17 | 18 | context("Basic functionality", () => { 19 | it("widget", () => { 20 | links.forEach(w => { 21 | cy.visit(`/index.html#${w}`); 22 | cy.shot(w, { area: ".content" }); 23 | }); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /svelte/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /svelte/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | Cypress.Commands.add("shot", (...args) => { 2 | // eslint-disable-next-line cypress/no-unnecessary-waiting 3 | cy.wait(100); 4 | 5 | const name = args.filter(a => typeof a !== "object").join("-"); 6 | const conf = 7 | typeof args[args.length - 1] === "object" ? args[args.length - 1] : {}; 8 | const sconf = { ...conf, overwrite: true }; 9 | 10 | if (conf.area) cy.get(conf.area).screenshot(name, sconf); 11 | else cy.screenshot(name, sconf); 12 | }); 13 | -------------------------------------------------------------------------------- /svelte/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import "./commands"; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /svelte/demos/cases/BasicInit.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |

Uploader with default drop zone

16 |
17 | 18 | 19 |
20 | 21 |

Disabled Uploader

22 |
23 | 24 | 30 |
31 |
32 | -------------------------------------------------------------------------------- /svelte/demos/cases/ClientHandler.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 |
33 |

Uploader with custom handler (no server side)

34 |
35 | 36 | {#each data as obj (obj.id)} 37 | {#if obj.status === "server"} 38 | 43 | {/if} 44 | {/each} 45 | 50 |
51 |
52 | -------------------------------------------------------------------------------- /svelte/demos/cases/CustomControls.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |

Uploader with custom controls

13 |
14 | 15 | {#snippet children({ open })} 16 | 17 | {/snippet} 18 | 19 | 20 |
21 |
22 | -------------------------------------------------------------------------------- /svelte/demos/cases/DropAPI.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
19 |

Uploader API (custom drop zone)

20 |
21 | 22 | 23 | 24 |
25 |
26 | -------------------------------------------------------------------------------- /svelte/demos/cases/OpenAPI.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |

Uploader API (used by a custom component)

22 |
23 | 24 | 25 | 26 |
27 | 28 |

Uploader API (used from the same component)

29 |
30 | 37 | 38 |
39 | {#each data as row} 40 | 
{JSON.stringify(row)}
41 | {/each} 42 |
43 |
44 |
45 | -------------------------------------------------------------------------------- /svelte/demos/common/Index.svelte: -------------------------------------------------------------------------------- 1 | 74 | 75 | 76 | 77 | 78 | 79 |
80 | 81 | 82 | 83 |
84 | {#if show} 85 |
WX Demos
86 | 87 |
88 | 89 |
90 | {/if} 91 | 92 | 93 | 110 | 111 | {#if show} 112 | {#each links as data (data[0])} 113 | 114 | {/each} 115 | {:else} 116 |
{title}
117 |
118 | {/if} 119 |
120 | 121 |
(show = false)} 127 | > 128 | 129 | 130 | 131 | 132 | 133 |
134 |
135 | 136 | 323 | -------------------------------------------------------------------------------- /svelte/demos/common/Link.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {data[1]} 10 | 11 | 12 | 33 | -------------------------------------------------------------------------------- /svelte/demos/common/Router.svelte: -------------------------------------------------------------------------------- 1 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /svelte/demos/common/helpers.js: -------------------------------------------------------------------------------- 1 | import { push } from "svelte-spa-router"; 2 | import { wrap } from "svelte-spa-router/wrap"; 3 | import { links as raw } from "../routes"; 4 | 5 | const routes = { 6 | "/": wrap({ 7 | component: {}, 8 | conditions: () => { 9 | push("/base/willow"); 10 | return false; 11 | }, 12 | }), 13 | }; 14 | 15 | function getRoutes(skinSettings, cb) { 16 | raw.forEach( 17 | a => 18 | (routes[a[0]] = wrap({ 19 | component: a[2], 20 | userData: a, 21 | props: { ...skinSettings }, 22 | conditions: x => { 23 | cb(x.location); 24 | return true; 25 | }, 26 | })) 27 | ); 28 | 29 | return routes; 30 | } 31 | 32 | function getLinks() { 33 | return raw; 34 | } 35 | 36 | export { push, getRoutes, getLinks }; 37 | -------------------------------------------------------------------------------- /svelte/demos/custom/CustomButton.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 | 23 |

Results:

24 | 
{#each log as line}{line + "\n"}{/each}
25 |
26 | -------------------------------------------------------------------------------- /svelte/demos/custom/CustomDropArea.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
30 | {#if children}{@render children()}{:else} 31 |
Drop files here
32 | {#if log.length} 33 |
34 |

Results:

35 | 
{#each log as line}{line + "\n"}{/each}
36 |
37 | {/if} 38 | {/if} 39 |
40 | 41 | 62 | -------------------------------------------------------------------------------- /svelte/demos/data.js: -------------------------------------------------------------------------------- 1 | export function getData() { 2 | 3 | const data = [ 4 | ]; 5 | 6 | return { data }; 7 | } -------------------------------------------------------------------------------- /svelte/demos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte Widgets 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /svelte/demos/index.js: -------------------------------------------------------------------------------- 1 | import { mount } from "svelte"; 2 | import Demos from "./common/Index.svelte"; 3 | 4 | mount(Demos, { 5 | target: document.querySelector("#wx_demo_area") || document.body, 6 | }); 7 | -------------------------------------------------------------------------------- /svelte/demos/routes.js: -------------------------------------------------------------------------------- 1 | import BasicInit from "./cases/BasicInit.svelte"; 2 | import ClientHandler from "./cases/ClientHandler.svelte"; 3 | import CustomControls from "./cases/CustomControls.svelte"; 4 | import OpenAPI from "./cases/OpenAPI.svelte"; 5 | import DropAPI from "./cases/DropAPI.svelte"; 6 | 7 | export const links = [ 8 | ["/base/:skin", "Basic usage", BasicInit], 9 | ["/client/:skin", "Client side handlers", ClientHandler], 10 | ["/controls/:skin", "With button", CustomControls], 11 | ["/api/:skin", "Open API", OpenAPI], 12 | ["/dropzone/:skin", "Drop API", DropAPI], 13 | ]; -------------------------------------------------------------------------------- /svelte/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte Widgets 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /svelte/license.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 XB Software Sp. z o.o. 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. -------------------------------------------------------------------------------- /svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wx-svelte-uploader", 3 | "version": "2.1.1", 4 | "description": "A Svelte UI component for easy and intuitive file upload", 5 | "productTag": "uploader", 6 | "productTrial": false, 7 | "type": "module", 8 | "scripts": { 9 | "build": "vite build", 10 | "build:dist": "vite build --mode dist", 11 | "build:tests": "vite build --mode test", 12 | "lint": "yarn eslint ./demos ./src", 13 | "start": "vite --open", 14 | "start:tests": "vite --open=/tests/ --host 0.0.0.0 --port 5100 --mode test", 15 | "test": "true", 16 | "test:cypress": "cypress run -P ./ --config \"baseUrl=http://localhost:5100/tests\"" 17 | }, 18 | "svelte": "src/index.js", 19 | "exports": { 20 | ".": { 21 | "svelte": "./src/index.js" 22 | }, 23 | "./package.json": "./package.json" 24 | }, 25 | "license": "MIT", 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/svar-widgets/uploader.git" 29 | }, 30 | "bugs": { 31 | "url": "https://forum.svar.dev" 32 | }, 33 | "homepage": "https://svar.dev/svelte/core/", 34 | "dependencies": { 35 | "wx-svelte-core": "2.1.1", 36 | "wx-lib-dom": "0.8.0" 37 | }, 38 | "files": [ 39 | "src", 40 | "readme.md", 41 | "whatsnew.md", 42 | "license.txt" 43 | ], 44 | "keywords": [ 45 | "svelte", 46 | "svar widgets", 47 | "upload", 48 | "uploader", 49 | "file uploader", 50 | "svelte uploader", 51 | "svelte component", 52 | "ui component", 53 | "svelte file uploader", 54 | "fileuploader" 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /svelte/postcss.config.js: -------------------------------------------------------------------------------- 1 | import autoprefixer from "autoprefixer"; 2 | 3 | const plugins = [autoprefixer]; 4 | export { plugins }; 5 | -------------------------------------------------------------------------------- /svelte/readme.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # SVAR Svelte File Uploader 4 | 5 | [![npm](https://img.shields.io/npm/v/wx-svelte-uploader.svg)](https://www.npmjs.com/package/wx-svelte-uploader) 6 | [![License](https://img.shields.io/github/license/svar-widgets/uploader)](https://github.com/svar-widgets/uploader/blob/main/license.txt) 7 | [![npm downloads](https://img.shields.io/npm/dm/wx-svelte-uploader.svg)](https://www.npmjs.com/package/wx-svelte-uploader) 8 | 9 |
10 | 11 | A Svelte UI component for easy and intuitive file uploading, allowing users to drag and drop files or select them from their device. 12 | See the demos [here](https://docs.svar.dev/svelte/core/samples-uploader). 13 | 14 | ### How to Use 15 | 16 | To use the widget, simply import the package and include the component in your Svelte file: 17 | 18 | ```svelte 19 | 29 | 30 | 31 | 32 | ``` 33 | 34 | ### How to Modify 35 | 36 | Typically, you don't need to modify the code. However, if you wish to do so, follow these steps: 37 | 38 | 1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work 39 | 2. Start the project in development mode with `yarn start` 40 | 41 | ### Run Tests 42 | 43 | To run the test: 44 | 45 | 1. Start the test examples with: 46 | ```sh 47 | yarn start:tests 48 | ``` 49 | 2. In a separate console, run the end-to-end tests with: 50 | ```sh 51 | yarn test:cypress 52 | ``` 53 | -------------------------------------------------------------------------------- /svelte/src/components/Uploader.svelte: -------------------------------------------------------------------------------- 1 | 188 | 189 | {#if apiOnly} 190 | 199 | {@render children?.()} 200 | {:else} 201 |
207 | 216 | {#if children}{@render children({ open })}{:else} 217 |
218 | 219 | Drop files here or 220 | 221 | 222 | select files 223 | 224 |
225 | {/if} 226 |
227 | {/if} 228 | 229 | 266 | -------------------------------------------------------------------------------- /svelte/src/components/UploaderList.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | {#if data.length} 25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 | {#each data as obj (obj.id)} 33 |
34 |
35 |
{obj.name}
36 | {#if obj.file} 37 |
{formatSize(obj.file.size)}
38 | {/if} 39 |
40 | {#if obj.status === "client"} 41 | 42 | {:else if obj.status === "error"} 43 | 44 | 45 | 46 | remove(obj.id)} 49 | > 50 | {:else if !obj.status || obj.status === "server"} 51 | 52 | 53 | 54 | remove(obj.id)} 57 | > 58 | {/if} 59 |
60 |
61 | {/each} 62 |
63 |
64 | {/if} 65 | 66 | 136 | -------------------------------------------------------------------------------- /svelte/src/helpers/consts.js: -------------------------------------------------------------------------------- 1 | // context key for Uploader 2 | export const apiKey = "wx-uploader-api"; -------------------------------------------------------------------------------- /svelte/src/index.js: -------------------------------------------------------------------------------- 1 | import Uploader from "./components/Uploader.svelte"; 2 | import UploaderList from "./components/UploaderList.svelte"; 3 | import { apiKey } from "./helpers/consts"; 4 | 5 | export { Uploader, UploaderList, apiKey }; 6 | -------------------------------------------------------------------------------- /svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | }; 8 | -------------------------------------------------------------------------------- /svelte/tests/Index.svelte: -------------------------------------------------------------------------------- 1 | 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 | 98 | -------------------------------------------------------------------------------- /svelte/tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte Widgets 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /svelte/tests/index.js: -------------------------------------------------------------------------------- 1 | import Demos from "./Index.svelte"; 2 | import { mount } from "svelte"; 3 | 4 | mount(Demos, { 5 | target: document.querySelector("#wx_demo_area") || document.body, 6 | }); 7 | -------------------------------------------------------------------------------- /svelte/tests/routes.js: -------------------------------------------------------------------------------- 1 | export const links = [ 2 | ]; -------------------------------------------------------------------------------- /svelte/vite.config.js: -------------------------------------------------------------------------------- 1 | import { loadEnv } from "vite"; 2 | import { resolve } from "path"; 3 | import { existsSync } from "fs"; 4 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 5 | import { visualizer } from "rollup-plugin-visualizer"; 6 | import { waitChanges, waitOn } from "wx-vite-tools"; 7 | import conditionalCompile from "vite-plugin-conditional-compile"; 8 | import pkg from "./package.json" with { type: "json" }; 9 | 10 | export default async ({ mode }) => { 11 | process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "WX") }; 12 | const files = []; 13 | 14 | if (mode !== "production") { 15 | const paths = [ 16 | resolve(__dirname, "../store/dist/index.js"), 17 | resolve(__dirname, "../provider/dist/index.js"), 18 | ]; 19 | 20 | paths.forEach(path => { 21 | if (existsSync(path)) { 22 | files.push(path); 23 | } 24 | }); 25 | } 26 | 27 | const plugins = []; 28 | 29 | if (files.length) plugins.push(waitChanges({ files })); 30 | if (mode !== "development") plugins.push(conditionalCompile()); 31 | plugins.push(svelte({})); 32 | 33 | const name = pkg.productTag; 34 | 35 | let build, 36 | publicDir = resolve(__dirname, "public"), 37 | server = {}, 38 | base = ""; 39 | 40 | if (mode === "test") { 41 | build = { 42 | rollupOptions: { 43 | input: { tests: resolve(__dirname, "tests/index.html") }, 44 | }, 45 | }; 46 | server.port = 5100; 47 | } else { 48 | build = { 49 | rollupOptions: { 50 | input: { index: resolve(__dirname, "index.html") }, 51 | }, 52 | }; 53 | } 54 | 55 | if (process.env.WX_BUILD_STATS) { 56 | build = { 57 | lib: { 58 | entry: resolve(__dirname, "src/index.js"), 59 | name, 60 | formats: ["es"], 61 | fileName: format => `${name}.${format}.js`, 62 | }, 63 | outDir: "./dist", 64 | sourcemap: true, 65 | minify: true, 66 | target: "esnext", 67 | }; 68 | publicDir = false; 69 | plugins.push(visualizer({ filename: "dist/stats.html" })); 70 | } 71 | 72 | if (files.length) await waitOn({ files }); 73 | 74 | return { 75 | base, 76 | build, 77 | publicDir, 78 | resolve: { dedupe: ["svelte"] }, 79 | plugins, 80 | server, 81 | watch: { 82 | persistent: true, 83 | include: ["src/**/*.ts", "src/**/*.js"], 84 | }, 85 | }; 86 | }; 87 | -------------------------------------------------------------------------------- /svelte/whatsnew.md: -------------------------------------------------------------------------------- 1 | ## 2.1.0 2 | 3 | - Using core@2.1.0 4 | 5 | ## 2.0.2 6 | 7 | ### Fixes 8 | 9 | - Restore ability to use api 10 | 11 | ## 2.0.1 12 | 13 | ### New features 14 | 15 | - Svelte 5 support 16 | 17 | ## 1.3.0 18 | 19 | - Using core@1.3.0 20 | 21 | ## 0.2.1 22 | 23 | ### Fixes 24 | 25 | - Disabled state was ignored by drag-n-drop operations 26 | 27 | ## 0.2.0 28 | 29 | ### New features 30 | 31 | - Disabled state 32 | 33 | ## 0.1.0 34 | 35 | Initial version 36 | --------------------------------------------------------------------------------