Logo File Input Form Block for React

Edit LIMIT (bytes), MIN_SIDE (pixels) and TYPES at the top. quickProblem checks the type and size from the file's own properties, so a wrong file is refused before anything is decoded; shapeProblem checks the pixels once they are known. Both are pure functions that return the sentence to show, so the same text serves the drop, the picker and your tests. The file picker is filtered to PNG and JPG as well, but a picker filter can always be bypassed, so the checks run on every file.

In a small helper it calls createImageBitmap(file), which decodes the image in the tab, reads its width and height and releases it. Nothing is drawn, nothing is uploaded and no object URL is created. A file that claims to be a PNG but will not decode ("logo.png could not be read as an image") is refused the same way. Your server must still check the real type and size of whatever it receives.

The good logo stays and a named reason appears in the slot under it, so a slip of the hand never loses the current logo. Dropping two files at once keeps neither and says to choose one. The slot is always there, two lines high, so the panel does not move.

Yes. Browse files is a real button: Enter or Space opens the picker, and its label changes to Replace file once there is a logo. The drop area is for dragging only; the whole flow works from the button. Each result is spoken once by the foot's polite status, and Remove is a button named for the file ("Remove logo.png").

Everything: the chosen file is held by the browser, never read as bytes by the page, and Save logo says "The file stayed on this device". In your app, upload the File from the submit handler (a signed URL or a multipart request), show progress in the same row, and validate the upload again on the server: size, type and a real decode.

Keep the checked file as the form's value and use the rules as the validator. With react-hook-form, store the File with setValue from the accept handler, run quickProblem and the pixel check in a resolver and show the sentence under the field. With TanStack Form, an async onChange validator can call the same pixel helper and return the sentence as the field error.