-
-
Save tmvst/eb4dfb941a518d6ee4c6e676d704b80f to your computer and use it in GitHub Desktop.
Netlify forms file upload via ajax issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from "react"; | |
export default function Home() { | |
const FORM_STATE_OPTIONS = { | |
IDLE: 0, | |
LOADING: 1, | |
DONE: 2, | |
ERROR: 3, | |
}; | |
const [formState, setFormState] = useState(FORM_STATE_OPTIONS.IDLE); | |
const processContactForm = async (event) => { | |
event.preventDefault(); | |
setFormState(FORM_STATE_OPTIONS.LOADING); | |
const contactForm = event.target; | |
let formData = new FormData(contactForm); | |
fetch("/", { | |
method: "POST", | |
headers: { "Content-Type": "multipart/form-data" }, | |
body: new URLSearchParams(formData).toString(), | |
}) | |
.then(() => { | |
console.log("Form successfully submitted"); | |
setFormState(FORM_STATE_OPTIONS.DONE); | |
event.target.reset(); | |
}) | |
.catch((error) => { | |
console.error(error); | |
setFormState(FORM_STATE_OPTIONS.ERROR); | |
}); | |
}; | |
return ( | |
<div className="relative bg-white" id="kontakt"> | |
<div className="bg-white py-8 lg:py-16"> | |
<form | |
name="careers-contact" | |
className="grid grid-cols-1 gap-y-6" | |
data-netlify="true" | |
onSubmit={processContactForm} | |
> | |
<input type="hidden" name="form-name" value="careers-contact" /> | |
<div> | |
<label htmlFor="full_name" className="sr-only"> | |
Meno | |
</label> | |
<input | |
type="text" | |
name="full_name" | |
id="full_name" | |
autoComplete="name" | |
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md" | |
placeholder="Meno" | |
required={true} | |
/> | |
</div> | |
<div> | |
<label htmlFor="email" className="sr-only"> | |
</label> | |
<input | |
id="email" | |
name="email" | |
type="email" | |
autoComplete="email" | |
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md" | |
placeholder="Email" | |
required={true} | |
/> | |
</div> | |
<div> | |
<label htmlFor="phone" className="sr-only"> | |
Telefónne číslo | |
</label> | |
<input | |
type="tel" | |
name="phone" | |
id="phone" | |
autoComplete="tel" | |
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md" | |
placeholder="Telefónne číslo" | |
required={true} | |
/> | |
</div> | |
<div> | |
<label htmlFor="message" className="sr-only"> | |
Správa | |
</label> | |
<textarea | |
id="message" | |
name="message" | |
rows={4} | |
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md" | |
placeholder="Správa" | |
required={true} | |
defaultValue={""} | |
/> | |
</div> | |
<div className=""> | |
<label htmlFor="cv" className="sr-only"> | |
CV | |
</label> | |
<input type="file" name="cv" id="cv" /> | |
</div> | |
<div className="flex items-center justify-center"> | |
{formState === FORM_STATE_OPTIONS.DONE && ( | |
<div className="bg-green-50 border border-green-100 rounded-md py-3 px-4"> | |
<span className="text-green-900"> | |
Vaša správa bola odoslaná. Ďakujeme! Ozveme sa o chvíľu. | |
</span> | |
</div> | |
)} | |
{formState === FORM_STATE_OPTIONS.ERROR && ( | |
<div className="bg-red-50 border border-red-100 rounded-md py-3 px-4"> | |
<span className="text-red-900"> | |
Pri spracovaní požiadavky nastala chyba. Použite prosím inú | |
formu kontaktu. | |
</span> | |
</div> | |
)} | |
{(formState === FORM_STATE_OPTIONS.IDLE || | |
formState === FORM_STATE_OPTIONS.LOADING) && ( | |
<button | |
type="submit" | |
className="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" | |
disabled={formState === FORM_STATE_OPTIONS.LOADING} | |
> | |
{formState === FORM_STATE_OPTIONS.IDLE && "Odoslať"} | |
{formState === FORM_STATE_OPTIONS.LOADING && "Odosielam ..."} | |
</button> | |
)} | |
</div> | |
</form> | |
</div> | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment