Home
Support Forums

File not showing on the netlify dashboard on form submission. I am getting the data from the rest of the fields but not from the file type

Hi! Some tips:

Basically, I am unable to get the file that is getting submitted at the time of file submission.
I don’t really know why it’s happening because I have followed the documentation.
I am using Nextjs. Please help.

I am pasting the code for your reference
`
//Request
const handleSubmit = (event) => {
event.preventDefault();
const isValid = formValidation();
if (isValid) {
let formdata = new FormData();
formdata.append(“form-name”, “job-form”);
formdata.append(‘Name’, data.Name);
formdata.append(“Resume”, data.Resume[0]);
formdata.append(“Mob”, data.Mob);
formdata.append(“countryCode”, data.countryCode);
formdata.append(“Email”, data.Email);
if (data.Address.trim() != “”) formdata.append(“Address”, data.Address);
if (data.currentLocation.trim() != “”) formdata.append(“currentLocation”, data.currentLocation);
if (data.dOB.trim() != “”) formdata.append(“dOB”, data.dOB);
if (data.totalExperience.trim() != “”) formdata.append(“totalExperience”, data.totalExperience);
if (data.noticePeriod.trim() != “”) formdata.append(“noticePeriod”, data.noticePeriod);
if (data.currentCompany.trim() != “”) formdata.append(“currentCompany”, data.currentCompany);
if (data.currentCtc.trim() != “”) formdata.append(“currentCtc”, data.currentCtc);
if (data.expectedCtc.trim() != “”) formdata.append(“expectedCtc”, data.expectedCtc);
fetch("/", {
method: “POST”,
headers: { “Content-Type”: “multipart/form-data” },
body: new URLSearchParams(formdata).toString()
})
.then(() => {
router.push(’/thankyou’);

            })
            .catch(error => alert(error))
    }
}

//htmlform

      {/* Netlify job Form */}
      <form data-netlify="true" hidden name="job-form" netlify-honeypot="bot-field">
        <input type="file" name="Resume" />
        <input type="text" name="Name" />
        <input type="email" name="Email" />
        <input type="select" name="countryCode" />
        <input type="tel" name="Mob" />
        <input type="text" name="Address" />
        <input type="text" name="currentLocation" />
        <input type="date" name="dOB" />
        <input type="number" name="totalExperience" />
        <input type="number" name="noticePeriod" />
        <input type="text" name="currentCompany" />
        <input type="text" name="currentCtc" />
        <input type="text" name="expectedCtc" />
        <input type="submit" />
      </form>

`

Hiya, @nitindutta2401 :wave:

Welcome to the Netlify Forums, and thanks for reaching out! We are sorry to hear that you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Have you worked through this guide and the included steps? There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide the information we ask for in the support guide, such as what you have already tried, and a link to your live form, your form name in the UI, etc. :slight_smile:

Thanks!

I have pasted my code above, like what I tried. It’s already there above. I don’t really understand why is it not showing the file type data on the form submission dashboard. I am getting the data from the rest of the fields except the file type. Please help.

Two things @nitindutta2401

You haven’t posted the code for formValidation(). What does it do?

If you remove all the formdata.append calls (and if statements), does the form submit with the file?

const formValidation = () => {
        const nameError = {};
        const resumeError = {};
        const emailError = {};
        const mobError = {};
        let isValid = true;
        if (data.Name.trim().length < 3 || data.Name.trim().length === 0) {
            nameError.shortName = "Name is must have atleast 3 characters!"
            isValid = false;
        }
        if (data.Resume === null) {
            resumeError.invalidResume = "Please upload Resume!";
            isValid = false;
        }
        if (!data.Email.trim().match(emailRegex)) {
            emailError.invalidEmail = "Please enter a valid email!";
            isValid = false;
        }
        if (!data.Mob.trim().match(mobRegex)) {
            mobError.invalidMob = "Please enter a valid mobile no. (xxxxxxxxxx)!";
            isValid = false;
        }
        setNameError(nameError);
        setResumeError(resumeError);
        setEmailError(emailError);
        setMobError(mobError);
        return isValid;
    }

This is the form validation function. I have not tried doing that because if I am uploading a multipart content-type appending to formdata is required. Right?

I deployed cassidoo/next-netlify-portfolio-starter after adding in a file field and adding enctype to <form>. This is a non-AJAX form, but works so a good place to start.

As for FormData.append()

Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.
MDN

   <Label className="mb-2">Attach CV*  pdf, docx</Label>
                        <div className="border p-2">
                            <Input type="file" name="Resume" accept=".pdf,.docx" onChange={(e) => handleResume(e.target.files)} />
                            {Object.keys(resumeError).map((key) => {
                                return <span style={{ color: "red", fontSize: '12px' }}>{resumeError[key]}</span>
                            })}
                        </div>

