Svelte

Svelte components for the Uppy UI plugins.

Install

NPM

npm install @uppy/svelte

Yarn

yarn add @uppy/svelte

note

You also need to install the UI plugin you want to use. For instance, @uppy/dashboard.

Use

The following plugins are available as Svelte component wrappers:

• <Dashboard /> renders @uppy/dashboard
• <DashboardModal /> renders @uppy/dashboard as a modal
• <DragDrop /> renders @uppy/drag-drop
• <ProgressBar /> renders @uppy/progress-bar
• <StatusBar /> renders @uppy/status-bar

Instead of adding a UI plugin to an Uppy instance with .use(), the Uppy instance can be passed into components as an uppy prop. Due to the way Svelte handles reactivity, you can initialize Uppy the same way you would with vanilla JavaScript.

<script>
	import { Dashboard } from '@uppy/svelte';
	import Uppy from '@uppy/core';
	import Webcam from '@uppy/webcam';

	// Don't forget the CSS: core and UI components + plugins you are using
	import '@uppy/core/dist/style.css';
	import '@uppy/dashboard/dist/style.css';
	import '@uppy/webcam/dist/style.css';

	const uppy = new Uppy().use(Webcam);
</script>

<main><Dashboard uppy={uppy} /></main>