upload input image react

Question

I have a form for creating a post with an image. I get this error message: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. Yet in several post found on the internet I saw that he was doing the same way as me. If anyone can help me that would be cool. thanks in advance.

const FormCreatePastry = () =>{
    const [ nameProduct, setNameProduct ] = useState("");
    const [ ingredient, setIngredient ] = useState("");
    const [ imageUrl, setImageUrl ] = useState();
    const [ price, setPrice ] = useState("");
    const [ nameShopPastry, setNameShopPastry ] = useState("--Choisir une boutique--");
    const [ controlForm, setControlForm ] = useState(false)

    const handleChange = (e) =>{
        const nameShop = e.target.value;
        setNameShopPastry(nameShop);
    }

    const sendForm = (e) =>{
        e.preventDefault();
        createPastryService(nameProduct, ingredient, imageUrl, nameShopPastry, price)
    }

    const uploadImage = (e) =>{
        const file = e.target.files;
        setImageUrl(file)
    }

    const cancelForm = (e) =>{
        e.preventDefault();
    }

    const cancelImage = (e) =>{
        e.preventDefault();
        setImageUrl(null)
    }

    const ErrorForm = () =>{
        if (controlForm === true) {
            return(
                <>
                    <p>Veuillez remplir tous les champs!</p>
                </>
            )
        }else{
            return null
        }
    }
    
    useEffect(()=>{
        console.log(imageUrl)  
        console.log(nameShopPastry)
        if (nameProduct.length < 1 || ingredient.length < 1 || nameShopPastry === "--Choisir une boutique--" || price === "" || imageUrl === "" ) {
            setControlForm(true)
        }else{
            setControlForm(false)
        }
    },[controlForm,nameShopPastry, ingredient, imageUrl, nameProduct, price])
    return(
        <form action="">
            <label htmlFor="Nom du produit:">
                Nom du produit:
                <input type="text" value={nameProduct} onChange={(e)=>setNameProduct(e.target.value)} />
            </label>
            <label htmlFor="Ingrédients">
                Ingrédients:
                <input type="text" value={ingredient} onChange={(e)=>setIngredient(e.target.value)}/>
            </label>
            <label htmlFor="">
                Prix:
                <input type="text" value={price} onChange={(e)=>setPrice(e.target.value)} />
            </label>
            <label htmlFor="Image du produit">
                Image du produit:
                <input type="file" value={imageUrl} onChange={uploadImage}/>
                <button onClick={cancelImage}>X</button>
            </label>
            <div>
                <p>Sélectionner une boutique</p>
                <select onChange={(e)=> handleChange(e)}>
                    <option value="--Choisir une boutique--">--Choisir une boutique--</option>
                    <option value="20">Pastry Paris </option>
                    <option value="23">Pastry Bordeaux</option>
                </select>
            </div>
            <div>
                <button disabled={controlForm} onClick={sendForm}>valider</button>
                <button onClick={cancelForm}>annuler</button>
            </div>
            <ErrorForm />
        </form>
    )
}

export default FormCreatePastry;

Answer 1

In React, an <input type="file"/> is always an uncontrolled component because its value can only be set by a user, and not programmatically. you can refer react doc.

so do not use value props on input that has a type file.

<input type="file" onChange={uploadImage}/>