gistfile1.txt

import React from 'react';
import { Button, Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import DeleteIcon from '@material-ui/icons/Delete';
import CoreService from '../../Services/CoreService';
import FileService from '../../Services/FileService';

const useStyles = makeStyles(theme => ({
  container: {
    marginTop: theme.spacing(3, 1, 0, 1),
    width: 250,
    flexDirection: 'column',
    display: 'flex'
  },
  label: {
    fontSize: '0.75rem',
    fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    fontWeight: 500,
    lineHeight: 1,
    color: 'rgba(0, 0, 0, 0.54)'
  },
  buttons: {
    flexDirection: 'row', 
    display: 'flex', 
    paddingTop: theme.spacing(1)
  },
  buttonLeft: {
    width: 120,
  },
  buttonRight: {
    width: 77,
    marginLeft: theme.spacing(1),
  },
  download: {
    width: 250,
    paddingTop: theme.spacing(1)
  }
}));

function FileInput(props) {
  const classes = useStyles();

  const handleChange = async (event) => {
    var extension = event.target.files[0].name.substr(event.target.files[0].name.lastIndexOf('.'))
    var httpResponse = await CoreService.UploadFile(event.target.files[0])
    if(httpResponse.ok) {
      var response = await httpResponse.json();
      props.handleChange({fileId: response.id, fileGuid: response.guid, fileExtension: extension});
    } else {
      var error = await httpResponse.text();
      console.error(error);
    }
  }

  const removeFile = () => {
    props.handleChange({fileId: null, fileGuid: null});
  }

  var label = props.displayName.concat(props.isRequired ? '*' : '');
  return <Box className={classes.container}>
    <label className={classes.label}>
      {label}
    </label>
    <input
      color="primary"
      accept={props.allowedFileExtensions.concat(props.allowedFileMimeTypes).join(',')}
      type="file"
      onChange={handleChange}
      id="icon-button-file"
      style={{ display: 'none', }}
    />
    <Box className={classes.buttons}>
      <label htmlFor="icon-button-file">
        <Button variant="contained" style={{width: (props.value && props.value.fileId) ? 77 : 250}} className={classes.buttonLeft} component="span" size="small" color="primary">
          <CloudUploadIcon />
        </Button>
      </label>
      {
        (props.value && props.value.fileId) ? (
          <React.Fragment>
            <a target="_blank" rel="noopener noreferrer" style={{textDecoration: 'none'}}  href={FileService.GetUrl(props.value)}>
              <Button variant="contained" className={classes.buttonRight} component="span" size="small">
                <CloudDownloadIcon />
              </Button>
            </a>
            <Button variant="contained" onClick={removeFile} className={classes.buttonRight} component="span" size="small" color="secondary">
              <DeleteIcon />
            </Button>
          </React.Fragment>
        ) : (null) 
      }
    </Box>
  </Box>;
}

export default FileInput;