Not receiving the file uploaded in the form

First off I’m pretty new with the Netlify platform but I am loving it!

I am working on a site for a friends business and I am trying to get a contact form working with the ability for the user to upload a resume. It’s being built using create react app. The site name is https://clever-babbage-036ee8.netlify.app.

I am able to receive everything from the form except the attachment that the user uploads. I followed the documentation on setting up a contact form for a stateless react app. Will the stateless react app instructions work with file upload or do I have to construct it as a stateful react form? Thanks in advance for the help!

In the index.html file I have set up a hidden static version of the form that looks like this.

<form action="/" name="contact" netlify netlify-honeypot="bot-field" hidden>
  <select name="contactType" ></select>
  <input type="file" name="resume" />
  <input type="text" name="company" />
  <input type="text" name="first" />
  <input type="text" name="last" />
  <input type="tel" name="phone" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>

In my Contact Component I have my form built with corresponding fields and have included the “hidden form-name” field in the the form. The entire form looks like the code below.

<form action="/" name="contact" method="POST">
      <input type="hidden" name="form-name" value="contact" />
      <div className="question">
        <h3>I'm Looking For</h3>
        <select name="contactType" onChange={handleChange}>
          <option value="general">Answers to General Questions</option>
          <option value="company">Talented Technology Professionals</option>
          <option value="employee">
            Opportunities With A Great Company
          </option>
        </select>
      </div>
      <div className="resume">
        <input type="file" id="uglybutton" onChange={seeFile} name="resume" />

        <label
          htmlFor="uglybutton"
          id="uploadText"
          type="file"
          name="resume"
        >
          {fileName}
        </label>
      </div>
      {type}
      <div className="fullname">
        <input
          type="text"
          className="first"
          placeholder="* First Name"
          name="first"
        />
        <input
          type="text"
          className="last"
          placeholder="* Last Name"
          name="last"
        />
      </div>
      <div className="info">
        <input
          type="tel"
          className="phone"
          placeholder="* Phone Number"
          name="phone"
        />
        <input
          type="email"
          className="email"
          placeholder="* Email"
          name="email"
        />
      </div>
      <div className="message">
        <textarea
          name="message"
          rows="6"
          placeholder="* I'd Like To Know More About..."
        ></textarea>
      </div>

      <div className="send">
        <button>Submit</button>
      </div>
    </form>

Hi @brianlfarmerllc, welcome to the community!

It looks like your file upload field calls the seeFile function on change but you didn’t share that code here. I’d assume that the issue is in that function.

That said, you can take a look at this: https://github.com/imorente/gatsby-netlify-form-example/blob/master/src/pages/file-upload.js for an example on how a file upload field is implemented in React.

Let me know if that helps.