Basic
{#each files as file, i}
{/each}
{#await file.url then src}
{/await}
{#await file.url}
{file.name}
{displaySize(file.size)}
Installation
jsrepo add ui/file-drop-zone
Usage
Custom placeholder:
Upload files
Form
Schema:
import * as v from 'valibot';
import { MEGABYTE } from '$lib/components/ui/file-drop-zone';
export const schema = v.object({
attachments: v.array(v.pipe(v.file(), v.maxSize(MEGABYTE * 2)))
});
export type Schema = v.InferInput;
Server:
import { fail, message, superValidate } from 'sveltekit-superforms';
import { valibot } from 'sveltekit-superforms/adapters';
import { schema } from './schema';
export const load = async () => {
return {
form: await superValidate({}, valibot(schema))
};
};
export const actions = {
default: async ({ request }) => {
const form = await superValidate(request, valibot(schema));
if (!form.valid) {
return fail(400, { form });
}
return message(form, 'Posted!');
}
};
Acknowledgements
This component takes inspiration from sadmann/file-uploader.