Media Upload Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the library: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Upload button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same UploadFields component and share the block's state, so the files you chose in the copy are there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

By the files' own properties, in words. The picker takes only images, video and audio; a file of another kind, or one over 25 MB, is refused and named with its reason in the drop zone's own line, such as "notes.txt: Not a media file" or "huge.mov: Too large, 26 MB against 25 MB". The block adds two checks of its own: a file with the same name and size as one already listed is turned away, and the list takes eight files at a time, so a ninth is named too. Dismiss clears the lines. Nothing is read beyond the name, the size and the type.

Nothing uploads: the files are read on this device and stay in the tab, and there is no progress bar because there is no transfer. An image tile shows the visitor's own picture through an object URL, made when the tile appears and revoked when it goes, so the browser lets the memory go; audio and video get a drawn glyph and are never played. In your app send each file to your storage from addThem, and show the real progress then.

Each tile is one checkbox: press anywhere on it, or move to it with Tab and press Space. Remove selected names its count and takes the ticked tiles out, Remove all empties the list, and both move focus to Browse files so a keyboard user is never left on a control that is gone. With nothing ticked the buttons stay in place and answer in words instead of doing nothing. The eight places are always drawn, the free ones dashed, so the dialog keeps its height whatever is chosen.

So the preview shows the dialog at work. On load the list holds five typed sample files (a tour, a room tone, a cover frame, a cut and a voiceover, 38 MB in all); they are only names and sizes, with a drawn glyph and no picture, and Remove all clears them. Files you choose join them, up to eight. Once the dialog closes the samples are gone until a reload. In your app start with an empty list and remove SAMPLES.

It moves the tiles to the front of the drawn library as real text, named after the files with their kind and size, and says "5 files added to the library, 38 MB" in a polite message. The count in the page header follows. Cancel, Close and Escape let the chosen files go.

Yes. The real dialog is named Add to the library, focus starts on Browse files and stays inside until the dialog closes, and Escape and the close button return focus to Upload. The drop zone is a labelled group, so dragging is an extra and Browse files is the way in for everyone. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.