I am using reactstrap Input . I am able to get the data from rest of the fields but not from file type. I have followed the same documentation. Forms setup | Netlify Docs
I can’t really figure out where am I going wrong?

Code snippets only tell part of the story.

Can you share your git repository, or a minimal reproduction of it.

You can have a look my form component over here.

Also you can have a look at the _document.js

I have shared the replica repo above.

Hi @nitindutta2401,

What happens you remove all of the JavaScript and submit it as a plain vanilla HTML form?

Then I am able to get the file. But I want to redirect to my custom thank you page and add some frontend validations using react. Why am I not able to do it with the ajax way?

I’m not a React expert by any chance, so I won’t be able to answer as to why it’s not working with your JS. I’d advise to try to break down it to the simplest bits, then start adding complexity.

I don’t see where you are adding the file to the FormData. In the documentation it shows instantiating the FormData object with the form:

let myForm = document.getElementById('dogPictures');
let formData = new FormData(myForm)

But yours is just

I tried this as well but no success!

Even after following the documentation mentioned for ajax submission, my file is not getting uploading. I am using next js Static Site Generation. It’ll be nice if anyone could help.

Is the file getting sent with the request? Have you opened up DevTools and looked at the request? Is it that a) the file isn’t being sent or b) is it that it is sent but doesn’t show up in Netlify?

Yeah, I can see that in the request the file object is being send. But I don’t get the url of the uploaded file on Netlify Dashboard.

Hi @nitindutta2401,

I tried various combinations of editing your code, can’t seem to get it working. Meanwhile, I found this: https://github.com/imorente/gatsby-netlify-form-example/blob/master/src/pages/file-upload.js example that uses Gatsby, maybe you can adopt it for your workflow?

1 Like
import { Col, Button, Form, FormGroup, Input, Label } from 'reactstrap';
const countryCode = require('country-codes-list');



const JobForm = () => {


    const myCountryCodesObject = countryCode.customList('countryCode', '[{countryCode}] {countryNameEn}: +{countryCallingCode}');

    const countryCodes = Object.entries(myCountryCodesObject);
 

    return (
        <>
            <form method="POST" name="job-form"  id="jobForm" action="/thankyou2" data-netlify="true"     netlify-honeypot="bot-field">
                <input type="hidden" name="form-name" value="job-form" />
                <FormGroup row>
                    <Col sm={8} className="my-4" >
                        <Label className="mb-2">Attach CV*  pdf, docx</Label>
                        <div className="border p-2">
                            <input type="file" name="Resume" accept=".pdf,.docx" /> 
                        </div>
                    </Col>
                </FormGroup>
                <p className="mb-2 bold form-Section">Personal Details</p>
                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input className="form-control" type="text" name="Name" placeholder="Name*"  />
                    </Col>
                </FormGroup>

                <FormGroup row>
                    <Col sm={8} className="mb-4">
                        <input className="form-control" type="email" name="Email" id="exampleEmail" placeholder="Email*"   />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={8} className="mb-4 d-flex" >
                        <select className="form-control w-25"  name="countryCode" >
                            {
                                countryCodes.map((code, id) => (
                                    code[1].includes('India: +91')?
                                    <option key={id} selected>{' ' + code[1].replace(/(\[.*?\])/g, '')}</option>
                                    :
                                    <option key={id}>{' ' + code[1].replace(/(\[.*?\])/g, '')}</option>
                                ))
                            }
                        </select>
                        <input  type="tel" name="Mob" placeholder="Contact Number" className="border-left form-control" /> 
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input  className="form-control" type="text" name="Address" placeholder="Address"   />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input  className="form-control" type="text" name="currentLocation" placeholder="Current Location"   />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <Label>Date of Birth</Label>
                        <input  className="form-control" type="date" name="dOB" placeholder="Date of Birth"  />
                    </Col>
                </FormGroup>
                <p className="mb-2 bold form-Section">Employment Details</p>

                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input  className="form-control" type="number" name="totalExperience" placeholder="Total Experience (yrs)*"  />
                    </Col>
                </FormGroup>

                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input  className="form-control" type="number" name="noticePeriod" placeholder="Notice Period (days)*"  />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input  className="form-control"type="text" name="currentCompany" placeholder="Current Company*"  />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input  className="form-control" type="text" name="currentCtc" placeholder="Current CTC*"  />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={8} className="mb-4" >
                        <input  className="form-control" type="text" name="expectedCtc" placeholder="Expected CTC*"   />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={{ size: 12 }}>
                        <Button color="primary" type="submit">SEND</Button>
                    </Col>
                </FormGroup>
            </form>
        </>
    );
}

export default JobForm

I tried the html way as well but still my resume file is not getting uploaded.