Mobile Responsive File Upload Block for React

On a phone that supports it, yes: capture="environment" asks the browser to open the rear camera for an image, as the platform allows. On a desktop it opens the ordinary picker limited to images. The block never reads the photo; it lists its name and size.

A stand-in, not the file. The page is drawn from a number made from the file's name, so the same name always draws the same page. The drawer shows the real name and size, a Close button and Remove, which takes the note out of the list and moves focus to the next chip.

Below the small breakpoint the frame loses its bezel, rounded corners and 360 px width and fills the panel, so the same screen is the real one. Every target is at least 44 px high: the Choose files button is 56 px, Take photo 44 and the chips 44.

No. Only the name and the size are kept, and files over 25 MB are refused with a message. The page holds twelve notes. Nothing is uploaded or saved, and a polite status line says so from load.

Both buttons and every chip are real buttons in the tab order. The drawer is a modal with a focus trap, named by the note's name; Escape or Close returns focus to the chip you opened.

Send each file from the accepted handler to your storage and show its state on the chip. Keep the two roots: the camera shortcut is its own FileUpload because capture belongs to the whole root.