Home
Support Forums

Cant find Uploaded File in netlify forms i try many codes nothing worked i will drop here my code hoping some one to edit

i tried many solution of another but nothing worked for me here is my full code please just edit my code

import React, { useState, useCallback } from 'react';
import { Card, Button, Form, InputGroup } from "react-bootstrap"
import { Link, graphql } from "gatsby"
import { Helmet } from "react-helmet"
import Recaptcha from 'react-google-recaptcha'
import { useDropzone } from 'react-dropzone'

import { navigate } from 'gatsby'


export default function Job({ data }) {
    const url = typeof window !== "undefined" ? window.location.href : ""
    const urlimage = typeof window !== "undefined" ? window.location.hostname : ""
    const [buttonDisabled, setButtonDisabled] = React.useState(true)
    const [file, setFile] = useState({});
    const onDrop = useCallback(acceptedFiles => {
        console.log(acceptedFiles)
        setFile(acceptedFiles[0])
    }, [])
    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
    const url_string = typeof window !== "undefined" ? new URLSearchParams(window.location.search).get('opportunityTitle') : "";




    const [formState, setFormState] = useState({
        firstname: "",
        lastname: "",
        phone: "",
        email: "",
        priority: "",
        message: "",
        resume: "",
        job: url_string,

    })

    const encode = (data) => {
        return Object.keys(data)
            .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
            .join("&");
    }
    const handleChange = e => {
        setFormState({
            ...formState,
            [e.target.name]: e.target.value

        })
    }
    const handleSubmit = e => {
        e.preventDefault()

        const form = e.target
        const recaptchaValue = recaptchaRef.current.getValue()

        fetch("/", {
            method: "POST",
            headers: { "Content-Type": "multipart/form-data" },
            body: encode({ "form-name": "jobs", 'g-recaptcha-response': recaptchaValue, ...formState })
        })
            .then(() => navigate(form.getAttribute('action')))
            .catch(error => alert(error));

        e.preventDefault();
    }
    const recaptchaRef = React.createRef()

    var callback = function () {
        console.log('Done!!!!');
    };

    // specifying verify callback function
    var verifyCallback = function (response) {
        console.log(response);
    };
    return (
        <Layout>
            <Helmet>
                <title></title>

                <meta name="description" content="Jobs" />

                <meta property="og:type" content="website" />
                <meta property="og:url" content={url} />
                <meta property="og:title" content="Jobs" />
                <meta
                    property="og:description"
                    content="Jobs"
                />
                <meta property="og:image" content={urlimage + "/logo.svg"} />
                <meta property="twitter:card" content="summary_large_image" />
                <meta property="twitter:url" content={url} />
                <meta property="twitter:title" content="Jobs" />
                <meta
                    property="twitter:description"
                    content="Jobs"
                />
                <meta property="twitter:image" content={urlimage + "/logo.svg"} />
            </Helmet>




            <div className="container form-product">
                <div className="col-md-12 px-0 py-5">
                    <Card className="product color--card">
                        <h4 className="text-white font-weight-bolder mb-3">
                          Apply for A job
                        </h4>
                        <p className="text-white">
                            <small>
                                Fill up the form our team will get back to you within 24 Hours
                            </small>
                        </p>
                        <form
                            onSubmit={handleSubmit}
                            name="jobs"
                            method="post"
                            data-netlify="true"
                            data-netlify-recaptcha="true"
                            data-netlify-honeypot="bot-field"
                            action="/thank-you"
                        >
                            <input type="hidden" name="form-name" value="jobs" />

                            <Form.Row className="mb-4">
                                <div className="col-md-3 mb-4">
                                    <Form.Label className="font-wight-bolder text-white">
                                        First Name*
                                    </Form.Label>
                                    <Form.Control
                                        className="py-4"
                                        placeholder="First Name"
                                        id="firstname"
                                        type="text"
                                        name="firstname"
                                        onChange={handleChange}
                                        value={formState.firstname}
                                        required
                                    />
                                </div>
                                <div className="col-md-3 mb-4">
                                    <Form.Label className="font-wight-bolder text-white">
                                        Last Name*
                                    </Form.Label>
                                    <Form.Control
                                        className="py-4"
                                        placeholder="Enter your last name"
                                        id="lastname"
                                        type="text"
                                        name="lastname"
                                        onChange={handleChange}
                                        value={formState.lastname}
                                        required
                                    />
                                </div>
                                <div className="col-md-6 mb-4">
                                    <Form.Label className="font-wight-bolder text-white">
                                        Phone*
                                    </Form.Label>
                                    <Form.Control
                                        className="py-4"
                                        type="tel"
                                        placeholder="Enter your phone"
                                        id="phone"
                                        name="phone"
                                        onChange={handleChange}
                                        value={formState.phone}
                                        required
                                    />
                                </div>
                                <div className="col-md-6 mb-4">
                                    <Form.Label className="font-wight-bolder text-white">
                                        Email*
                                    </Form.Label>
                                    <Form.Control
                                        className="py-4"
                                        type="email"
                                        placeholder="Enter your email address"
                                        id="email"
                                        name="email"
                                        onChange={handleChange}
                                        value={formState.email}
                                        required
                                    />
                                </div>

                                <div className="col-md-6 mb-4">
                                    <Form.Label className="font-wight-bolder text-white">
                                        Job Being Applied For*
                                    </Form.Label>
                                    <Form.Control
                                        className="py-4"
                                        type="text"

                                        id="job"
                                        name="job"
                                        onChange={handleChange}
                                        value={formState.job}
                                        required
                                    />
                                </div>
                                <div className="col-md-6 mb-4">
                                    <Form.Label className="font-wight-bolder text-white">
                                        CV*
                                    </Form.Label>
                                    <input type="file" name="resume" id="resume" onChange={handleChange}
                                        value={formState.resume} />


                                </div>

                            </Form.Row>

                            <Recaptcha
                                ref={recaptchaRef}
                                sitekey="6LdwPXYbAAAAAMgj5Nq"
                                size="normal"
                                id="recaptcha-google"
                                onChange={() => setButtonDisabled(false)}
                            />
                            <InputGroup className="my-3">
                                <InputGroup.Append>
                                    <Button
                                        type="submit"
                                        variant="outline-secondary"
                                        className="text-white border-white p-3"
                                        disabled={buttonDisabled}
                                    >
                                        Send Message
                                    </Button>
                                </InputGroup.Append>
                            </InputGroup>


                        </form>         </Card>
                </div>
            </div>
        </Layout>
    )
}


hi @userweb , it’s possible someone might have suggestions on what you can do to fis this based on your code, but unlikely! i do think we need a little more information. What have you already tried?

1 Like

I still looking for any solution

Hi @userweb,

Is there a website link that we can check?

No actually if you can see the used code that’s what I am using

We can’t do much with that. Could you please link to a Netlify site and a Git repo?

Hi, @userweb. We have a support guide about this here:

Would you please take a look at that guide first? If there are still questions after reading that, please send us the information requested at the end of the guide:

  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. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse