How do I handle file change event in Ionic

Viewed 27

I am creating a form where I need to attach a file. I am using the IonInput component:

<IonList>
    <IonItem>
        <IonLabel position="stacked">Select application cover photo</IonLabel>
        <IonInput 
            accept="image/*" 
            type="file" 
            value={application.cover} 
            placeholder="Select application cover photo" 
            name="cover" 
            onIonChange={e => setApplication({
                ...application, 
                cover: e.target.files[0]
            })} 
       /> 
    </IonItem>
</IonList>

The selected file is correctly displaying inside of the IonInput but when I try to set it to the application state, I get the following error: e.target.files is undefined

I have tried to log out the target and as I suspected, the files property is not in there. I couldn't find any property where the files are stored. I tried running the same code but with regular input instead of IonInput and it works as expected.

Here are the versions I am using:

"@ionic/react": "^6.0.0",
"@ionic/react-router": "^6.0.0",
0 Answers
Related