How do I handle undefined state in react when the user hits cancel on file selection?

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);

enter image description here

Answer

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;
            }}

Advertisement

Answer