Brand Assets File Upload Block for Vue

Type and size are. Each cell passes its own accept and maxFileSize to the drop zone, so the picker and the zone refuse the wrong type or a file that is too big, and the refusal handler writes which rule was broken. The file count is enforced by the block. Square icons and image dimensions are the rules the browser cannot check without opening a file, and this block never does, so those rows say "not checked in this demo" for a picked file; the seeded files carry typed sizes.

They are drawn. Each is three or four shapes chosen by the cell and a number made from the file's name, so the same name always draws the same picture. A picked file is never read or previewed, so no object URL is created.

Files past its count are not added, and the cell's line says how many were left out. Remove a file and the room comes back. After a removal focus moves to the next file's Remove button, or to the cell's drop zone when the list is empty.

It repeats the last change in any cell, so a screen reader hears the same sentence the cell shows: files added, a refusal with its rule, or a removal. It is present from load.

Everything. Nothing is uploaded, and a reload restores the seven typed files. To wire it, send the accepted files to your storage on add, validate the type and the pixel size on the server, and replace SEEDED with the kit you have stored.