Remove "filename" header from FormData

Question

I'm trying to post a request using FormData(), I need to include the "content type" header so I'm using the blob to append entries to my form, but this automatically sets the filename to "blob"

const formData = new FormData();

        const obj1 = new Blob([json_data], {type: 'text/plain; encoding=utf-8'});
        formData.append("small_config", obj1);

        const obj2 = new Blob([client], {type: 'text/plain; encoding=utf-8'});
        formData.append("app_type", obj2);

        const obj3 = new Blob([version], {type: 'text/plain; encoding=utf-8'});
        formData.append("product_version", obj3);

        let thumb = await fetch(my_url, {
            method: 'POST',
            mode: 'cors',
            cache: 'no-cache',
            credentials: 'same-origin',
            redirect: 'follow',
            referrerPolicy: 'no-referrer',
            body: formData
        });

Is there a way to both set the content type and not include filename?

Steven Spungin · Answer 1 · 2021-11-23T18:39:28.433

0

There is no way to have FormData not send a filename with an appended blob. You can send an empty string however.

Use the 3rd parameter to FormData.append

formData.append("small_config", obj1, 'My Filename');

So for your case, try an empty string.

formData.append("small_config", obj1, '');

From Mozilla docs:

filename Optional
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob". The default filename for File objects is the file's filename.

edited Nov 23 '21 at 18:39

answered Nov 22 '21 at 11:59

Steven Spungin

27,002
5
88
78

This doesn't work, filename in formData entries is still "blob" – Bartosz Włodarczyk Nov 22 '21 at 14:49
@BartoszWłodarczyk i posted another solution. – Steven Spungin Nov 22 '21 at 17:32
this results in formData with ' filename = "" ' – Bartosz Włodarczyk Nov 23 '21 at 11:03
Then there is your answer. Blank filename or blob filename. You can try to use null or undefined, but that is not part of the spec, needs to be a string. – Steven Spungin Nov 23 '21 at 13:36
Also, how is a blank filename not 'removing filename'? Your backend is going to have to deal will missing or blank in a simliar manner. – Steven Spungin Nov 23 '21 at 13:37
I might've explained the problem wrong, I need the whole header to be gone, not just the value. For whatever reason just having the header there makes the request unusable. – Bartosz Włodarczyk Nov 23 '21 at 15:56
You will have to not use FormData object then. I updated the solution. – Steven Spungin Nov 23 '21 at 18:37
I just thought it might be possible, because it's really easy to do with python's requests library – Bartosz Włodarczyk Nov 24 '21 at 08:13
You can do it, just need to manually send the content-disposition header and not use the FormData. – Steven Spungin Nov 24 '21 at 11:54
Is it possible this is related to incorrect 'content-type' from the blob, and not even related to the filename? That is a common issue too, and you CAN override the content type. – Steven Spungin Nov 24 '21 at 11:57

Remove "filename" header from FormData

1 Answers1