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>