Vue
Vue components for the Uppy UI plugins.
Install
- NPM
- Yarn
npm install @uppy/vue
yarn add @uppy/vue
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:
- Pre-composed, plug-and-play components. Mainly
<Dashboard />
and<DragDrop />
. The downside is that you can’t customize the UI. - Headless components. Smaller componentes, easier to override the styles or compose them together with your own components.
- Hooks. 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
<ProgressBar />
renders@uppy/progress-bar
<StatusBar />
renders@uppy/status-bar
Headless Components
Play around with the Vue headless components in StackBlitz
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
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
Play around with the Vue headless hooks in StackBlitz
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
}