Upload with progress

Uploading files for real, as soon as they are chosen: the FileUpload zone to drop or choose them and, below, one row per file with its progress bar, the reason if it fails, a button to retry and another to remove it, which cancels the upload. It is FileUpload + FileList + useFileUploads, already mounted together.

When to use it

• Attachments that are uploaded when chosen: invoices, receipts, the photos of a product.
• http uploads over HTTP, with a multipart form: action (the address, or a function that works it out for each file), method (POST by default, or PUT), headers, data (extra fields that travel with the file), fieldName (file by default) and withCredentials. It uses XMLHttpRequest and not fetch because fetch does not say how much has gone out, and without that the bar would not move.
• customRequest uploads wherever whoever uses it says (a signed URL, a storage SDK) and wins over http: it receives { file, onProgress, signal }, calls onProgress with the percentage and returns a promise with what the server answers. It has to respect signal, which is aborted when the file is removed.
• concurrency is how many upload at once (3 by default): the rest wait their turn, and one that fails does not bring down the others.
• onChange reports the whole list on every change; onUploaded and onFailed, each file that finishes or fails (what the server answered arrives in its response); onReject, what does not pass the type, size or how-many-fit filter.
• The zone is that of FileUpload, with the same props: label, hint, error, acceptedTypes, maxSizeMb, multiple, maxCount, directory, size and disabled. Without multiple, choosing another file replaces the previous one and cancels its upload.
• The type and size filter is a convenience: the server has to check it again.

When not to

• Choosing files that travel with the form when it is sent, without uploading them first: FileUpload.
• Uploading when "Send" is pressed and not on choosing: useFileUploads with autoStart: false and its start(), with FileUpload (hideList) and FileList rendered on your own.
• Showing attachments that are already uploaded: FileList.

Keyboard: that of FileUpload: Tab reaches the zone and its button (Enter or Space open the system picker; with focus on the zone files can be pasted), and then the buttons of each row: "Retry" if it failed and "Remove". On removing one, focus moves to the list, which says how many are left; on removing the last one, the list disappears and focus goes back to the choose button, with the notice "factura.pdf removed. None left".

Accessibility: the list is a region named after the zone ("Uploads for Invoices"). While a file uploads, its row carries a progress bar with a name ("Uploading factura.pdf"); queued, it carries no bar, because "0 %" would say it had already started. Each change of status is announced once in a status region —"factura.pdf uploaded", "Could not upload falla.pdf: 413 Payload Too Large"—, and several that finish at once are announced together; the progress is seen in the bar, without being announced a hundred times. The buttons say which file they are for ("Remove factura.pdf"). The network, timeout and status errors written by http come out in the language of http.locale (Spanish, by default).

Fine-tuning: --amset-uploader-gap, the gap between the zone and the list; the zone, with the --amset-upload-* of FileUpload, and the list, with the --amset-files-* of FileList.