Subida con progreso

Subir ficheros de verdad, en cuanto se eligen: la zona de FileUpload para soltarlos o elegirlos y, debajo, una fila por fichero con su barra de avance, el motivo si falla, un botón para reintentar y otro para quitarlo, que cancela la subida. Es FileUpload + FileList + useFileUploads, ya montados juntos.

Cuándo usarlo

• Adjuntos que se suben al elegirlos: facturas, justificantes, las fotos de un producto.
• http sube por HTTP, con un formulario multipart: action (la dirección, o una función que la calcula para cada fichero), method (POST por defecto, o PUT), headers, data (campos extra que viajan con el fichero), fieldName (file por defecto) y withCredentials. Va con XMLHttpRequest y no con fetch porque fetch no dice cuánto ha salido, y sin eso la barra no se movería.
• customRequest sube por donde diga quien lo usa (una URL firmada, el SDK de un almacenamiento) y manda sobre http: recibe { file, onProgress, signal }, llama a onProgress con el porcentaje y devuelve una promesa con lo que contesta el servidor. Tiene que respetar signal, que se cancela al quitar el fichero.
• concurrency es cuántos suben a la vez (3 por defecto): el resto espera su turno, y uno que falla no tumba a los demás.
• onChange avisa con la lista entera a cada cambio; onUploaded y onFailed, de cada fichero que termina o falla (lo que contestó el servidor llega en su response); onReject, de lo que no pasa el filtro de tipo, de tamaño o de cuántos caben.
• La zona es la de FileUpload, con sus mismas props: label, hint, error, acceptedTypes, maxSizeMb, multiple, maxCount, directory, size y disabled. Sin multiple, elegir otro fichero reemplaza al anterior y cancela su subida.
• El filtro de tipo y tamaño es comodidad: el servidor tiene que volver a comprobarlo.

Cuándo no

• Elegir ficheros que viajan con el formulario al enviarlo, sin subirlos antes: FileUpload.
• Subir al pulsar «Enviar» y no al elegir: useFileUploads con autoStart: false y su start(), con FileUpload (hideList) y FileList pintados por tu cuenta.
• Enseñar adjuntos que ya están subidos: FileList.

Teclado: el de FileUpload: Tab llega a la zona y a su botón (Intro o Espacio abren el selector del sistema; con el foco en la zona se pueden pegar ficheros), y después a los botones de cada fila: «Reintentar» si ha fallado y «Quitar». Al quitar uno, el foco pasa a la lista, que dice cuántos quedan; al quitar el último, la lista desaparece y el foco vuelve al botón de elegir, con el aviso «factura.pdf quitado. No queda ninguno».

Accesibilidad: la lista es una región que se llama como la zona («Subidas de Facturas»). Mientras un fichero sube, su fila lleva una barra de progreso con nombre («Subiendo factura.pdf»); en cola no lleva barra, porque «0 %» diría que ya ha empezado. Cada cambio de estado se anuncia una sola vez en una región status —«factura.pdf subido», «No se ha podido subir falla.pdf: 413 Payload Too Large»—, y varios que terminan a la vez se anuncian juntos; el avance se ve en la barra, sin anunciarse cien veces. Los botones dicen de qué fichero son («Quitar factura.pdf»). Los errores de red, de tiempo y de estado que escribe http salen en el idioma de http.locale (castellano, por defecto).

Aspecto fino: --amset-uploader-gap, la separación entre la zona y la lista; la zona, con las --amset-upload-* de FileUpload, y la lista, con las --amset-files-* de FileList.