Empty State File Upload Block for React

It is an inline SVG with three parts: a back panel, two sheets and a front panel. When the list has an item the sheets fade and sink and the front panel scales up from its foot, all with a CSS transition that reduced motion switches off. The drawing is hidden from screen readers; the drop zone around it is named "Drop files on the folder, or press to choose".

No. The link is parsed in the browser with the URL class: only http and https links with a dotted host are accepted, and the list shows the host and path. A bad link shows its problem under the field and keeps focus there. Nothing is requested.

That the name is one to forty characters, has no slash and is not already a folder here, ignoring case. The folder is added to the list as an empty folder in local state.

No. A file joins the list with its name and its size, and the block says in a polite status line that nothing is uploaded. Files over 100 MB are refused with a message.

Opening a shortcut focuses its field; adding or cancelling returns focus to the button that opened it. Removing a row focuses the next row's Remove button, or Add files when the list is empty. Remove buttons are 44 px on a phone.

Replace the local list with your documents. Send picked files from the accepted handler to your storage, resolve links on your server (never in the browser), and create folders through your API; show the empty state again when the list is empty.