Skip to main content

Vue

Vue components for the Uppy UI plugins.

Install

npm install @uppy/vue
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. Smaller componentes, easier to override the styles or compose them together with your own components.
  3. Hooks. Attach our logic to your own components, no restrictions, create a tailor-made UI.

Components

Pre-composed, plug-and-play components:

Headless Components

tip

Play around with the Vue headless components in StackBlitz

note

All components must be placed within a UppyContextProvider.

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/vue';
import Uppy from '@uppy/core';

export default {
components: {
UppyContextProvider,
},
data() {
return {
uppy: new Uppy(),
};
},
};
</script>

<template>
<UppyContextProvider :uppy="uppy">
<!-- Your components and/or Uppy components -->
</UppyContextProvider>
</template>

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 Vue headless hooks in StackBlitz

note

All hooks must be used within a UppyContextProvider.

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
}