Hi Everyone!
Another bric of mine is finished, hope you enjoy it. 
File Drag and Drop
A file upload zone for your forms. Drop files in, see exactly what you’re sending, and never let a broken upload through.
- Drop — drag, click or browse — all three work
- Preview — images, PDF, audio, video and ZIP
- Limits — per file, total size and file count
- Labels — every message is yours to rewrite
A file upload zone for forms — drop your files in and see what you’re sending. With size and format checks built in.
Instead of the old “Choose file” button, this is a proper, modern upload surface. Visitors drag files in, or click and browse for them. They then see the list with thumbnails and file sizes, and can remove anything before submitting. If a file is too large or the wrong format, they’re told immediately — not after they’ve hit send.
What the visitor sees
- The drop zone — an icon, a title, a subtitle and a “Browse” button. Visitors can drag files onto it, click the zone, or click the button; all three work.
- The summary bar — the file count in a coloured pill, with a label and the combined size next to it. Clicking it expands the list.
- The file list — one row per file with a thumbnail (a real preview for images, the file extension for everything else), the filename, its size, a status and a remove button. Rows animate in and the list scrolls.
- A status on every file — “Ready”, “Too large”, “Wrong format”, or both at once. Each with its own colour.
- Clear all button at the bottom of the list.
Full-screen preview
You can enable click-to-zoom on the thumbnails, which opens the file full screen. This isn’t limited to images:
- Images — shown large; clicking the backdrop closes it.
- PDF — in an embedded reader, scrollable.
- Audio — with a built-in player.
- Video — with a built-in player.
- ZIP — a clean card showing the filename (the contents obviously can’t be displayed).
Inside the zoomed view, arrows or the left and right keyboard keys move between files, a counter at the bottom shows your position, and Esc closes it. The amount of background blur is adjustable.
The checks — what won’t get through
- Maximum size per file — set in megabytes.
- Maximum combined size — a separate limit, so you don’t run into your server’s or your mail provider’s ceiling.
- Maximum file count — once reached, no more files are accepted and a message explains why.
- Format check — based on the allowed types you specify. It understands file extensions (
.pdf), exact types, and wildcard groups such as “any image”. - Duplicates — either silently skipped when a file with the same name and size is already in the list, or allowed with a warning. Your choice.
The important part: if the list contains an oversized file, or the combined size exceeds the limit, the form cannot be submitted. The upload zone stops the submission, opens the file list and explains the problem. Invalid files never make it into the actual upload anyway — only the good ones are sent.
What you configure in the editor
Appearance
- Accent colour, plus the button’s background and text colours.
- Zone background, border colour and border style (solid or dashed).
- Corner rounding from 0 to 30 — the inner elements (list, summary bar, thumbnails) scale their rounding to match.
- Title text and colour, subtitle text and colour (can be hidden), and the button label.
- Icon on/off, your own SVG icon, plus icon colour and background. Colouring is handled automatically: it detects whether the icon is outlined or filled, and leaves multi-coloured icons untouched.
- File size and total size display can each be toggled separately.
Every label is editable — and each has its own colour
Nothing is hard-coded. You supply all of these:
Ready · Too large · Wrong format · Files selected · Clear all · Duplicate skipped · File limit reached · Submit blocked (oversized file) · Submit blocked (total too large) · Remove button colour
Worth knowing
- Behind the scenes this is an entirely ordinary file input, just hidden from view. Your form keeps working exactly as before — nothing needs changing on the processing side.
- If the form is reset, the file list clears with it.
- You can have several upload zones on one page, each bound to its own field.
- Right-click, text selection and dragging files out are all disabled inside the upload area, so visitors can’t simply lift the previewed content out of it.