Ajax form submission with file upload

Support
1

Hi There

My netlify site name is silly-clarke-c72dbb.netlify.app

When submitting the form with file upload, all data goes to the form UI except the file… I’ve read a lot of documentation and fixed some things that I thought might be the problem, but weren’t

Here’s my form:

 <form id="idForm" class="form" name="formname" method="POST" data-netlify="true">
                        <input id="nameInput" name="name" class="input" type="text" minlength="2" required>
                        <input id="birthdayInput" name="bday" class="input" type="date" required>
                        <input name="phone" class="input" type="text" id="phoneNumberInput" required>
                        <input type="file" id="attachInput" class="input" name="file" accept="image/*,.pdf" required>
                        <button type="submit" id="submitButton">Send me</button>
                    </form>

And here’s my ajax for the submit handle:

    const handleSubmit = (e) => {
        console.log(e);
        e.preventDefault()
        let myForm = document.getElementById('idForm');
        let formData = new FormData(myForm);
        fetch('/', {
            method: 'POST',
            headers: { "Content-Type": "multipart/form-data" },
            body: new URLSearchParams(formData).toString()
        }).then(() => window.location.assign('/thankyou')).then(alert('Form submitted successfully!')).catch((error) =>
            alert(error))
    }

I hope that you can help me fixed it, cause i know this community is strong and helpful with people

2

This might help:

1 Like
3

Did you ever figure this out?

4

This is a very old post and a lot of things would have changed since then. If you’re still running into issues, please provide some relevant details.