wx-svelte-uploader 1.3.0 → 2.0.0-beta-2

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "wx-svelte-uploader",
-	"version": "1.3.0",
+	"version": "2.0.0-beta-2",
+	"description": "A Svelte UI component for easy and intuitive file upload",
 	"productTag": "uploader",
 	"productTrial": false,
 	"type": "module",
@@ -9,7 +10,7 @@
 		"build:dist": "vite build --mode dist",
 		"build:tests": "vite build --mode test",
 		"lint": "yarn eslint ./demos ./src --ext .svelte,.ts,.js",
-		"start": "vite --open=/demos/",
+		"start": "vite --open",
 		"start:tests": "vite --open=/tests/ --host 0.0.0.0  --port 5100 --mode test",
 		"test": "true",
 		"test:cypress": "cypress run -P ./ --config \"baseUrl=http://localhost:5100/tests\""
@@ -22,16 +23,34 @@
 		"./package.json": "./package.json"
 	},
 	"license": "MIT",
-	"dependencies": {
-		"wx-lib-dom": "^0.6.0"
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/svar-widgets/uploader.git"
+	},
+	"bugs": {
+		"url": "https://forum.svar.dev"
 	},
-	"devDependencies": {
-		"wx-svelte-core": "^1.3.0"
+	"homepage": "https://svar.dev/svelte/core/",
+	"dependencies": {
+		"wx-svelte-core": "2.0.0-beta-2",
+		"wx-lib-dom": "0.6.0"
 	},
 	"files": [
 		"src",
 		"readme.md",
 		"whatsnew.md",
 		"license.txt"
+	],
+	"keywords": [
+		"svelte",
+		"svar widgets",
+		"upload",
+		"uploader",
+		"file uploader",
+		"svelte uploader",
+		"svelte component",
+		"ui component",
+		"svelte file uploader",
+		"fileuploader"
 	]
 }

package/readme.md

@@ -1,38 +1,52 @@
-# WX Uploader
+<div align="center">
+	
+# SVAR Svelte File Uploader
 
