Pointer Glow Dropzone File Upload Block for React

The slug keeps the original name. The zone's ground is color-mix of the theme's muted and background colors, so in a light theme it is a soft inset and in a dark theme it is deep. Nothing is forced dark.

The zone sits in a wrapper with 1 px of padding in the border color. Behind the zone, a layer paints a radial gradient centred on --mx and --my, which the pointer-move handler sets in the wrapper's own pixels, and fades in on hover. A second layer fades in on focus and lights the whole edge. Both are hidden under reduced motion, and the gradient is also hidden on coarse pointers.

Catalog Attachment rows. Two files are typed to start: one marked added and one ready. Picked files join as ready. Each row names its file, shows the real size and a Remove button that says which file it removes; Clear tray answers "The tray is already empty." when there is nothing to clear.

No. The block keeps each file's name and size and nothing else, and says so in a polite status line from load. Files over 4 GB are refused with a message. Nothing is sent or saved.

The zone is a button: Tab to it, press Enter or Space to open the picker. Focus lights its edge. The tray is a scroll region you can focus, and each Remove button is reachable in order.

Start a transfer for each file in the accepted handler and change a row's state to uploading, processing or done as your service reports. The Attachment states exist for that; the block only uses done and idle.