can you explain this in a different way, @Frantar? what do you mean exactly by different criteria for tags?
Sorry… what I meant is if the <meta> tags in the header needed to have as well some specific information for a page that container a <form>
Unfortunately, nothing of the suggested fixes is solving my problem. I honestly don’t know what I’m doing wrong 
Hi @iFrantar
I have tinkered with the Submit file uploads with AJAX code on and off for a while because I could never get it to work. And it annoyed me that i couldn’t (sometimes I just can’t let things go!)
After having a serious argument with NuxtJS, then Vue.js, then with NuxtJS again (and winning them all), I decided to pick a fight with Vanilla JS again.
In the end I made one modification to the code from the documentation. I removed the headers.
This is the code from the documentation
document.forms.fileForm.addEventListener("submit", (event) => {
event.preventDefault();
const result = document.querySelector(".result");
fetch("/", {
body: new FormData(event.target),
headers: { "Content-Type": "multipart/form-data" },
method: "POST",
})
.then(() => {
result.innerHTML = "Success";
})
.catch((error) => {
result.innerHTML = `Failed: ${error}`;
});
});
And this is the code I used, which successfully submits a file each time
document.forms.fileForm.addEventListener("submit", (event) => {
event.preventDefault();
const result = document.querySelector(".result");
fetch("/", {
body: new FormData(event.target),
// headers: { "Content-Type": "multipart/form-data" },
method: "POST",
})
.then(() => {
result.innerHTML = "Success";
})
.catch((error) => {
result.innerHTML = `Failed: ${error}`;
});
});
The only difference is I removed (or rather simply commented out) the headers from the fetch call.
The issue (from what I have found) comes down to have a content-type header like
'content-type': 'multipart/form-data; boundary=----WebKitFormBoundarypE4YBjyZJI201WAY',
when headers are missing to having a content-type header like
'content-type': 'multipart/form-data',
when headers a added. This difference means the multipart data is not decoded because the boundary is missing.
Seems I won the fight with Vanilla JS too! 
Interesting note, I see this on MDN Using FormData Objects which would explain this behaviour
Hi Coelmay… I have tried commenting out the headers but still not working for me. Neither my modified code nor Netlify’s code.
Anyway, I’m lost as of what could be wrong. Might try a third party platform for forms.
The main difference I see is your code has
let formData = new FormData(formElem)
body: new URLSearchParams(formData).toString()
while the Netlify code (which I have used) has
body: new FormData(event.target),
Yep, it’s strange. Might give it another pass see if I get it to work. Thanks again for your feedback and suggestions 
1 Like
Please give it another pass and let us know what happens! If it doesn’t work, let us know what you tried! If you’re still encountering obstacles after another pass I can loop in our Support Engineers again.