Vue.js Integration

// Vue Component: FileUploader.vue
<template>
 <div ref="uploaderEl" class="mu-uploader">
 <button type="button" class="mu-select-btn">Select Files</button>
 <input type="file" class="mu-file-input" multiple style="display:none" />
 <div class="mu-dropzone">
 <div class="mu-dropzone-text">Drag &amp; drop files here</div>
 </div>
 <div class="mu-queue"></div>
 </div>
</template>

<script>
import MultipleUpload from 'multipleupload';

export default {
 name: 'FileUploader',
 props: {
 uploadUrl: { type: String, required: true }
 },
 data() {
 return { uploader: null };
 },
 mounted() {
 this.uploader = new MultipleUpload(this.$refs.uploaderEl, {
 uploadUrl: this.uploadUrl,
 onTaskComplete: (task) => {
 this.$emit('file-uploaded', task);
 }
 });
 },
 beforeUnmount() {
 if (this.uploader && this.uploader.destroy) {
 this.uploader.destroy();
 }
 }
};
</script>

// Usage in parent component
<template>
 <FileUploader
 upload-url="/api/upload"
 @file-uploaded="handleUpload"
 />
</template>

Where to construct it

onMounted is the hook, because the container has to exist in the DOM before the uploader can attach to it. A ref gives you that element, and the instance goes in a plain variable rather than a reactive one — Vue's reactivity has no reason to proxy an object it will never render.

Tear it down in onUnmounted

destroy() in onUnmounted is what stops an uploader outliving the component. It matters most with <KeepAlive> and with route changes, where the component goes away but the page does not reload to clean up after it.