Home
Support Forums

Netlify Form wont upload input form

Hi the site that I’m working on doesn’t seem to be uploading my file upload but other fields are being uploaded aside from the file
the form upload functionality is a new added function Ive added it just recently but checking the Netlify form documentation I dont seem to see what I missed and to why It doesn’t want to upload my files

here is the code of the form

<form id="contact-us-form" name="contact" method="POST" data-netlify="true" netlify-honeypot="address"
            class="contact-form mt40" action="/thanks.html" netlify>
            <div class="form-group">
              <label for="request-services">Request Service</label>
              <select class="form-control" id="request-services" name="request-services"
                onchange="onChangeOptions(this.value);" required>
                <option disabled selected hidden value="">How can we help you?</option>
                <option value="Shopify eCommerce Website">Shopify eCommerce Website</option>
                <option value="Web Applications">Web Applications</option>
                <option value="Mobile Application">Mobile Application</option>
                <option value="UI/UX Designs">UI/UX Designs</option>
                <option value="Digital Strategy and Consulting">Digital Strategy and Consulting</option>
                <option value="Maintenance">Maintenance</option>
              </select>
            </div>
            <input type="text" id="others" placeholder="How can we help you?" />
            <input type="text" name="name" id="name" placeholder="Name" required />
            <input type="text" name="company" id="company" placeholder="Company" required />
            <div class="form-row">
              <div class="col">
                <input type="number" name="budget" id="budget" placeholder="Budget" required />
              </div>
              <fieldset class="col-radio">
                <legend class="currency-label">Currency</legend>
                <div class="form-check form-check-inline">
                  <label><input class="form-check-input" type="radio" name="currency" id="php-option" value="PHP"
                      checked />PHP</label>
                </div>
                <div class="form-check form-check-inline">
                  <label><input class="form-check-input" type="radio" name="currency" id="usd-option"
                      value="USD" />USD</label>
                </div>
              </fieldset>
            </div>
            <input type="email" name="email" id="email" placeholder="Email" required />
            <textarea name="message" id="message" placeholder="Message" rows="7" required></textarea>
            <p class="hidden">
              <label>Our address: <input type="text" name="address" /></label>
            </p>

            <div class="upload form-row w-100">
              <p class="mb-3 w-100">
                Do you have files you want us to see? Send them over. <span class="optional">(Optional.)</span>
              </p>
              <label for="file" id="file-input" class="py-2 px-4 m-0 mr-3 d-flex">
                <img src="../../static/img/icons/contact/cloud-upload.svg" alt="" srcset="" class="mr-2"> 
                Upload File
                <input accept=".doc, .docx, .pdf, .xlsx, .xls, .jpg, .jpeg, .png" class="d-none" type="file" name="file"
                  id="file">
              </label>
              <p class="m-0 px-4" id="file-name"></p>
            </div>

            <div class="row py-2 m-0">
              <button type="submit" class="send-btn col-md-6 col-sm-12">
                Send Message
                <img src="/static/img/icons/cta-arrow.svg" alt="arrow" width="44" height="12" />
              </button>
            </div>
          </form>

this is the input file part.

            <div class="upload form-row w-100">
              <p class="mb-3 w-100">
                Do you have files you want us to see? Send them over. <span class="optional">(Optional.)</span>
              </p>
              <label for="file" id="file-input" class="py-2 px-4 m-0 mr-3 d-flex">
                <img src="../../static/img/icons/contact/cloud-upload.svg" alt="" srcset="" class="mr-2"> 
                Upload File
                <input accept=".doc, .docx, .pdf, .xlsx, .xls, .jpg, .jpeg, .png" class="d-none" type="file" name="file"
                  id="file">
              </label>
              <p class="m-0 px-4" id="file-name"></p>
            </div>

link: Symph - Mobile Apps, Web Design and Web Development | Hire Us

File uploads would not work with AJAX like you have it now. You would have to switch to HTML based form submission or use something like explained here:

hello thank you for your reply I believe we didn’t use ajax there is no javascript that hanfles ajax for this form and the form is HTML just like in the docs? maybe im mmissing something? i kind of dont get it and how do I make it to HTML only?

keep on checking on the deploy logs it detects the file input
image
but on the backend it cant wont recieve
image

I have figured the problem
so basically this form is made by somebody else and before the file input there is a hidden input which I think causes this

I just removed that part and the file url is recieved`

Preformatted text`