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

Uppy offers three ways to build user interfaces:

1. Pre-composed, plug-and-play components. Mainly <Dashboard /> and <DragDrop />. The downside is that you can’t customize the UI.
2. Headless components (Svelte 5 only). Smaller componentes, easier to override the styles or compose them together with your own components.
3. Hooks (Svelte 5 only). Attach our logic to your own components, no restrictions, create a tailor-made UI.

Components

Pre-composed, plug-and-play components:

• <Dashboard /> renders @uppy/dashboard
• <DashboardModal /> renders @uppy/dashboard as a modal
• <DragDrop /> renders @uppy/drag-drop - Removed in favor of Dropzone and useDropzone in Uppy 5.0
• <ProgressBar /> renders @uppy/progress-bar - Removed in Uppy 5.0
• <StatusBar /> renders @uppy/status-bar

Headless Components

tip

Play around with the Svelte headless components in StackBlitz

note

All components must be placed within a UppyContextProvider. Headless components only work with Svelte 5

Uppy’s headless components are smaller and more flexible. All components must be placed within a UppyContextProvider. They come styled as well but you can override the styles with data attributes, for example with UploadButton:

button[data-uppy-element='upload-button'][data-state='uploading'] {
	background-color: lightblue;
}

UppyContextProvider

Provides Uppy context to child components and manages global upload status/progress.

<script>
	import { UppyContextProvider } from '@uppy/svelte';
	import Uppy from '@uppy/core';

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

<UppyContextProvider {uppy}>
	<!-- Your components and/or Uppy components -->
</UppyContextProvider>

Context Value:

{
	uppy: Uppy | undefined;
	status: 'init' | 'ready' | 'uploading' | 'paused' | 'error' | 'complete';
	progress: number;
}

<UploadButton />

Attributes

• data-uppy-element="upload-button"
• data-state="init" | "uploading" | "paused" | "error" | "complete"

<Thumbnail />

Component for displaying image thumbnails and/or SVG icons.

Props:

• file: UppyFile<Meta, Body>
• width?: string
• height?: string
• images?: boolean

<ProviderIcon />

Common icons, such as a webcam, device, Dropbox, Google Drive, OneDrive, etc.

Props:

• provider: 'device' | 'camera' | 'screen-capture' | 'audio' | 'dropbox' | 'facebook' | 'instagram' | 'onedrive' | 'googlephotos' | 'googledrive'
• fill?: string

Device

Camera

Screen Capture

Audio

Dropbox

Facebook

Instagram

OneDrive

Google Photos

Google Drive

<FilesList />

Component for displaying a list view of selected files.

Props:

• editFile?: (file: UppyFile<Meta, Body>) => void

<FilesGrid />

Grid layout component for displaying files in a grid format.

Props:

• editFile?: (file: UppyFile<Meta, Body>) => void
• columns?: number

<Dropzone />

Drag-and-drop zone component for file uploads.

Props:

• width?: string
• height?: string
• note?: string
• noClick?: boolean

Hooks

tip

Play around with the Svelte headless hooks in StackBlitz

note

All hooks must be used within a UppyContextProvider. Hooks only work in Svelte 5.

useDropzone(options?)

Creates a dropzone for drag-and-drop file uploads using Uppy.

Arguments:

• noClick?: boolean
• onDragOver?: (event: Event) => void
• onDragEnter?: (event: Event) => void
• onDragLeave?: (event: Event) => void
• onDrop?: (files: File[]) => void
• onFileInputChange?: (files: File[]) => void

Returns:

• getRootProps: Function
• getInputProps: Function

useFileInput(props?)

Creates a file input for programmatic file selection using Uppy.

Arguments:

• multiple?: boolean
• accept?: string

Returns:

• getInputProps: Function
• getButtonProps: Function

useRemoteSource(sourceId)

Manages remote source connections (cloud storage providers).

Arguments:

• sourceId: 'Box' | 'Dropbox' | 'Facebook' | 'GoogleDrive' | 'Instagram' | 'OneDrive' | 'Unsplash' | 'Url' | 'Zoom'

Returns:

{
  state: {
    authenticated: boolean | undefined
    didFirstRender: boolean
    searchString: string
    loading: boolean | string
    partialTree: PartialTree
    currentFolderId: PartialTreeId
    username: string | null
    breadcrumbs: PartialTreeFolder[]
    selectedAmount: number
    error: string | null
  }
  login: Function
  logout: Function
  open: Function
  checkbox: Function
  done: Function
  cancel: Function
}

useWebcam({ onSubmit })

Manages webcam functionality for capturing photos/videos.

Arguments:

• onSubmit: () => void

Returns:

{
  state: {
    hasCamera: boolean
    cameraReady: boolean
    cameraError: null | Error
    recordingLengthSeconds: number
    videoSources: MediaDeviceInfo[]
    currentDeviceId: string | MediaStreamTrack | null | undefined
    recordedVideo: null | string
    isRecording: boolean
    status: 'init' | 'ready' | 'recording' | 'captured' | 'error'
  }
  stop: Function
  start: Function
  getVideoProps: Function
  getSnapshotButtonProps: Function
  getRecordButtonProps: Function
  getStopRecordingButtonProps: Function
  getSubmitButtonProps: Function
  getDiscardButtonProps: Function
}

useScreenCapture({ onSubmit })

Manages screen capture functionality for capturing screen image / video.

Arguments:

• onSubmit: () => void

Returns:

{
	state: {
		streamActive: boolean;
		audioStreamActive: boolean;
		recording: boolean;
		recordedVideo: string | null;
		screenRecError: Error | null;
		capturedScreenshotUrl: string | null;
		status: 'init' | 'ready' | 'recording' | 'captured' | 'error';
	}
	stop: Function;
	start: Function;
	getVideoProps: Function;
	getScreenshotButtonProps: Function;
	getRecordButtonProps: Function;
	getStopRecordingButtonProps: Function;
	getSubmitButtonProps: Function;
	getDiscardButtonProps: Function;
}