I have a simple Input type= file. I am capturing the the selected file in state. Once a file is selected and the clear button is clicked it does not clear the state. This causes
{selectedFile.name}
to throw an undefined error when the user clicks cancel during the next file selection.
Is there a way to make my clear button actually clear selectedFile state? or a way to handle the error so that a file can still be selected?
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import AddIcon from "@mui/icons-material/Add";
import { withStyles } from "@material-ui/core/styles";
import Fab from "@mui/material/Fab";
const styles = () => ({
root: {
boxSizing: "border-box",
margin: "0",
padding: "0"
},
textInput: {
textAlign: "center"
},
test: {
fontSize: "3rem"
}
});
const CampaignForm = props => {
const { classes } = props;
const [selectedFile, setSelectedFile] = useState();
const [isFileSelected, setIsFileSelected] = useState(false);
const handleClear = event => {
setIsFileSelected(false);
setSelectedFile("");
console.log(selectedFile.name);
};
const handleFileSelection = event => {
setSelectedFile(event.target.files[0]);
setIsFileSelected(true);
};
return (
<div className={classes.root}>
<h1 className={classes.textInput}>Text Campaign</h1>
<div className={classes.textInput}>
<label htmlFor='upload-csv'>
<input
style={{ display: "none" }}
id='upload-csv'
disabled={isFileSelected}
name='upload-csv'
type='file'
onChange={handleFileSelection}
/>
<Fab
color='primary'
size='small'
disabled={isFileSelected}
component='span'
aria-label='add'
variant='extended'>
<AddIcon /> Add CSV
</Fab>
</label>
<br />
{isFileSelected ? (
<div>
<br />
<button onClick={handleClear}>clear</button>
<p>{selectedFile.name}</p>
</div>
) : (
<p>No file added</p>
)}
</div>
</div>
);
};
CampaignForm.propTypes = { classes: PropTypes.object.isRequired };
export default withStyles(styles)(CampaignForm);First You need to set the default null value to selectedFile state.
const [selectedFile, setSelectedFile] = useState(null);
Then, in handleClear Function set,
setSelectedFile(null);
and final the condition should be
{isFileSelected ? (
<div>
<br />
<button onClick={handleClear}>clear</button>
<p>{selectedFile.name}</p>
</div>
) : (
selectedFile === null && <p>No file added</p>
)}
[optional]: the default file select event does not select the same file again, so if you need to allow the user to select the same file then add following property in the input tag:
onClick={(event) => {
event.target.value = null;
}}
you have to do, in handleClear function, im guessing that setSelectedFile(event.target.files[0]); is json object not string,
setSelectedFile({});
as you are setSelectedFile(""); setting string to it, string dont have .name only json have that
<p>{selectedFile.name}</p>
so "".name name would be undefined, which is correct, your fix would be this, hope it helps
const handleClear = event => {
setIsFileSelected(false);
setSelectedFile({});
console.log(selectedFile.name);
};