-## Usage
+[![npm](https://img.shields.io/npm/v/wx-svelte-uploader.svg)](https://www.npmjs.com/package/wx-svelte-uploader)
+[![License](https://img.shields.io/github/license/svar-widgets/uploader)](https://github.com/svar-widgets/uploader/blob/main/license.txt)
+[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-uploader.svg)](https://www.npmjs.com/package/wx-svelte-uploader)
 
-```
-<script>
-import { Uploader }  from 'wx-svelte-uploader';
-</script>
+</div>
 
-<Uploader />
-```
+A Svelte UI component for easy and intuitive file uploading, allowing users to drag and drop files or select them from their device.
+See the demos [here](https://docs.svar.dev/svelte/core/samples-uploader).
 
-## Cli commands
+### How to Use
 
-### Build
+To use the widget, simply import the package and include the component in your Svelte file:
 
--   `yarn dev` - start project in dev mode, rebuild on change
--   `yarn build` - build production ready js file
-
-the dev server will start at http://localhost:5100/tests.html
+```svelte
+<script>
+	import { Uploader, UploaderList } from "wx-svelte-uploader";
 
-### Tests
+	let data = [];
+	const uploadURL = "http://localhost:3000/data";
 
-#### Run tests
+	function handleUpload(ev) {
+		console.log(ev.detail);
+	}
+</script>
 
-```
-yarn dev:tests
-cypress run -P ./ --config "baseUrl=http://localhost:5100"
+<UploaderList bind:data />
+<Uploader {uploadURL} bind:data on:upload={handleUpload} />
 ```
 
-#### Open Cypress console
+### How to Modify
 
-```
-yarn dev:tests
-cypress open -P ./ --config "baseUrl=http://localhost:5100"
-```
+Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
+
+1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
+2. Start the project in development mode with `yarn start`
+
+### Run Tests
+
+To run the test:
 
-dev:tests command will start dev server at http://localhost:5100/tests.html
+1. Start the test examples with:
+    ```sh
+    yarn start:tests
+    ```
+2. In a separate console, run the end-to-end tests with:
+    ```sh
+    yarn test:cypress
+    ```

package/src/components/Uploader.svelte

@@ -1,27 +1,31 @@
 <script>
 	import { uid } from "wx-lib-dom";
-	import { onMount, createEventDispatcher, setContext } from "svelte";
+	import { onMount, setContext } from "svelte";
 	import { apiKey } from "../helpers/consts";
 
-	const dispatch = createEventDispatcher();
-
-	export let data = [];
-	export let accept = "";
-	export let multiple = true;
-	export let folder = false;
-	export let uploadURL = "";
-	export let apiOnly = false;
-	export let disabled = false;
-
-	export let ready = new Promise(() => ({}));
-
-	let input;
-	let drag;
+	let {
+		data = $bindable([]),
+		ready = $bindable(new Promise(() => ({}))),
+
+		accept = "",
+		multiple = true,
+		folder = false,
+		uploadURL = "",
+		apiOnly = false,
+		disabled = false,
+		children,
+		onchange,
+		onupload,
+	} = $props();
+
+	let input = $state();
+	let drag = $state();
 	let count = 0;
 	let lastCtx = {};
 
 	const api = {
 		open: ctx => open(ctx),
+		getState: () => getState(),
 		droparea: (node, ctx) => {
 			if (disabled) return;
 
@@ -98,7 +102,7 @@
 		};
 
 		if (obj.selected) obj.selected(obj);
-		dispatch("select", obj);
+		onchange && onchange(obj);
 
 		if (multiple) {
 			data = [...data, obj];
@@ -146,13 +150,28 @@
 			});
 	}
 
+	// returns client if any file is being uploaded
+	// returns error if any file has failed and no file is being uploaded
+	// returns server if all files have been uploaded
+	function getState() {
+		let status = "server";
+		for (let i = 0; i < data.length; i++) {
+			if (data[i].status === "client") return "client";
+			if (data[i].status === "error") status = "error";
+		}
+
+		return status;
+	}
+
 	function updateData(id, result) {
 		const ind = data.findIndex(i => i.id == id);
-		const temp = (data[ind] = { ...data[ind], ...result });
-		if (temp && temp.uploaded) temp.uploaded(temp);
-		dispatch("upload", data[ind]);
+		const file = (data[ind] = { ...data[ind], ...result });
+
+		const res = { file, status: getState() };
+		if (file && file.uploaded) file.uploaded(res);
+		onupload && onupload(res);
 
-		if (temp.temp) data = data.filter(i => i.id != id);
+		if (file.temp) data = data.filter(i => i.id != id);
 	}
 
 	function dragenter() {
@@ -176,12 +195,12 @@
 		type="file"
 		class="input"
 		bind:this={input}
-		on:change={add}
+		onchange={add}
 		{accept}
 		{multiple}
 		{disabled}
 	/>
-	<slot />
+	{@render children?.()}
 {:else}
 	<div
 		class="label"
@@ -193,19 +212,21 @@
 			type="file"
 			class="input"
 			bind:this={input}
-			on:change={add}
+			onchange={add}
 			{accept}
 			{multiple}
 			{disabled}
 		/>
-		<slot {open}>
+		{#if children}{@render children({ open })}{:else}
 			<div class="dropzone">
 				<span>
 					Drop files here or
-					<span class="action" on:click={open}>select files</span>
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<span class="action" onclick={open}>select files</span>
 				</span>
 			</div>
-		</slot>
+		{/if}
 	</div>
 {/if}
 

package/src/components/UploaderList.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let data;
+	let { data = $bindable([]) } = $props();
 
 	const fileSize = ["b", "Kb", "Mb", "Gb", "Tb", "Pb", "Eb"];
 
@@ -19,35 +19,42 @@
 		}
 		return Math.round(size * 100) / 100 + " " + fileSize[index];
 	}
-
 </script>
 
 {#if data.length}
 	<div class="layout">
 		<div class="header">
-			<i class="icon wxi-close" on:click={removeAll} />
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<i class="icon wxi-close" onclick={removeAll}></i>
 		</div>
 		<div class="list">
 			{#each data as obj (obj.id)}
 				<div class="row">
-					<div class="file-icon" />
+					<div class="file-icon"></div>
 					<div class="name">{obj.name}</div>
 					{#if obj.file}
 						<div class="size">{formatSize(obj.file.size)}</div>
 					{/if}
 					<div class="controls">
-						{#if obj.status === 'client'}
-							<i class="icon wxi-spin wxi-loading" />
-						{:else if obj.status === 'error'}
-							<i class="icon wxi-alert" />
+						{#if obj.status === "client"}
+							<i class="icon wxi-spin wxi-loading"></i>
+						{:else if obj.status === "error"}
+							<i class="icon wxi-alert"></i>
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<i
 								class="icon wxi-close"
-								on:click={() => remove(obj.id)} />
-						{:else if !obj.status || obj.status === 'server'}
-							<i class="icon wxi-check" />
+								onclick={() => remove(obj.id)}
+							></i>
+						{:else if !obj.status || obj.status === "server"}
+							<i class="icon wxi-check"></i>
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<i
 								class="icon wxi-close"
-								on:click={() => remove(obj.id)} />
+								onclick={() => remove(obj.id)}
+							></i>
 						{/if}
 					</div>
 				</div>
@@ -90,9 +97,6 @@
 		text-overflow: ellipsis;
 	}
 
-	.controls {
-	}
-
 	.icon {
 		display: flex;
 		justify-content: center;
@@ -128,5 +132,4 @@
 	.wxi-alert {
 		display: flex;
 	}
-
 </style>