Component/file upload

packages/svelteui-core/src/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'svelte/elements';
+import { ColorShades, DefaultProps, SvelteUIColor, SvelteUINumberSize } from '$lib/styles';
+
+
+
+export interface FileItem {
+	name?: string;
+	icon?: string;
+	size?: number;
+	file?: File
+
+}
+
+
+export interface FileUploadProps extends DefaultProps<HTMLDivElement>, HTMLAttributes<HTMLElement> {
+	accept?: string;
+	color?: SvelteUIColor;
+	size?: SvelteUINumberSize;
+	label?: string;
+	type?: string = undefined | 'drag';
+	multiple?: boolean;
+	name?: string;
+	files?: FileItem[];
+	icon?: Component | HTMLOrSVGElement;
+	preview?: boolean;
+	resetLabel?: string;
+	reset?: boolean;
+	resetColor?: SvelteUIColor;
+	disabled?: boolean;
+	resetIcon?: Component | HTMLOrSVGElement;
+}
+
+
+export interface FileUploadEvents {
+	selected?: CustomEvent<any>;
+	removed?: CustomEvent<File, number>;
+	reset?: CustomEvent<>;
+}

packages/svelteui-core/src/components/FileUpload/FileUpload.stories.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
+	import { Download, Trash } from 'radix-icons-svelte';
+	import Button from '../Button/Button.svelte';
+	import IconRenderer from '../IconRenderer/IconRenderer.svelte';
+	import { Text } from '../Text';
+	import { FileUpload } from './index';
+
+	function handleSelected(files) {
+		console.log(files);
+	}
+
+	let files = [];
+
+	function preview(file) {
+		return URL.createObjectURL(file);
+	}
+
+	function remove(index) {
+		files = files.filter((e, i) => i !== index);
+	}
+</script>
+
+<Meta title="Components/FileUpload" component={FileUpload} />
+
+<Template let:args>
+	<div style="width: 500px;">
+		<FileUpload {...args} />
+	</div>
+</Template>
+
+<Story name="FileUpload" />
+
+<Story name="Drop">
+	<div style="width: 500px;">
+		<FileUpload 
+			type="drag"
+			multiple={true}
+			size={'md'}
+			on:selected={ handleSelected}
+		>
+			<IconRenderer iconSize={48} icon={Download} />
+			<Text align="center" weight={'semibold'}>Click or drag file to this area to FileUpload</Text>
+			<Text align="center" size="sm" color="dimmed">
+				Support for a single or bulk FileUpload. Strictly prohibit from FileUploading company data
+				or other band files
+			</Text>
+		</FileUpload>
+	</div>
+</Story>
+
+<Story name="Size">
+	<div style="width: 500px;">
+		<FileUpload size="lg" reset={true} />
+		<br />
+		<FileUpload size="md" reset={true} />
+		<br />
+		<FileUpload size="sm" reset={true} />
+		<br />
+		<FileUpload size="xs" reset={true} />
+	</div>
+</Story>
+
+<Story name="Accept">
+	<div style="width: 500px;">
+		<FileUpload size="md" reset={true} accept="image/png,image/jpeg" />
+	</div>
+</Story>
+
+<Story name="Custom Preview">
+	<div style="width: 500px;">
+		<FileUpload
+			size="md"
+			multiple={true}
+			accept="image/png,image/jpeg"
+			bind:files
+			reset={true}
+			preview={false}
+		/>
+
+		<ul style="list-style: none;padding: 0;">
+			{#each files as { file }, i}
+				<li style="display: flex;align-items: center;gap:10px;margin-bottom:10px;border: 1px solid #ccc;padding: 3px;">
+					<img
+						style="width: 50px; height: 50px;"
+						src={preview(file)}
+						alt="image{i}"
+					/>
+					<span style="flex: 1;">{file.name}</span>
+					<Button variant="default" size={'md'} on:click={() => remove(i)}>
+						<IconRenderer iconSize={20} icon={Trash} />
+					</Button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</Story>

packages/svelteui-core/src/components/FileUpload/FileUpload.styles.ts

@@ -0,0 +1,125 @@
+import { createStyles } from '$lib/styles';
+import type { SvelteUINumberSize, SvelteUIColor } from '$lib/styles';
+
+
+export interface FileUploadStylesParams {
+	color: SvelteUIColor;
+	size: SvelteUINumberSize;
+}
+
+export const fontSizes = {
+	xs: 12,
+	sm: 14,
+	md: 16,
+	lg: 18,
+	xl: 20
+};
+
+export const heights = {
+	xs: 30,
+	sm: 38,
+	md: 48,
+	lg: 58,
+	xl: 68
+};
+
+
+export default createStyles(
+	(theme, { color, size }: FileUploadStylesParams) => ({
+		root: {
+			position: 'relative',
+			display: 'flex'
+		},
+		drag: {
+			[`${theme.dark} &`]: {
+				background: theme.fn.themeColor('dark', 4),
+				border: `1px dashed ${theme.fn.themeColor('dark', 4)}`,
+			},
+			position: 'relative',
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center',
+			flexDirection: 'column',
+			gap: '12px',
+			padding: '20px 10px',
+			width: '100%',
+			height: '100%',
+			textAlign: 'center',
+			background: '#fafafa',
+			border: `1px dashed ${theme.fn.themeColor('gray', 4)}`,
+			borderRadius: '2px',
+			cursor: 'pointer',
+			'&:hover': {
+				border: `1px dashed ${color}`,
+			},
+			'&.disabled *': {
+				[`${theme.dark} &`]: {
+					background: theme.fn.themeColor('dark', 4),
+					border: `1px dashed ${theme.fn.themeColor('dark', 4)}`,
+					color: theme.fn.themeColor('gray', 6)
+				},
+				background: theme.fn.themeColor('light', 4),
+				border: `1px dashed ${theme.fn.themeColor('light', 4)}`,
+				color: theme.fn.themeColor('gray', 4)
+			}
+
+		},
+		inputContainer: {
+			width: 0,
+			height: 0,
+			padding: 0,
+			opacity: 0,
+			margin: 0,
+			overflow: 'hidden'
+		},
+		input: {
+			visibility: 'hidden'
+		},
+		icon: {
+			fontSize: '30px'
+		},
+		uploadIcon: {
+			paddingRight: '15px'
+		},
+		active: {
+			backgroundColor: `${color}`
+		},
+		fileItemWrapper: {
+			[`${theme.dark} &`]: {
+				border: `1px solid ${theme.fn.themeColor('dark', 4)}`,
+			},
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			position: 'relative',
+			height: heights[size],
+			padding: '8px',
+			border: `1px solid ${theme.fn.themeColor('gray', 4)}`,
+			borderRadius: '2px',
+			margin: '8px 0px'
+		},
+		fileItemIcon: {
+			lineHeight: '60px',
+			textAlign: 'center',
+			opacity: '.8',
+			flex: 'none',
+
+		},
+		fileItemName: {
+			flex: 'auto',
+			margin: 0,
+			padding: '0 8px',
+			fontSize: fontSizes[size]
+		},
+		fileItemAction: {
+			position: 'static',
+			marginLeft: '8px',
+			marginRight: '8px',
+
+		},
+		buttonType: {
+			display: 'flex',
+			gap: '10px'
+		}
+	})
+);