File Drop Zone

A file drop zone component.

Component Source

Basic

Installation

			jsrepo add ui/file-drop-zone
		

Usage

Custom placeholder:

Upload files

Form

200
{
  attachments: []
}

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.