function FilePicker()

in src/components/Utilities/FilePicker.js [125:271]
135 lines of code
4 McCabe index (conditional complexity)

function FilePicker(props) {
  const classes = useStyles();
  const [fileName, setFileName] = useState(null);
  const [newFile, setNewFile] = useState(null);
  const [inProgress, setInProgress] = useState(false);
  const [fileLabel, setFileLabel] = useState('No File Selected');
  const [uploadPercent, setUploadPercent] = useState(0);
  const bucketName = useSelector(state => state.mapsConfig.bucket);
  const selectedPrefix = useSelector(state => state.mapsConfig.prefix);
  const { alertHandler, closeHandler } = props;

  const handleClose = () => {
    if (!inProgress) {
      setFileLabel('No File Selected')
      setFileName(null);
      setNewFile(null);
      setUploadPercent(0);
    }
    closeHandler();
  };

  const handleFileInputClick = (event) => {
    document.getElementById('hiddenFileInput').click();
  };

  const startUpload = () => {
      setInProgress(true);
      setTimeout(handleUpload, 2000);
  };

  const handleFileSelection = (e) => {
    e.preventDefault();
    const file = e.target.files[0];
    if (file !== null) {
      setNewFile(file);
      setFileName(file.name);
      setFileLabel(file.name);
    }
  };

  const uploadObject = () => {
    Auth.currentUserCredentials()
    .then((response) => {
        AWS.config.credentials = response;
        AWS.config.region = awsmobile['aws_cognito_region'];
        var upload = new AWS.S3.ManagedUpload({
            params: {
                Bucket: bucketName,
                Key: `${selectedPrefix}${fileName}`,
                Body: newFile,
                ContentDisposition: `attachment; filename=\"${fileName}\"`
            }
        });

        upload.on('httpUploadProgress', (event) => {
            setUploadPercent(event.loaded * 100 / event.total);
        });

        upload.promise()
        .then((response) => {
            closeHandler();
            setInProgress(false);
            setFileLabel('No File Selected');
            setFileName(null);
            setNewFile(null);
        })
        .catch((uploadError) => {
            console.log('Upload error', uploadError);
        });
    })
    .catch((err) => {
        console.log('Auth error', err);
    });
  }

  const handleUpload = () => {
    let fileName = newFile.name;
    let version = -1;

    fileName = selectedPrefix+fileName; 

    UploadObjRequest(bucketName, fileName, version)
      .then((response) => {
          if (response.data.body['allowCheckIn']) {
              uploadObject();
          } else {
            alertHandler('error', 'Error', [response.data.body['reason']]);
            closeHandler();
            setInProgress(false);
            setFileLabel('No File Selected');
            setFileName(null);
            setNewFile(null);
          }
      })
      .catch((error) => {
        console.log(error);
        alertHandler('error', 'Error', ['There was an error uploading your file.  Please try again.']);
      });
  };

  return (
    <>
      <Dialog
        open={props.open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        maxWidth='md'
        fullWidth={true}
        PaperProps={{ style: { backgroundColor: "#343a40", elevation: "3", overflowY: 'inherit' } }}
      >
        <DialogContent>
          <div className={clsx({[classes.loading]: inProgress})}>
            <Fade in={inProgress} timeout={{enter: 500}}>
                    <div className={clsx({[classes.hide]: !inProgress})}>
                        <LinearProgressWithLabel className={clsx({[classes.hide]: !inProgress}, {[classes.loadingBar]: inProgress})} value={uploadPercent}/>
                        <span className={clsx(classes.span)}>
                            Uploading <strong style={{color: "#17a2b8"}}>{fileName}</strong>
                        </span>
                    </div>
            </Fade>
            </div>
            <center>
              <div className={clsx(classes.createJobRoot, {[classes.hide]: inProgress})}>
                <Button variant="contained" className={classes.customButton} onClick={handleFileInputClick}>Browse</Button>
                <label style={{marginBottom: '10px', marginLeft: '10px', marginRight: '10px', color: 'white', fontsize: '20px'}} className='fileText'>{fileLabel}</label>
                <input
                  type="file"
                  id="hiddenFileInput"
                  onChange={handleFileSelection}
                  accept=".cmaf, .dash, .hls, .mp4, .f4v, .mxf, .mov, .ismv, .raw, .av1, .avc, .hevc, .mpeg-2, .avi, .mkv, .webm"
                  style={{display: 'none'}}
                />
              </div>
              <br/>
            </center>
        </DialogContent>

        <center>
          <Button variant='outlined' onClick={startUpload} disabled={fileName === null} className={classes.customButton} style={{display: inProgress ? 'none' : 'inline'}}>
              Upload
          </Button>
        </center>
      </Dialog>
  </>
  );
}