Cannot submit multiple images

Support
1

I am trying to build a contact form with Netlify Forms (and Alpine JS) but the file upload part is not working. In the Netlify backend I have it setup for forward the messages from this form submission to an email address but none of the images make it through. I have verified with Chrome developer tools that the images are being posted to the server.

Originally I had a tried using name="photos[]" but I saw another message that this was not supported so I switched it use different names for each image name="photo1", name="photo2", etc.

<form name="contact" action="/" method="POST" enctype="multipart/form-data" netlify>
    <div class="col-md-6 col-sm-12">
        <div class="block">
            <div class="form-group">
                <input name="name" type="text" class="form-control" placeholder="Your Name" required>
            </div>
            <div class="form-group">
                <input name="email" type="text" class="form-control" placeholder="Email Address" required>
            </div>
            <div class="form-group">
                <input name="size" type="text" class="form-control" placeholder="Square feet" required>
            </div>
            <div class="form-group">
                <input name="phone" type="text" class="form-control" placeholder="Phone" required>
            </div>
            <div class="form-group">
                <select name="category" class="form-control">
                    <option disabled selected>Category</option>
                    <option>Landscaping</option>
                    <option>Hardscaping</option>
                    <option>Cleaning</option>
                    <option>Sealing & Coatings</option>
                </select>
            </div>
            <div x-data="{ count: 1 }">
                <template x-for="i in count">
                    <div class="form-group">
                        <input type="file" :name="'photo' + i">
                    </div>
                </template>
                <div class="form-group">
                    <button type="button" class="btn btn-main" @click="count++">Add photo</button>
                    <p class="help-block">Upload a picture of your project.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="block">
            <div class="form-group">
                <textarea name="job_address" class="form-control" placeholder="Your address" required></textarea>
            </div>
            <div class="form-group">
                <textarea name="user_message" class="form-control" placeholder="What would you like done?" required></textarea>
            </div>
            <div class="form-group block">
                <button type="submit" class="btn btn-main">{{ i18n "submit" }}</button>
            </div>
            <div class="form-group">
                <div netlify-recaptcha></div>
            </div>
        </div>
    </div>
</form>
2

Hi @eberkund

It appears you are adding a photo by clicking a button, then clicking the button again to add another. Is that correct?

If so, this is not possible. Forms are processed at build time and the fields that are present then are the fields that are submitted. If you wish to allowing uploading multiple files, you would need to have these fields present.

3

I see, that is correct.

Then how does it works for AJAX submitted forms? Do they also need to be present as static HTML at build time?

4

AJAX is only submitting the form (not creating it), so yes, the static form must/will already exist on the site.

If you are rendering a form in JavaScript there is a method for that too.

In either case, there is no way to append elements to the form (like adding extra images—see Append external data to the form in React)

If wanting to give people the option to add more fields, you could add multiple hidden fields to the form and use a button to unhide them, look at submitting using a serverless function (keeping in mind that they have a 10 second execution limit) or use a third-party service.

5

This discussion might be valuable:

1 Like