Svelte Integration

// FileUploader.svelte
<script>
 import { onMount, onDestroy, createEventDispatcher } from 'svelte';
 import MultipleUpload from 'multipleupload';

 export let uploadUrl = '/api/upload';

 let uploaderEl;
 let uploader;
 const dispatch = createEventDispatcher();

 onMount(() => {
 uploader = new MultipleUpload(uploaderEl, {
 uploadUrl: uploadUrl,
 onTaskComplete: (task) => {
 dispatch('uploaded', task);
 },
 onTaskError: (task, error) => {
 dispatch('error', { task, error });
 }
 });
 });

 onDestroy(() => {
 if (uploader && uploader.destroy) {
 uploader.destroy();
 }
 });
</script>

<div bind:this={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>

// Usage in App.svelte
<script>
 import FileUploader from './FileUploader.svelte';

 function handleUpload(event) {
 console.log('File uploaded:', event.detail.name);
 }
</script>

<FileUploader uploadUrl="/api/upload" on:uploaded={handleUpload} />