CODEWITHSUNDEEP
javascripthtmlreactjsstate
Christian
Christian

Reputation: 124

ReactJS: submit form onChange

I have a file input tag which I want to trigger a form submission when it's state changes (files are selected to upload).

The reason I want to trigger the form submission is because submission triggers validation of required elements.

export default function Add() {
    const [status, setStatus] = useState('Upload a menu')

    //Create a ref to access a DOM element
    const fileInput = useRef(null) //<input type='text' />
    const form = useRef(null) // <form></form>

    //Used by the onChange prop to handle changeEvents, like addEventListener('change', )
    function handleUploads() {


        //******What do I put in here?*****

    }

    function handleSubmit() {
        setStatus('Uploading...')
        const resto = document.getElementById('resto')
        //Reference to the node accessible at 'current' attribute of ref
        const files = fileInput.current.files

        //Create a shallow-copied Array from files
        const filesArray = Array.from(files)
        filesArray.map(img => {
            const storageRef = storage.ref()
            const fileRef = storageRef.child(`menus/${resto}/${img.name}`)
            fileRef.put(img).then((snapshot) => {
                setStatus('Added!')
            })
        })
    }

    return (
        <section id="add">
            <form name="form" id="form" onSubmit={handleSubmit} ref={form}>
                <input type="text" placeholder="Restaurant" id="resto" required />
                <input type="file" capture="environment" accept="image/*" id="file" multiple
                    ref={fileInput} onChange={handleUploads} required
                />
                <label htmlFor="file">{status}</label>
                <button type="submit">Submit</button>
            </form>
        </section >
    )
}

As I understand, I can't call handleSubmit() directly from handleUploads() as this will not trigger the browser "validation" of required values. Thus I have to make the browser think I am clicking a submit button.

Problem is, getting the form element by id does not trigger anything ``` document.getElementById("form").submit() ````

I found this solution which leads me to using refs to get the DOM element, and dispatchEvent to force a submission form.current.dispatchEvent(new Event("submit"))

But now the required validation that I wanted is not counted. What gives?

Upvotes: 0

Views: 3096

Answers (1)

Christian
Christian

Reputation: 124

The requestSubmit() function can be used to trigger input field validation and submission, however it is not compatible with all browsers so a fallback is needed

    //Check if requestSubmit() is available to current browser
    if (form.current.requestSubmit) {
        form.current.requestSubmit()
    }
    //If not, perform constraint validation and call submit function directly
    else {
        if (form.current.reportValidity()) {
                handleSubmit()
        }
    }

More info here:

  1. https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
  2. https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
  3. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation

Upvotes: 4

Related Questions