@useupup/vue

@useupup/vue

Vue 3 file uploader with cloud-drive sources (Google Drive, OneDrive, Dropbox, Box), resumable uploads, theming, and ICU i18n. A native port of the canonical upup React UI, DOM-identical to it.

Requires Vue 3.4+ (vue is a peer dependency).

Install

npm i @useupup/vue

Usage (Client Mode)

Client Mode uploads directly from the browser to your storage; your server only issues short-lived upload credentials at uploadEndpoint.

<script setup lang="ts">
import { UpupUploader } from '@useupup/vue'
import '@useupup/vue/styles'
</script>

<template>
    <UpupUploader
        provider="aws"
        upload-endpoint="/api/upload-token"
        :on-file-upload-complete="
            (file, key) => console.log('Uploaded', file.name, 'to', key)
        "
    />
</template>

The stylesheet is a separate import so projects without Tailwind get the same look. upload-endpoint is your own route returning a presigned upload URL — see the quickstart for a ready-made handler.

Server Mode

For credential isolation and server-proxied cloud drives, add @useupup/server and point the uploader at it:

<template>
    <UpupUploader mode="server" server-url="/api/upup" provider="aws" />
</template>

Also exported

The use* uploader composables (useUpupUpload, useUploaderFiles, useUploaderContext, and more), plus the FileSource, StorageProvider, and UploadStatus enums.

Links

• Vue quickstart
• Documentation
• Source & monorepo

License

MIT