File Attachments Contact Block for React

No. The files stay in the visitor's browser tab and the progress bars are simulated: every row advances a step every 120 milliseconds until it reaches 100 percent (instantly under reduced motion). To make it real, start your upload where a row is added (the accepted handler) and set that file's percentage from the request's progress events; the rest of the block already reads progress by file.

Edit ACCEPT, MAX_MB and MAX_FILES at the top of the file. ACCEPT maps a type to its extensions; REASONS turns the drop zone's reasons (wrong type, too large, too many) into the words on the error row. The limits are checked by the drop zone itself and again on your server, because a browser check is only a courtesy.

The good ones are added and the refused ones get an error row. The block listens to the drop zone's accept event, not its change event: after a mixed drop the change event reports the accepted list a second time, still empty, which would wipe the good files.

Yes. The drop zone is a button that opens the file chooser with Enter or Space, every row's remove button is reachable by Tab, and after a file is removed or an error is dismissed focus returns to the drop zone. What was added, removed or refused is read out by a polite status line.

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the name, email and message, and files the accepted files. The remove button's label names its file, and while a file is still filling the send is held with a message under the drop zone.

The columns stack in reading order: name, email, the drop zone, then the message, so attaching comes before typing. The file rows truncate long names instead of widening the card, and the button goes full width.