Web Components

// Define the custom element
class MuFileUploader extends HTMLElement {
 constructor() {
 super();
 this.uploader = null;
 }

 connectedCallback() {
 this.innerHTML = `
 <div 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>
 `;

 this.uploader = new MultipleUpload(this.querySelector('.mu-uploader'), {
 uploadUrl: this.getAttribute('upload-url') || '/api/upload',
 maxFiles: parseInt(this.getAttribute('max-files')) || undefined,
 accept: this.getAttribute('accept') || undefined,
 onTaskComplete: (task) => {
 this.dispatchEvent(new CustomEvent('file-uploaded', {
 detail: task, bubbles: true
 }));
 }
 });
 }

 disconnectedCallback() {
 if (this.uploader && this.uploader.destroy) {
 this.uploader.destroy();
 }
 }

 static get observedAttributes() {
 return ['upload-url', 'max-files', 'accept'];
 }
}

customElements.define('mu-file-uploader', MuFileUploader);

// Usage in any HTML page or framework
<mu-file-uploader
 upload-url="/api/upload"
 max-files="5"
 accept="image/*"
></mu-file-uploader>

<script>
document.querySelector('mu-file-uploader')
 .addEventListener('file-uploaded', function(e) {
 console.log('Uploaded:', e.detail.name);
 });
</script>