vue-chunk-uploader

vue-chunk-uploader

A Vue 3 chunked file uploader compatible with the resumable.js protocol.

The upload core is UI-agnostic — you choose which adapter to use.

Choose a UI

Note about MUI: Material UI is for React. In the Vue ecosystem, the closest equivalent is Vuetify. For other UIs, use native, reka, or the useChunkUpload composable and build your own UI.

Install

npm install vue-chunk-uploader axios vue

Depending on the UI:

# Quasar
npm install quasar

# or Vuetify
npm install vuetify

# or Reka UI
npm install reka-ui

# or Element Plus
npm install element-plus

# or Ant Design Vue
npm install ant-design-vue

# or Naive UI
npm install naive-ui

Usage — Quasar

import { createApp } from 'vue'
import { Quasar } from 'quasar'
import VueChunkUploader from 'vue-chunk-uploader/quasar'
import axios from 'axios'

const api = axios.create({ baseURL: 'https://api.example.com', withCredentials: true })

const app = createApp(App)
app.use(Quasar)
app.use(VueChunkUploader, { httpClient: api })
app.mount('#app')

<template>
  <ChunkUploader
    v-model="file"
    url="/api/document/chunk/upload"
    filled
    bottom-slots
    label="File"
    @onSuccess="onSuccess"
    @onError="onError"
  />
</template>

<script setup>
import { ref } from 'vue'
// or: import { ChunkUploader } from 'vue-chunk-uploader/quasar'

const file = ref(null)
</script>

Usage — Vuetify

import VueChunkUploader from 'vue-chunk-uploader/vuetify'

app.use(VueChunkUploader, { httpClient: api })

<template>
  <ChunkUploader
    v-model="file"
    url="/api/document/chunk/upload"
    label="File"
    variant="outlined"
    @onSuccess="onSuccess"
  />
</template>

Usage — Element Plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VueChunkUploader from 'vue-chunk-uploader/element-plus'

app.use(ElementPlus)
app.use(VueChunkUploader, { httpClient: api })

<template>
  <ChunkUploader
    v-model="file"
    url="/api/document/chunk/upload"
    button-label="Select file"
    accept=".pdf,.png"
    @onSuccess="onSuccess"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ChunkUploader } from 'vue-chunk-uploader/element-plus'

const file = ref(null)
</script>

Usage — Ant Design Vue

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import VueChunkUploader from 'vue-chunk-uploader/ant-design'

app.use(Antd)
app.use(VueChunkUploader, { httpClient: api })

<template>
  <ChunkUploader
    v-model="file"
    url="/api/document/chunk/upload"
    button-label="Select file"
    accept=".pdf,.png"
    @onSuccess="onSuccess"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ChunkUploader } from 'vue-chunk-uploader/ant-design'

const file = ref(null)
</script>

Usage — Naive UI

import naive from 'naive-ui'
import VueChunkUploader from 'vue-chunk-uploader/naive'

app.use(naive)
app.use(VueChunkUploader, { httpClient: api })

<template>
  <ChunkUploader
    v-model="file"
    url="/api/document/chunk/upload"
    button-label="Select file"
    accept=".pdf,.png"
    @onSuccess="onSuccess"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ChunkUploader } from 'vue-chunk-uploader/naive'

const file = ref(null)
</script>

Usage — Reka UI

Uses accessible Reka UI primitives (Label, Progress, Primitive). Since Reka is unstyled, import the package CSS (or override with your own styles).

import VueChunkUploader from 'vue-chunk-uploader/reka'
import 'vue-chunk-uploader/style.css'

app.use(VueChunkUploader, { httpClient: api })

<template>
  <ChunkUploader
    v-model="file"
    url="/api/document/chunk/upload"
    label="File"
    accept=".pdf,.png"
    @onSuccess="onSuccess"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ChunkUploader } from 'vue-chunk-uploader/reka'
import 'vue-chunk-uploader/style.css'

const file = ref(null)
</script>

Usage — Native (no UI framework)

import VueChunkUploader from 'vue-chunk-uploader/native'
import 'vue-chunk-uploader/style.css'

app.use(VueChunkUploader, { httpClient: api })

Or build a custom UI with the composable:

<script setup>
import { ref } from 'vue'
import { useChunkUpload } from 'vue-chunk-uploader'

const file = ref(null)
const props = {
  modelValue: file,
  url: '/api/upload',
  autoUpload: true,
  fields: {},
}
const emit = (event, payload) => {
  if (event === 'update:modelValue') file.value = payload
}

const { progress, hasError, uploadFile, clear } = useChunkUpload(props, emit)
</script>

Manual upload (autoUpload=false)

<template>
  <ChunkUploader
    ref="uploader"
    v-model="file"
    url="/api/document/chunk/upload"
    :auto-upload="false"
  />
  <button @click="submit">Upload</button>
</template>

<script setup>
import { ref } from 'vue'

const file = ref(null)
const uploader = ref(null)

async function submit() {
  // Extra fields are sent only with the last chunk
  await uploader.value.uploadFile({ document_id: 123 })
}
</script>

Core only (no UI)

import { chunk, setDefaultHttpClient } from 'vue-chunk-uploader'
import axios from 'axios'

setDefaultHttpClient(axios.create({ baseURL: '/api' }))

await chunk(
  '/document/chunk/upload',
  file,
  { document_id: 1 },
  (percent) => console.log(percent),
  (err) => console.error(err),
  (res) => console.log(res),
  { chunkSize: 1024 * 1024 },
)

Props

UI-specific attrs are forwarded as well (e.g. q-file, v-file-input, el-upload, a-upload, n-upload, or native input[type=file] attrs).

Events

Exposed methods

License

MIT