Home
Support Forums

Forms: can't get file uploading to work with NextJS

Hello, everyone!

I’m trying to get my form to work but I’m stuck -like many other people- when it comes to file uploading. I’ve tried many solutions from other posts and followed the guides related to netlify forms. However, although the form info works okay, the files don’t.

First of all, I’m using NextJS. This is the relevant code of the form itself:

<form
          name="contact-test"
          method="POST"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          onSubmit={handleSubmit}
        >
          <input type="hidden" name="form-name" value="contact-test" />
          <p hidden>
            <label>
              Don’t fill this out:
              <input name="bot-field" onChange={handleChange2} value={honey} />
            </label>
          </p>
          <p>
            <label htmlFor="yourname">Your Name:</label> <br />
            <input
              type="text"
              name="name"
              id="yourname"
              onChange={handleChange2}
              value={name}
            />
          </p>
          <p>
            <label htmlFor="youremail">Your Email:</label> <br />
            <input
              type="email"
              name="email"
              id="youremail"
              onChange={handleChange2}
              value={email}
            />
          </p>
          <p>
            <label htmlFor="yourmessage">Message:</label> <br />
            <textarea
              name="message"
              id="yourmessage"
              onChange={handleChange2}
              value={message}
            ></textarea>
          </p>

          <div {...getRootProps()}>
            <label htmlFor="yourAttachment">Attachment:</label> <br />
            <input {...getInputProps()} />
            {isDragActive ? (
              <p>Drop the files here ...</p>
            ) : (
              <p>Drag 'n' drop some files here, or click to select files</p>
            )}
          </div>

          <p>
            <button type="submit">Send</button>
          </p>
        </form>

This method handles the submit (I’m using axios):

const handleSubmit = (e) => {
    e.preventDefault();
    const data = { "form-name": "contact-test", name, email, message, file };
    axios({
      url: "/",
      method: "POST",
      data: encodeData(data),
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
  };

To encode the data, this is the method I use:

  let encodeData = (data) => {
    const formData = new FormData();

    Object.keys(data).forEach((key) => formData.append(key, data[key]));

    return formData;
  };

Apparently everything is working okay as the network request shows the file included in it:

-----------------------------36108339361148502522642075512
Content-Disposition: form-data; name="form-name"

contact-test
-----------------------------36108339361148502522642075512
Content-Disposition: form-data; name="name"

Some random person
-----------------------------36108339361148502522642075512
Content-Disposition: form-data; name="email"

test@useremail.com
-----------------------------36108339361148502522642075512
Content-Disposition: form-data; name="message"

Hello, this is a test.
-----------------------------36108339361148502522642075512
Content-Disposition: form-data; name="file"; filename="IMG_3392.jpeg"
Content-Type: image/jpeg

ÿØÿàJFIF...

(several lines of image info removed for brevity purpouses)

...3Þ£©zŽ¦@ÿÙ
-----------------------------36108339361148502522642075512--

The response shows the Netlify message we all know:

Thank you!

Your form submission has been received.

← Back to our site

However, form will not show in my control panel the link to the file I uploaded Rest of the fields do, though:
netlify

I’m stuck at this point and I honestly don’t know what is going on with the file. Any ideas?

Thank you!

Hiya, @underium :wave:

I appreciate how much detail you included in your post-- thank you! Additionally, thanks for confirming that you have read the support guides and relevant posts. That is always a good starting point with issues like this.

Since you have already seen those, the next step would be sharing the following information with us:

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
  3. Confirm the form name that you’ve set and that shows in our UI (it looks like it is contact-test, is that correct?)
  4. The project repo, if public.

Thank you!