mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-24 02:38:58 +00:00
70 lines
1.5 KiB
Text
70 lines
1.5 KiB
Text
---
|
|
slug: /svelte
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
# Svelte
|
|
|
|
[Svelte][] components for the Uppy UI plugins.
|
|
|
|
## Install
|
|
|
|
<Tabs>
|
|
<TabItem value="npm" label="NPM" default>
|
|
|
|
```shell
|
|
npm install @uppy/svelte
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="yarn" label="Yarn">
|
|
|
|
```shell
|
|
yarn add @uppy/svelte
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
:::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`](/docs/dashboard)
|
|
- `<DragDrop />` renders [`@uppy/drag-drop`](/docs/drag-drop)
|
|
- `<ProgressBar />` renders [`@uppy/progress-bar`](/docs/progress-bar)
|
|
- `<StatusBar />` renders [`@uppy/status-bar`](/docs/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.
|
|
|
|
```svelte
|
|
<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>
|
|
```
|
|
|
|
[svelte]: https://svelte.dev
|