Extractable notification panel - uploader events as inline toasts at any target

MultipleUpload.createInformer(target, { uploader }) mounts a stacked notification panel inside any DOM element. Subscribes to error / taskError / connectionChange (and optionally taskComplete / taskRetry) and renders each event as a colored, dismissable entry. Different from the global showToast() helper: it composes with your app's notification area, not the document body.

Notification panel mounted in a sidebar slot:

Notifications

Try it: queue a file and hit upload. The upload endpoint is deliberately wrong for this demo - the failure renders as a red entry in the notifications panel on the right (auto-dismisses after 6s). Disable your network in DevTools to see a blue "Connection lost" entry.

API

const inf = MultipleUpload.createInformer(target, {
 uploader: myUploader, // or array
 events: [ // default ['error', 'taskError', 'connectionChange']
 'error', // global uploader errors
 'taskError', // individual file failures
 'taskComplete', // success notifications
 'taskRetry', // each retry attempt
 'connectionChange' // online/offline transitions
 ],
 autoDismissMs: 5000, // 0 = persistent until destroyed
 max: 5 // stack depth - oldest evicted first
});

// Returns:
// { target, push(kind, message), destroy() }
//
// .push('error' | 'success' | 'info' | 'warning', 'message')
// -> render an entry from your own code (e.g. validation errors)
// .destroy()
// -> unsubscribe from events + clear the host element

Custom messages from your code

The push() method is exposed so your application can mix its own notifications into the same panel:

const inf = MultipleUpload.createInformer('#notifications', { uploader });

// Later, from your validation code:
if (!user.hasPermission('upload')) {
 inf.push('warning', 'Read-only mode - uploads are disabled.');
}

Event -> entry style mapping

Event	Visual kind	Default message
`error`	`error` (red rail)	The error message verbatim
`taskError`	`error`	`<filename>: <message>`
`taskComplete`	`success` (green)	`<filename> - Complete`
`taskRetry`	`info` (cyan)	`<filename>: retrying...`
`connectionChange`	`info`	`Connection restored` / `Connection lost - uploads paused`

Pair with StatusBar for a complete chrome

MultipleUpload.createStatusBar('#app-header', { uploader });
MultipleUpload.createInformer('#notifications', { uploader });

// Now the uploader's events surface in two places in YOUR app's layout - 
// progress in the header, notifications in the sidebar. Both composable,
// both destroy-able, both reactive.