Files don't always work on form submision

Hello I Built a site using Gatsby and am utilizing Netlify’s awesome form functionality.

https://hungry-beaver-b27a84.netlify.app/

BUT I am having an issue with files being submitted.

Sometimes the files show up and other times they don’t and I have tried various file sizes and types and it doesn’t seem to make a difference. I read something about a 10mb size limit so I tested out files that added up to less than that and still nothing. I tried png, jpg, pdf and it was random if they work or not.

At first I thought maybe my Zap was set up incorrectly but when looking on Netlifys Dashboard at my form submissions the form seems to not even recognize that I added photos.

Here is the code for my Form.

import React from 'react';
import { CustomSelect, CustomText, FormButton, FormContainer, FormInput } from './CustomFormElements';

const CustomForm = () => {

    return (
        <FormContainer>
            <form name="contact" method="POST" data-netlify="true">
                <input type="hidden" name="form-name" value="contact" />

                <label htmlFor="name">Name: </label>
                <FormInput type="text" id="name" name="name" required />

                <label htmlFor="company">Company(if applicable): </label>
                <FormInput type="text" id="company" name="company" />

                <label htmlFor="email">Email: </label>
                <FormInput type="email" id="email" name="email" required />

                <label htmlFor="phone">Phone: </label>
                <FormInput type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />

                <label htmlFor="date">Date Needed:</label>
                <FormInput type="date" id="date" name="date"  required />
                <p><small>Not the day of the event - usually 1 or 2 days before.  What day do you need to be holding your cookies?</small></p>

                <label htmlFor="cookie-count">How many cookies would you like to order?</label>
                <FormInput type="number" id="cookie-count" name="cookie-count" min="12" max="100000"  placeholder="12" required />
                <p><small>Min is 1 dozen but you can order 17 cookies if that is how many you need.</small></p>

                <label htmlFor="mini-cookies">Would you like to add 1 dozen mini-cookies?</label>
                <CustomSelect id="mini-cookies" name="mini-cookies">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="cake-topper">Would you like to add on a cake topper?</label>
                <CustomSelect id="cake-topper" name="cake-topper">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="individual">Do you need your cookies individually wrapped with a bow?</label>
                <CustomSelect id="individual" name="individual">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="design">What type of design are you interested in?</label>
                <CustomText id="design" name="design" rows="4" required />
                <p><small>Give me all the details!  What shape of cookies, colors, vibe, style, a name, specific animal, year etc.?</small></p>

                <label htmlFor="event">Are these cookies for an event?</label>
                <CustomSelect id="event" name="event">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="event-name">What is the event?</label>
                <FormInput type="text" id="event-name" name="event-name" />

                <label htmlFor="pick-up">Are you able to pick-up your order in Sequim, WA?</label>
                <CustomSelect id="pick-up" name="pick-up" required>
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="washington">If "No" and you need cookies shipped, are you located in Washington state?</label>
                <CustomSelect id="washington" name="washington">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>
                <p><small>I am only able to ship within the state of Washington.</small></p>


                <label htmlFor="photos">Add any inspirational photos here:</label>
                <FormInput type="file" id="photos" name="photos" placeholder="Upload Photo"/>
                <FormInput type="file" id="photos2" name="photos2" placeholder="Upload Photo"/>
                <FormInput type="file" id="photos3" name="photos3" placeholder="Upload Photo" />
                <br />

                <FormButton type="submit">Bake</FormButton>

            </form>

        </FormContainer>
    )
}

export default CustomForm;

Any Help would be great thank you.

added

enctype="multipart/form-data"

to my form tag and that looks like it may have solved the issue.

1 Like

Hey there, @krichey15 :wave:

Thank you for taking the time to share your solution! This will benefit any future Forums members who encounter something similar, so we really appreciate it :netliconfetti:

Looks Like it did not actually fix the issue. I deployed the site with the new piece of code The form worked 3 times in a row. It has been sitting for a few days now. Client tried to use it. Did not upload files.

Hey @krichey15 :wave:

It looks like you and @perry continued your forms conversation in a different thread. I am going to close this thread to streamline the conversation into one place :slight_smile: