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

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.

I added this enctype=‘multipart/form-data’ the form element and cleared my caching and deployed it and it worked. But the AJAX one isn’t working. I don’t know why.

Hi @nitindutta2401,

Just to confirm, would you be able to try some other form submission provider and see if you can get it to work with them? If the same code works there, but not with Netlify forms, it would help to remove a variable out of the question.