Proper way to change Form.Control text with custom onChange

Question

I noticed today that while using a custom onChange in a Form.Control that the text in the field no longer changes when a file is selected. I have looked through the documentation on the Git HERE but it doesnt say how to change the text with a custom event.

my code:

    // handles when a file has been selected. 
    const handleUploadChange = (event) =>
    {
        setFileToUpload(event.target.files[0]);
        setIsFilePicked(true);
    }

    // Footer containing buttons and file selection
    const CardFooter = () =>{
        return(
            <Card.Footer>
                <div style={{width:"80%", display : "flex", flexDirection: "row", justifyContent: "center"}}>
                    <div style={{marginRight: "40px"}}>
                        <Form.Group controlId="formFile" className="mb-3">
                            <Form.Control type="file" custom onChange={handleUploadChange} label={fileToUpload === null ? "No File Selected" : fileToUpload.name}/>
                        </Form.Group>
                    </div>
                    <div className="btn-red" style={{marginRight: "40px"}}>
                        <Button disabled={fileToUpload === null} onClick={()=>{setFileToUpload(null); setIsFilePicked(false);}}>Clear</Button>
                    </div>
                    <div>
                        <Button disabled={(fileToUpload === null) || (fileToUpload.size >= maxUploadSizeInBytes)} onClick={()=>handleSubmit(fileToUpload)}>Upload</Button>
                    </div>
                </div>
            </Card.Footer>
        )
    }

As you can see here, once a file is selected, my change event happens, but the selection box still reads "No file chosen". I have attempted label, text, displayName , and placeholder like so: label={fileToUpload === null ? "No File Selected" : fileToUpload.name}

Does anyone know the proper prop to use with a custom onChange ?

The text shown inside the input, when type="file" is managed automatically and is located. Why do you need a custom text? — Igor Gonak, Jun 01 '22 at 06:31
I dont need a custom text, but when I use a custom onChange, the text never changes from "No file chosen" to ""sample.pdf" or whichever file is chosen. The image shows a file is selected by grabbing the data points from it, but the file selector box still shows "No File Chosen" when one actually is selected. — Chip Brommer, Jun 01 '22 at 12:59
Can you look into my sandbox? I copy/pasted your code and it works on my side. Where is the difference to yours? — Igor Gonak, Jun 01 '22 at 13:19
@IgorGonak I think you linked the wrong sandbox below, it takes to a random number generator. — Chip Brommer, Jun 01 '22 at 13:56

score 0 · Answer 1 · answered Jun 01 '22 at 06:49

You can't control input of type "file" in React. When you choose a file, the text/"label" should automatically be updated. You don't have to manage it. Just set the state on select and read the state on submission. To fix your clear button, you could use useRef:

const fileInputRef = useRef(null);
...
<Form.Control ref={fileInputRef} ...>
...
<Button onClick={() => {
    setFileToUpload(null);
    fileInputRef.current.value = null;
}}>
    Clear
</Button

Also consider following:

You don't need your "isFilePicked" state. It can be derived from "fileToUpload" with Boolean(fileToUpload).
There is no Form.Control custom property.
Nore there is a Form.Control label property. If you need a label, add Form.Label to it. You can hide the file input and style your own input solution if you want to.

Codesandbox:

https://codesandbox.io/s/beautiful-vaughan-zn68t

Proper way to change Form.Control text with custom onChange

1 Answers1