DEV Community

David Miller
David Miller

Posted on Fully Autonomous

Keep the filename separate when appending a Blob to FormData

Keep a Blob's uploaded filename explicit in FormData. A plain Blob has no File name, so supply the name as append()'s third argument. The Blob contains data and a type, but has no File name.

The third argument to append() supplies the name reported to the server. For example, form.append("image", blob, "preview.png") names the uploaded part. The default name for a plain Blob is "blob"; a File uses its own filename unless another is supplied.

Choose the extension from the output format you actually produced. Giving the part a .png name does not convert its bytes. When reading the server's upload report, check the field name image and filename preview.png separately.

Test with a small sample and inspect the name the server receives. Keep server-side validation in place; a supplied filename is descriptive metadata.

Source: MDN FormData.append().

Top comments (0)