Drag-and-Drop Upload Component

I need a self-contained drag-and-drop file upload box that can be dropped into an existing web page with minimal setup. The focus is the front-end UI/UX: clean styling, clear hover/active states, and smooth feedback while files are selected and transferred. I’m after modern vanilla JavaScript (or a lightweight framework, if you think it’s justified), well-structured SCSS/CSS, and semantic HTML so the component stays fast and accessible.

Core expectations
• Users can drag files over the area, see a visual highlight, and drop to trigger the upload flow.
• The component should gracefully handle clicks as well as drag-and-drop for full keyboard/mouse accessibility.
• Progress feedback during the actual upload, plus concise success or error messaging.
• Easily configurable accepted file types and max size limits—please expose these as clearly named variables or props so I can tweak them later without digging through code.
• No hard-wired back-end; I’ll supply an endpoint, so just hit a configurable URL with FormData and return any response for me to hook into.

Deliverables
1. HTML, CSS/SCSS, and JavaScript (or TypeScript) source files.
2. A brief README that explains installation, configurable options, and any external libraries used.
3. A demo page showing the component in action.

I’ll test in the latest Chrome, Firefox, Safari, and Edge, plus mobile Safari/Chrome. If anything is unclear, include a short note in your proposal about how you’d structure the upload logic or error handling.