wx-svelte-uploader 1.3.0

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 XB Software Sp. z o.o.
+
+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.

package/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "wx-svelte-uploader",
+	"version": "1.3.0",
+	"productTag": "uploader",
+	"productTrial": false,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"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: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\""
+	},
+	"svelte": "src/index.js",
+	"exports": {
+		".": {
+			"svelte": "./src/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"wx-lib-dom": "^0.6.0"
+	},
+	"devDependencies": {
+		"wx-svelte-core": "^1.3.0"
+	},
+	"files": [
+		"src",
+		"readme.md",
+		"whatsnew.md",
+		"license.txt"
+	]
+}

package/readme.md

@@ -0,0 +1,38 @@
+# WX Uploader
+
+## Usage
+
+```
+<script>
+import { Uploader }  from 'wx-svelte-uploader';
+</script>
+
+<Uploader />
+```
+
+## Cli commands
+
+### Build
+
+-   `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
+
+### Tests
+
+#### Run tests
+
+```
+yarn dev:tests
+cypress run -P ./ --config "baseUrl=http://localhost:5100"
+```
+
+#### Open Cypress console
+
+```
+yarn dev:tests
+cypress open -P ./ --config "baseUrl=http://localhost:5100"
+```
+
+dev:tests command will start dev server at http://localhost:5100/tests.html

package/src/components/Uploader.svelte

@@ -0,0 +1,248 @@
+<script>
+	import { uid } from "wx-lib-dom";
+	import { onMount, createEventDispatcher, 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 count = 0;
+	let lastCtx = {};
+
+	const api = {
+		open: ctx => open(ctx),
+		droparea: (node, ctx) => {
+			if (disabled) return;
+
+			ctx = ctx || {};
+			node.addEventListener("dragenter", () => {
+				if (ctx.dragEnter) ctx.dragEnter();
+				dragenter();
+			});
+			node.addEventListener("dragleave", () => {
+				if (ctx.dragEnter) ctx.dragLeave();
+				dragleave();
+			});
+
+			node.addEventListener("dragover", ev => ev.preventDefault(), true);
+			node.addEventListener(
+				"drop",
+				ev => {
+					ev.preventDefault();
+					lastCtx = ctx;
+					drop(ev);
+					if (ctx.dragEnter) ctx.dragLeave();
+				},
+				true
+			);
+		},
+	};
+
+	onMount(() => {
+		input.webkitdirectory = folder;
+	});
+
+	setContext(apiKey, api);
+
+	function add(ev) {
+		const files = Array.from(ev.target.files);
+		files.forEach(f => addFile(f));
+	}
+
+	function drop(ev) {
+		const items = Array.from(ev.dataTransfer.items);
+
+		items.forEach(item => {
+			const entry = item.webkitGetAsEntry();
+			if (entry) flatten(entry);
+		});
+
+		drag = false;
+		count = 0;
+	}
+
+	function flatten(item, path) {
+		path = path || "";
+		if (item.isFile) {
+			item.file(file => {
+				addFile(file);
+			});
+		} else if (item.isDirectory) {
+			const dir = item.createReader();
+			dir.readEntries(files => {
+				files.forEach(file => {
+					flatten(file, path + file.name + "/");
+				});
+			});
+		}
+	}
+
+	function addFile(file) {
+		const obj = {
+			...lastCtx,
+			id: uid(),
+			status: "client",
+			name: file.name,
+			file,
+		};
+
+		if (obj.selected) obj.selected(obj);
+		dispatch("select", obj);
+
+		if (multiple) {
+			data = [...data, obj];
+		} else {
+			data = [obj];
+		}
+
+		upload(obj);
+		input.value = "";
+	}
+
+	function defaultUploader(obj) {
+		const formData = new FormData();
+		formData.append("upload", obj.file);
+
+		const config = {
+			method: "POST",
+			body: formData,
+		};
+
+		return fetch(uploadURL, config)
+			.then(res => res.json())
+			.then(
+				data => ({ id: obj.id, ...data }),
+				() => ({ id: obj.id, status: "error" })
+			)
+			.catch(error => console.log(error));
+	}
+
+	function upload(obj) {
+		if (!obj) return;
+
+		const request =
+			typeof uploadURL === "function"
+				? uploadURL(obj)
+				: defaultUploader(obj);
+
+		ready = request
+			.then(r => {
+				r.status = r.status || "server";
+				updateData(obj.id, r);
+			})
+			.catch(error => {
+				updateData(obj.id, { status: "error", error });
+			});
+	}
+
+	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]);
+
+		if (temp.temp) data = data.filter(i => i.id != id);
+	}
+
+	function dragenter() {
+		if (count === 0) drag = true;
+		count++;
+	}
+
+	function dragleave() {
+		count--;
+		if (count === 0) drag = false;
+	}
+
+	function open(ctx) {
+		lastCtx = ctx || {};
+		input.click();
+	}
+</script>
+
+{#if apiOnly}
+	<input
+		type="file"
+		class="input"
+		bind:this={input}
+		on:change={add}
+		{accept}
+		{multiple}
+		{disabled}
+	/>
+	<slot />
+{:else}
+	<div
+		class="label"
+		class:active={drag}
+		class:wx-disabled={disabled}
+		use:api.droparea
+	>
+		<input
+			type="file"
+			class="input"
+			bind:this={input}
+			on:change={add}
+			{accept}
+			{multiple}
+			{disabled}
+		/>
+		<slot {open}>
+			<div class="dropzone">
+				<span>
+					Drop files here or
+					<span class="action" on:click={open}>select files</span>
+				</span>
+			</div>
+		</slot>
+	</div>
+{/if}
+
+<style>
+	.label {
+		display: flex;
+		align-items: center;
+	}
+
+	.label.active:not(.wx-disabled) .dropzone {
+		background-color: var(--wx-background-alt);
+	}
+	.input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+	}
+
+	.dropzone {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--wx-padding);
+		border: var(--wx-input-border);
+		border-style: dashed;
+		border-radius: var(--wx-input-border-radius);
+		background: var(--wx-uploader-background);
+	}
+	.label:not(.wx-disabled) .action {
+		cursor: pointer;
+		color: var(--wx-color-link);
+		text-decoration: underline;
+	}
+
+	.label.wx-disabled .dropzone {
+		background: var(--wx-color-disabled);
+		color: var(--wx-color-font-disabled);
+	}
+</style>

package/src/components/UploaderList.svelte

@@ -0,0 +1,132 @@
+<script>
+	export let data;
+
+	const fileSize = ["b", "Kb", "Mb", "Gb", "Tb", "Pb", "Eb"];
+
+	function removeAll() {
+		data = [];
+	}
+
+	function remove(id) {
+		data = data.filter(i => i.id !== id);
+	}
+
+	function formatSize(size) {
+		let index = 0;
+		while (size > 1024) {
+			index++;
+			size = size / 1024;
+		}
+		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} />
+		</div>
+		<div class="list">
+			{#each data as obj (obj.id)}
+				<div class="row">
+					<div class="file-icon" />
+					<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" />
+							<i
+								class="icon wxi-close"
+								on:click={() => remove(obj.id)} />
+						{:else if !obj.status || obj.status === 'server'}
+							<i class="icon wxi-check" />
+							<i
+								class="icon wxi-close"
+								on:click={() => remove(obj.id)} />
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.layout {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--wx-padding);
+		border-bottom: var(--wx-border);
+	}
+
+	.list {
+		overflow: auto;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		gap: var(--wx-padding);
+		padding: var(--wx-padding);
+		border-bottom: var(--wx-border);
+	}
+
+	.name {
+		flex: 1;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.controls {
+	}
+
+	.icon {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: var(--wx-icon-size);
+		height: var(--wx-icon-size);
+		font-size: var(--wx-icon-size);
+		line-height: 1;
+		border-radius: var(--wx-border-radius);
+		color: var(--wx-icon-color);
+		cursor: pointer;
+	}
+	.icon:before {
+		display: block;
+	}
+	.icon:hover {
+		background-color: var(--wx-background-hover);
+	}
+
+	.row:hover .wxi-close {
+		display: flex;
+	}
+	.row:hover .wxi-check,
+	.row:hover .wxi-alert {
+		display: none;
+	}
+
+	.row .wxi-close {
+		display: none;
+	}
+
+	.wxi-check,
+	.wxi-alert {
+		display: flex;
+	}
+
+</style>

package/src/helpers/consts.js

@@ -0,0 +1,2 @@
+// context key for Uploader
+export const apiKey = "wx-uploader-api";

package/src/index.js

@@ -0,0 +1,5 @@
+import Uploader from "./components/Uploader.svelte";
+import UploaderList from "./components/UploaderList.svelte";
+import { apiKey } from "./helpers/consts";
+
+export { Uploader, UploaderList, apiKey };

package/whatsnew.md

@@ -0,0 +1,15 @@
+### 1.3.0
+
+[dev] using core@1.3.0
+
+### 0.2.1
+
+[fix] disabled state was ignored by drag-n-drop operations
+
+### 0.2.0
+
+[add] disabled state
+
+### 0.1.0
+
+Initial version