vue-chunk-uploader 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 akbarjoody
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,200 @@
+# vue-chunk-uploader
+
+A Vue 3 chunked file uploader compatible with the [resumable.js](https://github.com/23/resumable.js) protocol.
+
+The upload core is UI-agnostic — you choose which adapter to use.
+
+## Choose a UI
+
+| Import | UI | Required dependency |
+|--------|----|---------------------|
+| `vue-chunk-uploader/quasar` | Quasar | `quasar` |
+| `vue-chunk-uploader/vuetify` | Vuetify 3 | `vuetify` |
+| `vue-chunk-uploader/native` | Plain HTML | — |
+| `vue-chunk-uploader` | Core only (no UI) | — |
+
+> **Note about MUI:** Material UI is for React. In the Vue ecosystem, the closest equivalent is **Vuetify**. For other UIs (Element Plus, Naive UI, MUI/React, etc.), use `native` or the `useChunkUpload` composable and build your own UI.
+
+## Install
+
+```bash
+npm install vue-chunk-uploader axios vue
+```
+
+Depending on the UI:
+
+```bash
+# Quasar
+npm install quasar
+
+# or Vuetify
+npm install vuetify
+```
+
+## Usage — Quasar
+
+```js
+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')
+```
+
+```vue
+<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
+
+```js
+import VueChunkUploader from 'vue-chunk-uploader/vuetify'
+
+app.use(VueChunkUploader, { httpClient: api })
+```
+
+```vue
+<template>
+  <ChunkUploader
+    v-model="file"
+    url="/api/document/chunk/upload"
+    label="File"
+    variant="outlined"
+    @onSuccess="onSuccess"
+  />
+</template>
+```
+
+## Usage — Native (no UI framework)
+
+```js
+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:
+
+```vue
+<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`)
+
+```vue
+<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)
+
+```js
+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
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` / `v-model` | `File` | `null` | Selected file |
+| `url` | `string` | — | Upload endpoint |
+| `autoUpload` | `boolean` | `true` | Upload automatically after selection |
+| `fields` | `object` | `{}` | Extra fields (sent with the last chunk) |
+| `httpClient` | `AxiosInstance` | default / axios | HTTP client |
+| `chunkSize` | `number` | `1MB` | Chunk size |
+| `maxRequestsPerMinute` | `number` | `80` | Client-side rate limit |
+| `rateLimitWindowMs` | `number` | `60000` | Rate-limit window |
+
+UI-specific attrs are forwarded as well (e.g. `q-file` or `v-file-input` props).
+
+## Events
+
+| Event | Payload |
+|-------|---------|
+| `update:modelValue` | `File \| null` |
+| `onSelectFile` | uploader module |
+| `onProgress` | `percent: number` |
+| `onError` | `error` |
+| `onSuccess` | `response` |
+
+## Exposed methods
+
+| Method | Description |
+|--------|-------------|
+| `uploadFile(extraFormData?)` | Starts the upload; returns a Promise |
+
+## License
+
+MIT

package/dist/createPlugin-DZ7dugEN.js

@@ -0,0 +1,183 @@
+import { ref as z, watch as F, unref as d } from "vue";
+import L from "axios";
+let y = null;
+function M(t) {
+  y = t;
+}
+function _(t) {
+  return t || y || L;
+}
+const R = 1024 * 1024, W = 80, g = 6e4, p = [], q = (t) => new Promise((e) => setTimeout(e, t)), U = async (t, e) => {
+  const n = Date.now();
+  for (; p.length && n - p[0] > e; )
+    p.shift();
+  if (p.length >= t) {
+    const a = p[0], r = e - (n - a) + 5;
+    return await q(r), U(t, e);
+  }
+  p.push(Date.now());
+}, E = async (t, e, n, a) => {
+  const {
+    chunkSize: r,
+    chunkNumber: i,
+    blockCount: l,
+    identifier: o,
+    httpClient: m,
+    maxRequestsPerMinute: h,
+    rateLimitWindowMs: b,
+    onProgress: f,
+    onSuccess: k,
+    onError: u
+  } = a, C = i * r, S = Math.min(e.size, C + r);
+  let w = r;
+  i + 1 === l && (w = e.size - C);
+  const s = new FormData();
+  if (s.append("resumableChunkNumber", i + 1), s.append("resumableChunkSize", w), s.append("resumableCurrentChunkSize", w), s.append("resumableTotalSize", e.size), s.append("resumableType", e.type), s.append("resumableIdentifier", o), s.append("resumableFilename", e.name), s.append("resumableRelativePath", e.name), s.append("resumableTotalChunks", l), s.append("file", e.slice(C, S), e.name), Object.keys(n).length > 0 && i + 1 === l)
+    for (const [c, T] of Object.entries(n))
+      c !== "file" && s.append(c, T);
+  await U(h, b);
+  const N = _(m);
+  try {
+    const c = await N.post(t, s, {
+      headers: {
+        Accept: "application/json"
+      }
+    });
+    return f == null || f(parseInt(S / e.size * 100, 10), c), S === e.size ? (k == null || k(c), c) : E(t, e, n, {
+      ...a,
+      chunkNumber: i + 1
+    });
+  } catch (c) {
+    throw u == null || u(c), c;
+  }
+};
+function P(t, e, n = {}, a, r, i, l = {}) {
+  const o = l.chunkSize ?? R, m = Math.ceil(e.size / o) || 1, h = `${e.size}-${String(e.name).replace(/\./g, "")}`;
+  return E(t, e, n, {
+    blockCount: m,
+    identifier: h,
+    chunkNumber: 0,
+    chunkSize: o,
+    httpClient: l.httpClient,
+    maxRequestsPerMinute: l.maxRequestsPerMinute ?? W,
+    rateLimitWindowMs: l.rateLimitWindowMs ?? g,
+    onProgress: a,
+    onError: r,
+    onSuccess: i
+  });
+}
+const v = {
+  chunk: P,
+  setDefaultHttpClient: M
+}, I = {
+  modelValue: {
+    type: [Object, File, Blob],
+    default: null
+  },
+  autoUpload: {
+    type: Boolean,
+    default: !0
+  },
+  url: {
+    type: String,
+    required: !0
+  },
+  fields: {
+    type: Object,
+    default: () => ({})
+  },
+  httpClient: {
+    type: Object,
+    default: null
+  },
+  chunkSize: {
+    type: Number,
+    default: void 0
+  },
+  maxRequestsPerMinute: {
+    type: Number,
+    default: void 0
+  },
+  rateLimitWindowMs: {
+    type: Number,
+    default: void 0
+  }
+}, j = [
+  "update:modelValue",
+  "onSelectFile",
+  "onSendFile",
+  "onProgress",
+  "onError",
+  "onSuccess"
+];
+function A(t, e) {
+  const n = z(!1), a = z(0), r = () => {
+    n.value = !1, a.value = 0;
+  }, i = async (o = {}) => {
+    const m = d(t.modelValue);
+    if (!m)
+      throw new Error("No file selected");
+    const h = {
+      ...d(t.fields),
+      ...o
+    }, b = {
+      httpClient: d(t.httpClient) || void 0,
+      chunkSize: d(t.chunkSize),
+      maxRequestsPerMinute: d(t.maxRequestsPerMinute),
+      rateLimitWindowMs: d(t.rateLimitWindowMs)
+    };
+    return new Promise((f, k) => {
+      P(
+        d(t.url),
+        m,
+        h,
+        (u) => {
+          a.value = u, e("onProgress", u);
+        },
+        (u) => {
+          n.value = !0, e("onError", u), k(u);
+        },
+        (u) => {
+          e("onSuccess", u), f(u);
+        },
+        b
+      );
+    });
+  }, l = () => {
+    r(), e("update:modelValue", null);
+  };
+  return F(
+    () => d(t.modelValue),
+    async (o, m) => {
+      if (o !== m && (r(), e("onSelectFile", v), d(t.autoUpload) && o))
+        try {
+          await i();
+        } catch {
+        }
+    }
+  ), {
+    hasError: n,
+    progress: a,
+    resetState: r,
+    uploadFile: i,
+    clear: l
+  };
+}
+function O(t) {
+  return {
+    install(e, n = {}) {
+      n.httpClient && M(n.httpClient);
+      const a = n.componentName || "ChunkUploader";
+      e.component(a, t);
+    }
+  };
+}
+export {
+  P as a,
+  v as b,
+  O as c,
+  j as d,
+  I as e,
+  M as s,
+  A as u
+};

package/dist/createPlugin-DoOjwZfd.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("vue"),F=require("axios");let w=null;function y(t){w=t}function L(t){return t||w||F}const _=1024*1024,R=80,q=6e4,h=[],g=t=>new Promise(e=>setTimeout(e,t)),M=async(t,e)=>{const n=Date.now();for(;h.length&&n-h[0]>e;)h.shift();if(h.length>=t){const u=h[0],i=e-(n-u)+5;return await g(i),M(t,e)}h.push(Date.now())},P=async(t,e,n,u)=>{const{chunkSize:i,chunkNumber:l,blockCount:o,identifier:c,httpClient:p,maxRequestsPerMinute:m,rateLimitWindowMs:C,onProgress:f,onSuccess:k,onError:a}=u,b=l*i,S=Math.min(e.size,b+i);let U=i;l+1===o&&(U=e.size-b);const r=new FormData;if(r.append("resumableChunkNumber",l+1),r.append("resumableChunkSize",U),r.append("resumableCurrentChunkSize",U),r.append("resumableTotalSize",e.size),r.append("resumableType",e.type),r.append("resumableIdentifier",c),r.append("resumableFilename",e.name),r.append("resumableRelativePath",e.name),r.append("resumableTotalChunks",o),r.append("file",e.slice(b,S),e.name),Object.keys(n).length>0&&l+1===o)for(const[d,T]of Object.entries(n))d!=="file"&&r.append(d,T);await M(m,C);const N=L(p);try{const d=await N.post(t,r,{headers:{Accept:"application/json"}});return f==null||f(parseInt(S/e.size*100,10),d),S===e.size?(k==null||k(d),d):P(t,e,n,{...u,chunkNumber:l+1})}catch(d){throw a==null||a(d),d}};function z(t,e,n={},u,i,l,o={}){const c=o.chunkSize??_,p=Math.ceil(e.size/c)||1,m=`${e.size}-${String(e.name).replace(/\./g,"")}`;return P(t,e,n,{blockCount:p,identifier:m,chunkNumber:0,chunkSize:c,httpClient:o.httpClient,maxRequestsPerMinute:o.maxRequestsPerMinute??R,rateLimitWindowMs:o.rateLimitWindowMs??q,onProgress:u,onError:i,onSuccess:l})}const E={chunk:z,setDefaultHttpClient:y},v={modelValue:{type:[Object,File,Blob],default:null},autoUpload:{type:Boolean,default:!0},url:{type:String,required:!0},fields:{type:Object,default:()=>({})},httpClient:{type:Object,default:null},chunkSize:{type:Number,default:void 0},maxRequestsPerMinute:{type:Number,default:void 0},rateLimitWindowMs:{type:Number,default:void 0}},D=["update:modelValue","onSelectFile","onSendFile","onProgress","onError","onSuccess"];function W(t,e){const n=s.ref(!1),u=s.ref(0),i=()=>{n.value=!1,u.value=0},l=async(c={})=>{const p=s.unref(t.modelValue);if(!p)throw new Error("No file selected");const m={...s.unref(t.fields),...c},C={httpClient:s.unref(t.httpClient)||void 0,chunkSize:s.unref(t.chunkSize),maxRequestsPerMinute:s.unref(t.maxRequestsPerMinute),rateLimitWindowMs:s.unref(t.rateLimitWindowMs)};return new Promise((f,k)=>{z(s.unref(t.url),p,m,a=>{u.value=a,e("onProgress",a)},a=>{n.value=!0,e("onError",a),k(a)},a=>{e("onSuccess",a),f(a)},C)})},o=()=>{i(),e("update:modelValue",null)};return s.watch(()=>s.unref(t.modelValue),async(c,p)=>{if(c!==p&&(i(),e("onSelectFile",E),s.unref(t.autoUpload)&&c))try{await l()}catch{}}),{hasError:n,progress:u,resetState:i,uploadFile:l,clear:o}}function I(t){return{install(e,n={}){n.httpClient&&y(n.httpClient);const u=n.componentName||"ChunkUploader";e.component(u,t)}}}exports.chunk=z;exports.chunkUploader=E;exports.chunkUploaderEmits=D;exports.chunkUploaderProps=v;exports.createChunkUploaderPlugin=I;exports.setDefaultHttpClient=y;exports.useChunkUpload=W;

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./createPlugin-DoOjwZfd.cjs"),u={chunk:e.chunk,setDefaultHttpClient:e.setDefaultHttpClient,useChunkUpload:e.useChunkUpload,createChunkUploaderPlugin:e.createChunkUploaderPlugin};exports.chunk=e.chunk;exports.chunkUploader=e.chunkUploader;exports.chunkUploaderEmits=e.chunkUploaderEmits;exports.chunkUploaderProps=e.chunkUploaderProps;exports.createChunkUploaderPlugin=e.createChunkUploaderPlugin;exports.setDefaultHttpClient=e.setDefaultHttpClient;exports.useChunkUpload=e.useChunkUpload;exports.default=u;

package/dist/index.js

@@ -0,0 +1,18 @@
+import { c as a, u as e, s, a as o } from "./createPlugin-DZ7dugEN.js";
+import { b as p, d as l, e as d } from "./createPlugin-DZ7dugEN.js";
+const r = {
+  chunk: o,
+  setDefaultHttpClient: s,
+  useChunkUpload: e,
+  createChunkUploaderPlugin: a
+};
+export {
+  o as chunk,
+  p as chunkUploader,
+  l as chunkUploaderEmits,
+  d as chunkUploaderProps,
+  a as createChunkUploaderPlugin,
+  r as default,
+  s as setDefaultHttpClient,
+  e as useChunkUpload
+};

package/dist/native.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./createPlugin-DoOjwZfd.cjs"),g=(o,l)=>{const a=o.__vccOpts||o;for(const[c,r]of l)a[c]=r;return a},C={class:"vue-chunk-uploader-native","data-ui":"native"},U={class:"vue-chunk-uploader-native__row"},V=["data-error","data-done"],y=["value"],B=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:t.chunkUploaderProps,emits:t.chunkUploaderEmits,setup(o,{expose:l,emit:a}){const c=o,r=a,s=e.ref(null),{hasError:h,progress:n,uploadFile:_,clear:f}=t.useChunkUpload(c,r),m=u=>{var p;const d=((p=u.target.files)==null?void 0:p[0])??null;r("update:modelValue",d)},v=()=>{s.value&&(s.value.value=""),f()};return l({uploadFile:_}),(u,d)=>(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",U,[e.createElementVNode("input",e.mergeProps({ref_key:"inputRef",ref:s,type:"file"},u.$attrs,{onChange:m}),null,16),u.modelValue?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vue-chunk-uploader-native__clear",onClick:v}," × ")):e.createCommentVNode("",!0),e.createElementVNode("span",{class:"vue-chunk-uploader-native__badge","data-error":e.unref(h)||void 0,"data-done":e.unref(n)>=100||void 0},[e.unref(n)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(n))+"%",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode("✓")],64))],8,V)]),e.unref(n)>0&&e.unref(n)<100?(e.openBlock(),e.createElementBlock("progress",{key:0,class:"vue-chunk-uploader-native__progress",value:e.unref(n),max:"100"},null,8,y)):e.createCommentVNode("",!0)]))}}),i=g(B,[["__scopeId","data-v-0be4ee9c"]]),k=t.createChunkUploaderPlugin(i);exports.chunk=t.chunk;exports.chunkUploader=t.chunkUploader;exports.setDefaultHttpClient=t.setDefaultHttpClient;exports.useChunkUpload=t.useChunkUpload;exports.ChunkUploader=i;exports.VueChunkUploader=k;exports.default=k;

package/dist/native.js

@@ -0,0 +1,66 @@
+import { ref as U, openBlock as a, createElementBlock as o, createElementVNode as p, mergeProps as b, createCommentVNode as h, unref as e, Fragment as k, createTextVNode as f, toDisplayString as V } from "vue";
+import { d as x, e as E, u as N, c as P } from "./createPlugin-DZ7dugEN.js";
+import { a as $, b as q, s as z } from "./createPlugin-DZ7dugEN.js";
+const B = (n, l) => {
+  const r = n.__vccOpts || n;
+  for (const [c, s] of l)
+    r[c] = s;
+  return r;
+}, D = {
+  class: "vue-chunk-uploader-native",
+  "data-ui": "native"
+}, F = { class: "vue-chunk-uploader-native__row" }, O = ["data-error", "data-done"], R = ["value"], j = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "ChunkUploader",
+  props: E,
+  emits: x,
+  setup(n, { expose: l, emit: r }) {
+    const c = n, s = r, d = U(null), { hasError: v, progress: t, uploadFile: m, clear: g } = N(c, s), C = (u) => {
+      var _;
+      const i = ((_ = u.target.files) == null ? void 0 : _[0]) ?? null;
+      s("update:modelValue", i);
+    }, y = () => {
+      d.value && (d.value.value = ""), g();
+    };
+    return l({ uploadFile: m }), (u, i) => (a(), o("div", D, [
+      p("div", F, [
+        p("input", b({
+          ref_key: "inputRef",
+          ref: d,
+          type: "file"
+        }, u.$attrs, { onChange: C }), null, 16),
+        u.modelValue ? (a(), o("button", {
+          key: 0,
+          type: "button",
+          class: "vue-chunk-uploader-native__clear",
+          onClick: y
+        }, " × ")) : h("", !0),
+        p("span", {
+          class: "vue-chunk-uploader-native__badge",
+          "data-error": e(v) || void 0,
+          "data-done": e(t) >= 100 || void 0
+        }, [
+          e(t) < 100 ? (a(), o(k, { key: 0 }, [
+            f(V(e(t)) + "%", 1)
+          ], 64)) : (a(), o(k, { key: 1 }, [
+            f("✓")
+          ], 64))
+        ], 8, O)
+      ]),
+      e(t) > 0 && e(t) < 100 ? (a(), o("progress", {
+        key: 0,
+        class: "vue-chunk-uploader-native__progress",
+        value: e(t),
+        max: "100"
+      }, null, 8, R)) : h("", !0)
+    ]));
+  }
+}), w = /* @__PURE__ */ B(j, [["__scopeId", "data-v-0be4ee9c"]]), I = P(w);
+export {
+  w as ChunkUploader,
+  I as VueChunkUploader,
+  $ as chunk,
+  q as chunkUploader,
+  I as default,
+  z as setDefaultHttpClient,
+  N as useChunkUpload
+};

package/dist/quasar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("./createPlugin-DoOjwZfd.cjs"),a=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:o.chunkUploaderProps,emits:o.chunkUploaderEmits,setup(p,{expose:i,emit:d}){const m=p,l=d,{hasError:u,progress:n,uploadFile:k,clear:C}=o.useChunkUpload(m,l);return i({uploadFile:k}),(s,t)=>{const h=e.resolveComponent("q-linear-progress"),r=e.resolveComponent("q-icon"),_=e.resolveComponent("q-btn"),f=e.resolveComponent("q-file");return e.openBlock(),e.createBlock(f,e.mergeProps(s.$attrs,{"model-value":s.modelValue,"onUpdate:modelValue":t[1]||(t[1]=v=>l("update:modelValue",v))}),{hint:e.withCtx(()=>[e.unref(n)>0&&e.unref(n)<100?(e.openBlock(),e.createBlock(h,{key:0,stripe:"",value:e.unref(n)/100,color:e.unref(u)?"negative":"positive",class:"q-mt-sm"},null,8,["value","color"])):e.createCommentVNode("",!0)]),prepend:e.withCtx(()=>[e.createVNode(r,{name:"cloud_upload",onClick:t[0]||(t[0]=e.withModifiers(()=>{},["stop"]))})]),append:e.withCtx(()=>[e.createVNode(_,{rounded:"",color:e.unref(u)?"negative":"positive"},{default:e.withCtx(()=>[e.unref(n)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(n))+" % ",1)],64)):(e.openBlock(),e.createBlock(r,{key:1,name:"done_all",color:"white",size:"24px"}))]),_:1},8,["color"]),e.createVNode(r,{name:"close",class:"cursor-pointer",onClick:e.unref(C)},null,8,["onClick"])]),_:1},16,["model-value"])}}}),c=o.createChunkUploaderPlugin(a);exports.chunk=o.chunk;exports.chunkUploader=o.chunkUploader;exports.setDefaultHttpClient=o.setDefaultHttpClient;exports.useChunkUpload=o.useChunkUpload;exports.ChunkUploader=a;exports.VueChunkUploader=c;exports.default=c;

package/dist/quasar.js

@@ -0,0 +1,68 @@
+import { resolveComponent as n, openBlock as r, createBlock as a, mergeProps as U, withCtx as l, createVNode as p, unref as e, createElementBlock as V, Fragment as x, createTextVNode as b, toDisplayString as y, withModifiers as w, createCommentVNode as B } from "vue";
+import { d as E, e as N, u as P, c as D } from "./createPlugin-DZ7dugEN.js";
+import { a as O, b as S, s as T } from "./createPlugin-DZ7dugEN.js";
+const F = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "ChunkUploader",
+  props: N,
+  emits: E,
+  setup(m, { expose: d, emit: k }) {
+    const _ = m, i = k, { hasError: c, progress: o, uploadFile: f, clear: h } = P(_, i);
+    return d({ uploadFile: f }), (u, t) => {
+      const C = n("q-linear-progress"), s = n("q-icon"), g = n("q-btn"), q = n("q-file");
+      return r(), a(q, U(u.$attrs, {
+        "model-value": u.modelValue,
+        "onUpdate:modelValue": t[1] || (t[1] = (v) => i("update:modelValue", v))
+      }), {
+        hint: l(() => [
+          e(o) > 0 && e(o) < 100 ? (r(), a(C, {
+            key: 0,
+            stripe: "",
+            value: e(o) / 100,
+            color: e(c) ? "negative" : "positive",
+            class: "q-mt-sm"
+          }, null, 8, ["value", "color"])) : B("", !0)
+        ]),
+        prepend: l(() => [
+          p(s, {
+            name: "cloud_upload",
+            onClick: t[0] || (t[0] = w(() => {
+            }, ["stop"]))
+          })
+        ]),
+        append: l(() => [
+          p(g, {
+            rounded: "",
+            color: e(c) ? "negative" : "positive"
+          }, {
+            default: l(() => [
+              e(o) < 100 ? (r(), V(x, { key: 0 }, [
+                b(y(e(o)) + " % ", 1)
+              ], 64)) : (r(), a(s, {
+                key: 1,
+                name: "done_all",
+                color: "white",
+                size: "24px"
+              }))
+            ]),
+            _: 1
+          }, 8, ["color"]),
+          p(s, {
+            name: "close",
+            class: "cursor-pointer",
+            onClick: e(h)
+          }, null, 8, ["onClick"])
+        ]),
+        _: 1
+      }, 16, ["model-value"]);
+    };
+  }
+}), A = D(F);
+export {
+  F as ChunkUploader,
+  A as VueChunkUploader,
+  O as chunk,
+  S as chunkUploader,
+  A as default,
+  T as setDefaultHttpClient,
+  P as useChunkUpload
+};

package/dist/vue-chunk-uploader.css

@@ -0,0 +1 @@
+.vue-chunk-uploader-native__row[data-v-0be4ee9c]{display:flex;align-items:center;gap:.5rem}.vue-chunk-uploader-native__badge[data-v-0be4ee9c]{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:.15rem .5rem;border-radius:999px;font-size:.85rem;background:#16a34a;color:#fff}.vue-chunk-uploader-native__badge[data-error][data-v-0be4ee9c]{background:#dc2626}.vue-chunk-uploader-native__clear[data-v-0be4ee9c]{border:0;background:transparent;cursor:pointer;font-size:1.25rem;line-height:1}.vue-chunk-uploader-native__progress[data-v-0be4ee9c]{display:block;width:100%;margin-top:.5rem;height:.5rem}

package/dist/vuetify.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("./createPlugin-DoOjwZfd.cjs"),U={class:"vue-chunk-uploader-vuetify"},u=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:o.chunkUploaderProps,emits:o.chunkUploaderEmits,setup(s,{expose:p,emit:i}){const d=s,t=i,{hasError:l,progress:r,uploadFile:m,clear:k}=o.useChunkUpload(d,t),h=n=>{const c=Array.isArray(n)?n[0]??null:n;t("update:modelValue",c)};return p({uploadFile:m}),(n,c)=>{const _=e.resolveComponent("v-icon"),f=e.resolveComponent("v-chip"),v=e.resolveComponent("v-file-input"),C=e.resolveComponent("v-progress-linear");return e.openBlock(),e.createElementBlock("div",U,[e.createVNode(v,e.mergeProps(n.$attrs,{"model-value":n.modelValue,error:e.unref(l)||void 0,clearable:"","prepend-icon":"mdi-cloud-upload","onUpdate:modelValue":h,"onClick:clear":e.unref(k)}),{append:e.withCtx(()=>[e.createVNode(f,{color:e.unref(l)?"error":e.unref(r)>=100?"success":"primary",size:"small",label:""},{default:e.withCtx(()=>[e.unref(r)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(r))+"%",1)],64)):(e.openBlock(),e.createBlock(_,{key:1,icon:"mdi-check-all",size:"small"}))]),_:1},8,["color"])]),_:1},16,["model-value","error","onClick:clear"]),e.unref(r)>0&&e.unref(r)<100?(e.openBlock(),e.createBlock(C,{key:0,class:"mt-1","model-value":e.unref(r),color:e.unref(l)?"error":"success",height:"6",rounded:"",striped:""},null,8,["model-value","color"])):e.createCommentVNode("",!0)])}}}),a=o.createChunkUploaderPlugin(u);exports.chunk=o.chunk;exports.chunkUploader=o.chunkUploader;exports.setDefaultHttpClient=o.setDefaultHttpClient;exports.useChunkUpload=o.useChunkUpload;exports.ChunkUploader=u;exports.VueChunkUploader=a;exports.default=a;

package/dist/vuetify.js

@@ -0,0 +1,65 @@
+import { resolveComponent as l, openBlock as n, createElementBlock as c, createVNode as p, mergeProps as V, unref as e, withCtx as i, Fragment as b, createTextVNode as x, toDisplayString as A, createBlock as u, createCommentVNode as B } from "vue";
+import { d as E, e as F, u as N, c as P } from "./createPlugin-DZ7dugEN.js";
+import { a as T, b as $, s as q } from "./createPlugin-DZ7dugEN.js";
+const z = { class: "vue-chunk-uploader-vuetify" }, D = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "ChunkUploader",
+  props: F,
+  emits: E,
+  setup(d, { expose: m, emit: _ }) {
+    const h = d, a = _, { hasError: t, progress: o, uploadFile: k, clear: f } = N(h, a), v = (r) => {
+      const s = Array.isArray(r) ? r[0] ?? null : r;
+      a("update:modelValue", s);
+    };
+    return m({ uploadFile: k }), (r, s) => {
+      const C = l("v-icon"), U = l("v-chip"), g = l("v-file-input"), y = l("v-progress-linear");
+      return n(), c("div", z, [
+        p(g, V(r.$attrs, {
+          "model-value": r.modelValue,
+          error: e(t) || void 0,
+          clearable: "",
+          "prepend-icon": "mdi-cloud-upload",
+          "onUpdate:modelValue": v,
+          "onClick:clear": e(f)
+        }), {
+          append: i(() => [
+            p(U, {
+              color: e(t) ? "error" : e(o) >= 100 ? "success" : "primary",
+              size: "small",
+              label: ""
+            }, {
+              default: i(() => [
+                e(o) < 100 ? (n(), c(b, { key: 0 }, [
+                  x(A(e(o)) + "%", 1)
+                ], 64)) : (n(), u(C, {
+                  key: 1,
+                  icon: "mdi-check-all",
+                  size: "small"
+                }))
+              ]),
+              _: 1
+            }, 8, ["color"])
+          ]),
+          _: 1
+        }, 16, ["model-value", "error", "onClick:clear"]),
+        e(o) > 0 && e(o) < 100 ? (n(), u(y, {
+          key: 0,
+          class: "mt-1",
+          "model-value": e(o),
+          color: e(t) ? "error" : "success",
+          height: "6",
+          rounded: "",
+          striped: ""
+        }, null, 8, ["model-value", "color"])) : B("", !0)
+      ]);
+    };
+  }
+}), H = P(D);
+export {
+  D as ChunkUploader,
+  H as VueChunkUploader,
+  T as chunk,
+  $ as chunkUploader,
+  H as default,
+  q as setDefaultHttpClient,
+  N as useChunkUpload
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "vue-chunk-uploader",
+  "version": "1.1.0",
+  "description": "Vue 3 chunked/resumable file uploader with selectable UI adapters (Quasar, Vuetify, native)",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./quasar": {
+      "import": "./dist/quasar.js",
+      "require": "./dist/quasar.cjs"
+    },
+    "./vuetify": {
+      "import": "./dist/vuetify.js",
+      "require": "./dist/vuetify.cjs"
+    },
+    "./native": {
+      "import": "./dist/native.js",
+      "require": "./dist/native.cjs"
+    },
+    "./style.css": "./dist/vue-chunk-uploader.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.vue"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "quasar",
+    "vuetify",
+    "uploader",
+    "chunk",
+    "resumable",
+    "file-upload",
+    "chunked-upload"
+  ],
+  "author": "akbarjoody",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/akbarjoody/vue-chunk-uploader.git"
+  },
+  "bugs": {
+    "url": "https://github.com/akbarjoody/vue-chunk-uploader/issues"
+  },
+  "homepage": "https://github.com/akbarjoody/vue-chunk-uploader#readme",
+  "peerDependencies": {
+    "axios": "^1.0.0",
+    "quasar": "^2.0.0",
+    "vue": "^3.2.0",
+    "vuetify": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "quasar": {
+      "optional": true
+    },
+    "vuetify": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "axios": "^1.9.0",
+    "quasar": "^2.18.5",
+    "vite": "^6.2.0",
+    "vue": "^3.5.13",
+    "vuetify": "^3.7.0"
+  }
+}

package/src/core/chunkUploader.js

@@ -0,0 +1,151 @@
+import axios from 'axios'
+
+/** @type {import('axios').AxiosInstance | null} */
+let defaultHttpClient = null
+
+/**
+ * Set a default HTTP client used when none is passed to `chunk()`.
+ * @param {import('axios').AxiosInstance} client
+ */
+export function setDefaultHttpClient(client) {
+  defaultHttpClient = client
+}
+
+/**
+ * @returns {import('axios').AxiosInstance}
+ */
+function resolveHttpClient(httpClient) {
+  if (httpClient) return httpClient
+  if (defaultHttpClient) return defaultHttpClient
+  return axios
+}
+
+export const DEFAULT_CHUNK_SIZE = 1024 * 1024
+export const DEFAULT_MAX_REQUESTS_PER_MINUTE = 80
+export const DEFAULT_RATE_LIMIT_WINDOW_MS = 60_000
+
+const requestTimestamps = []
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const waitForRateLimit = async (maxRequests, windowMs) => {
+  const now = Date.now()
+
+  while (requestTimestamps.length && now - requestTimestamps[0] > windowMs) {
+    requestTimestamps.shift()
+  }
+
+  if (requestTimestamps.length >= maxRequests) {
+    const earliest = requestTimestamps[0]
+    const waitMs = windowMs - (now - earliest) + 5
+    await sleep(waitMs)
+    return waitForRateLimit(maxRequests, windowMs)
+  }
+
+  requestTimestamps.push(Date.now())
+}
+
+const uploadChunk = async (endpoint, file, formData, options) => {
+  const {
+    chunkSize,
+    chunkNumber,
+    blockCount,
+    identifier,
+    httpClient,
+    maxRequestsPerMinute,
+    rateLimitWindowMs,
+    onProgress,
+    onSuccess,
+    onError,
+  } = options
+
+  const start = chunkNumber * chunkSize
+  const end = Math.min(file.size, start + chunkSize)
+
+  let currentChunkSize = chunkSize
+  if (chunkNumber + 1 === blockCount) {
+    currentChunkSize = file.size - start
+  }
+
+  const params = new FormData()
+  params.append('resumableChunkNumber', chunkNumber + 1)
+  params.append('resumableChunkSize', currentChunkSize)
+  params.append('resumableCurrentChunkSize', currentChunkSize)
+  params.append('resumableTotalSize', file.size)
+  params.append('resumableType', file.type)
+  params.append('resumableIdentifier', identifier)
+  params.append('resumableFilename', file.name)
+  params.append('resumableRelativePath', file.name)
+  params.append('resumableTotalChunks', blockCount)
+  params.append('file', file.slice(start, end), file.name)
+
+  if (Object.keys(formData).length > 0 && chunkNumber + 1 === blockCount) {
+    for (const [key, value] of Object.entries(formData)) {
+      if (key !== 'file') {
+        params.append(key, value)
+      }
+    }
+  }
+
+  await waitForRateLimit(maxRequestsPerMinute, rateLimitWindowMs)
+
+  const client = resolveHttpClient(httpClient)
+
+  try {
+    const res = await client.post(endpoint, params, {
+      headers: {
+        Accept: 'application/json',
+      },
+    })
+
+    onProgress?.(parseInt((end / file.size) * 100, 10), res)
+
+    if (end === file.size) {
+      onSuccess?.(res)
+      return res
+    }
+
+    return uploadChunk(endpoint, file, formData, {
+      ...options,
+      chunkNumber: chunkNumber + 1,
+    })
+  } catch (err) {
+    onError?.(err)
+    throw err
+  }
+}
+
+/**
+ * Start a chunked upload.
+ */
+export function chunk(
+  endpoint,
+  file,
+  formData = {},
+  onProgress,
+  onError,
+  onSuccess,
+  config = {},
+) {
+  const chunkSize = config.chunkSize ?? DEFAULT_CHUNK_SIZE
+  const blockCount = Math.ceil(file.size / chunkSize) || 1
+  const identifier = `${file.size}-${String(file.name).replace(/\./g, '')}`
+
+  return uploadChunk(endpoint, file, formData, {
+    blockCount,
+    identifier,
+    chunkNumber: 0,
+    chunkSize,
+    httpClient: config.httpClient,
+    maxRequestsPerMinute: config.maxRequestsPerMinute ?? DEFAULT_MAX_REQUESTS_PER_MINUTE,
+    rateLimitWindowMs: config.rateLimitWindowMs ?? DEFAULT_RATE_LIMIT_WINDOW_MS,
+    onProgress,
+    onError,
+    onSuccess,
+  })
+}
+
+export default {
+  chunk,
+  setDefaultHttpClient,
+}

package/src/core/createPlugin.js

@@ -0,0 +1,18 @@
+import { setDefaultHttpClient } from './chunkUploader.js'
+
+/**
+ * Create a Vue plugin that registers a UI-specific ChunkUploader component.
+ * @param {import('vue').Component} Component
+ */
+export function createChunkUploaderPlugin(Component) {
+  return {
+    install(app, options = {}) {
+      if (options.httpClient) {
+        setDefaultHttpClient(options.httpClient)
+      }
+
+      const name = options.componentName || 'ChunkUploader'
+      app.component(name, Component)
+    },
+  }
+}

package/src/core/useChunkUpload.js

@@ -0,0 +1,133 @@
+import { ref, unref, watch } from 'vue'
+import chunkUploader, { chunk } from './chunkUploader.js'
+
+export const chunkUploaderProps = {
+  modelValue: {
+    type: [Object, File, Blob],
+    default: null,
+  },
+  autoUpload: {
+    type: Boolean,
+    default: true,
+  },
+  url: {
+    type: String,
+    required: true,
+  },
+  fields: {
+    type: Object,
+    default: () => ({}),
+  },
+  httpClient: {
+    type: Object,
+    default: null,
+  },
+  chunkSize: {
+    type: Number,
+    default: undefined,
+  },
+  maxRequestsPerMinute: {
+    type: Number,
+    default: undefined,
+  },
+  rateLimitWindowMs: {
+    type: Number,
+    default: undefined,
+  },
+}
+
+export const chunkUploaderEmits = [
+  'update:modelValue',
+  'onSelectFile',
+  'onSendFile',
+  'onProgress',
+  'onError',
+  'onSuccess',
+]
+
+/**
+ * Shared upload state/logic for all UI adapters.
+ * @param {Record<string, any>} props
+ * @param {(event: string, ...args: any[]) => void} emit
+ */
+export function useChunkUpload(props, emit) {
+  const hasError = ref(false)
+  const progress = ref(0)
+
+  const resetState = () => {
+    hasError.value = false
+    progress.value = 0
+  }
+
+  const uploadFile = async (extraFormData = {}) => {
+    const file = unref(props.modelValue)
+    if (!file) {
+      throw new Error('No file selected')
+    }
+
+    const formData = {
+      ...unref(props.fields),
+      ...extraFormData,
+    }
+
+    const config = {
+      httpClient: unref(props.httpClient) || undefined,
+      chunkSize: unref(props.chunkSize),
+      maxRequestsPerMinute: unref(props.maxRequestsPerMinute),
+      rateLimitWindowMs: unref(props.rateLimitWindowMs),
+    }
+
+    return new Promise((resolve, reject) => {
+      chunk(
+        unref(props.url),
+        file,
+        formData,
+        (percent) => {
+          progress.value = percent
+          emit('onProgress', percent)
+        },
+        (err) => {
+          hasError.value = true
+          emit('onError', err)
+          reject(err)
+        },
+        (res) => {
+          emit('onSuccess', res)
+          resolve(res)
+        },
+        config,
+      )
+    })
+  }
+
+  const clear = () => {
+    resetState()
+    emit('update:modelValue', null)
+  }
+
+  watch(
+    () => unref(props.modelValue),
+    async (newVal, oldVal) => {
+      if (newVal === oldVal) return
+
+      resetState()
+      emit('onSelectFile', chunkUploader)
+
+      if (unref(props.autoUpload) && newVal) {
+        try {
+          await uploadFile()
+        } catch {
+          // error already emitted via onError
+        }
+      }
+    },
+  )
+
+  return {
+    hasError,
+    progress,
+    resetState,
+    uploadFile,
+    clear,
+  }
+}

package/src/index.js

@@ -0,0 +1,32 @@
+import chunkUploader, { chunk, setDefaultHttpClient } from './core/chunkUploader.js'
+import {
+  useChunkUpload,
+  chunkUploaderProps,
+  chunkUploaderEmits,
+} from './core/useChunkUpload.js'
+import { createChunkUploaderPlugin } from './core/createPlugin.js'
+
+/**
+ * Core package entry — no UI framework bundled.
+ *
+ * Choose a UI adapter explicitly:
+ *   import ... from 'vue-chunk-uploader/quasar'
+ *   import ... from 'vue-chunk-uploader/vuetify'
+ *   import ... from 'vue-chunk-uploader/native'
+ */
+export {
+  chunkUploader,
+  chunk,
+  setDefaultHttpClient,
+  useChunkUpload,
+  chunkUploaderProps,
+  chunkUploaderEmits,
+  createChunkUploaderPlugin,
+}
+
+export default {
+  chunk,
+  setDefaultHttpClient,
+  useChunkUpload,
+  createChunkUploaderPlugin,
+}

package/src/ui/native/ChunkUploader.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="vue-chunk-uploader-native" data-ui="native">
+    <div class="vue-chunk-uploader-native__row">
+      <input
+        ref="inputRef"
+        type="file"
+        v-bind="$attrs"
+        @change="onChange"
+      />
+      <button
+        v-if="modelValue"
+        type="button"
+        class="vue-chunk-uploader-native__clear"
+        @click="onClear"
+      >
+        ×
+      </button>
+      <span
+        class="vue-chunk-uploader-native__badge"
+        :data-error="hasError || undefined"
+        :data-done="progress >= 100 || undefined"
+      >
+        <template v-if="progress < 100">{{ progress }}%</template>
+        <template v-else>✓</template>
+      </span>
+    </div>
+
+    <progress
+      v-if="progress > 0 && progress < 100"
+      class="vue-chunk-uploader-native__progress"
+      :value="progress"
+      max="100"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  chunkUploaderProps,
+  chunkUploaderEmits,
+  useChunkUpload,
+} from '../../core/useChunkUpload.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps(chunkUploaderProps)
+const emit = defineEmits(chunkUploaderEmits)
+
+const inputRef = ref(null)
+const { hasError, progress, uploadFile, clear } = useChunkUpload(props, emit)
+
+const onChange = (event) => {
+  const file = event.target.files?.[0] ?? null
+  emit('update:modelValue', file)
+}
+
+const onClear = () => {
+  if (inputRef.value) {
+    inputRef.value.value = ''
+  }
+  clear()
+}
+
+defineExpose({ uploadFile })
+</script>
+
+<style scoped>
+.vue-chunk-uploader-native__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.vue-chunk-uploader-native__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  background: #16a34a;
+  color: #fff;
+}
+
+.vue-chunk-uploader-native__badge[data-error] {
+  background: #dc2626;
+}
+
+.vue-chunk-uploader-native__clear {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.vue-chunk-uploader-native__progress {
+  display: block;
+  width: 100%;
+  margin-top: 0.5rem;
+  height: 0.5rem;
+}
+</style>

package/src/ui/native/index.js

@@ -0,0 +1,17 @@
+import ChunkUploader from './ChunkUploader.vue'
+import { createChunkUploaderPlugin } from '../../core/createPlugin.js'
+import chunkUploader, { chunk, setDefaultHttpClient } from '../../core/chunkUploader.js'
+import { useChunkUpload } from '../../core/useChunkUpload.js'
+
+const VueChunkUploader = createChunkUploaderPlugin(ChunkUploader)
+
+export {
+  ChunkUploader,
+  VueChunkUploader,
+  chunkUploader,
+  chunk,
+  setDefaultHttpClient,
+  useChunkUpload,
+}
+
+export default VueChunkUploader

package/src/ui/quasar/ChunkUploader.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-file
+    v-bind="$attrs"
+    :model-value="modelValue"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <template #hint>
+      <q-linear-progress
+        v-if="progress > 0 && progress < 100"
+        stripe
+        :value="progress / 100"
+        :color="hasError ? 'negative' : 'positive'"
+        class="q-mt-sm"
+      />
+    </template>
+
+    <template #prepend>
+      <q-icon name="cloud_upload" @click.stop />
+    </template>
+
+    <template #append>
+      <q-btn rounded :color="hasError ? 'negative' : 'positive'">
+        <template v-if="progress < 100">
+          {{ progress }} %
+        </template>
+        <template v-else>
+          <q-icon name="done_all" color="white" size="24px" />
+        </template>
+      </q-btn>
+      <q-icon name="close" class="cursor-pointer" @click="clear" />
+    </template>
+  </q-file>
+</template>
+
+<script setup>
+import {
+  chunkUploaderProps,
+  chunkUploaderEmits,
+  useChunkUpload,
+} from '../../core/useChunkUpload.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps(chunkUploaderProps)
+const emit = defineEmits(chunkUploaderEmits)
+
+const { hasError, progress, uploadFile, clear } = useChunkUpload(props, emit)
+
+defineExpose({ uploadFile })
+</script>

package/src/ui/quasar/index.js

@@ -0,0 +1,17 @@
+import ChunkUploader from './ChunkUploader.vue'
+import { createChunkUploaderPlugin } from '../../core/createPlugin.js'
+import chunkUploader, { chunk, setDefaultHttpClient } from '../../core/chunkUploader.js'
+import { useChunkUpload } from '../../core/useChunkUpload.js'
+
+const VueChunkUploader = createChunkUploaderPlugin(ChunkUploader)
+
+export {
+  ChunkUploader,
+  VueChunkUploader,
+  chunkUploader,
+  chunk,
+  setDefaultHttpClient,
+  useChunkUpload,
+}
+
+export default VueChunkUploader

package/src/ui/vuetify/ChunkUploader.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="vue-chunk-uploader-vuetify">
+    <v-file-input
+      v-bind="$attrs"
+      :model-value="modelValue"
+      :error="hasError || undefined"
+      clearable
+      prepend-icon="mdi-cloud-upload"
+      @update:model-value="onFileUpdate"
+      @click:clear="clear"
+    >
+      <template #append>
+        <v-chip
+          :color="hasError ? 'error' : progress >= 100 ? 'success' : 'primary'"
+          size="small"
+          label
+        >
+          <template v-if="progress < 100">{{ progress }}%</template>
+          <v-icon v-else icon="mdi-check-all" size="small" />
+        </v-chip>
+      </template>
+    </v-file-input>
+
+    <v-progress-linear
+      v-if="progress > 0 && progress < 100"
+      class="mt-1"
+      :model-value="progress"
+      :color="hasError ? 'error' : 'success'"
+      height="6"
+      rounded
+      striped
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  chunkUploaderProps,
+  chunkUploaderEmits,
+  useChunkUpload,
+} from '../../core/useChunkUpload.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps(chunkUploaderProps)
+const emit = defineEmits(chunkUploaderEmits)
+
+const { hasError, progress, uploadFile, clear } = useChunkUpload(props, emit)
+
+const onFileUpdate = (value) => {
+  // Vuetify may give File | File[] | null
+  const file = Array.isArray(value) ? value[0] ?? null : value
+  emit('update:modelValue', file)
+}
+
+defineExpose({ uploadFile })
+</script>

package/src/ui/vuetify/index.js

@@ -0,0 +1,17 @@
+import ChunkUploader from './ChunkUploader.vue'
+import { createChunkUploaderPlugin } from '../../core/createPlugin.js'
+import chunkUploader, { chunk, setDefaultHttpClient } from '../../core/chunkUploader.js'
+import { useChunkUpload } from '../../core/useChunkUpload.js'
+
+const VueChunkUploader = createChunkUploaderPlugin(ChunkUploader)
+
+export {
+  ChunkUploader,
+  VueChunkUploader,
+  chunkUploader,
+  chunk,
+  setDefaultHttpClient,
+  useChunkUpload,
+}
+
+export default VueChunkUploader