@eureca/eureca-ui/src/components/Buttons/file-upload.js

UI component library of Eureca's user and admin apps

import React, { useState, useEffect, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';

import { Typography, Box } from '@material-ui/core';

import { FaCloudUploadAlt } from 'react-icons/fa';

import { colors } from '../../theme/colors';

import { Button } from './button';
import { Flex } from '../Flex';

const linkStyle = {
  color: colors.green1,
  textDecoration: 'underline',
  cursor: 'pointer',
};

function chooseFileType(fileType) {
  switch (fileType) {
    case 'audio':
      return 'audio/*';
    case 'video':
      return 'video/*';
    case 'image':
      return 'image/*';
    case '':
      return '*';
    default:
      return fileType;
  }
}

function FileUpload({ fileType = '', onChange, ...props }) {
  const [files, setFiles] = useState([]);
  const fileUploaderRef = useRef();
  const onChangeFunc = useCallback(
    (...args) => {
      if (onChange) {
        onChange(args);
      }
    },
    [onChange]
  );

  function handleUploadClick() {
    fileUploaderRef.current.click();
  }

  function handleFileUpload(event) {
    if (event.target.files.length > 0) {
      setFiles([...files, event.target.files[0]]);
    }
  }

  function handleReplaceFile(event, index) {
    const tempArray = [...files];
    if (event.target.files.length > 0) {
      tempArray[index] = event.target.files[0];
      setFiles(tempArray);
    }
  }

  function removeFile(index) {
    const tempFiles = [...files];
    tempFiles.splice(index, 1);
    setFiles([...tempFiles]);
  }

  useEffect(() => {
    onChangeFunc(files);
  }, [onChangeFunc, files]);

  return (
    <Flex flexDirection={['column', 'row']} {...props}>
      <Button
        variant="outlined"
        onClick={handleUploadClick}
        type="button"
        data-testid="file-upload-button"
      >
        <Flex mr={1} alignCenter justifyCenter>
          <FaCloudUploadAlt size={17} />
        </Flex>
        <Typography variant="body2"> Carregar arquivos </Typography>
        <input
          type="file"
          id="fileUploader"
          accept={chooseFileType(fileType)}
          ref={fileUploaderRef}
          onChange={handleFileUpload}
          style={{ display: 'none' }}
        />
      </Button>
      <Flex ml={1}>
        {files.map((file, index) => {
          return (
            <Flex directionRow mt={2} key={`file-array-${index}`}>
              <Typography variant="h5" style={{ fontWeight: 400 }}>
                {file.name}
              </Typography>
              <Box mx={1}>
                <Typography style={linkStyle} onChange={e => handleReplaceFile(e, index)}>
                  Substituir
                  <input
                    type="file"
                    accept={chooseFileType(fileType)}
                    style={{ display: 'none' }}
                  />
                </Typography>
              </Box>

              <Typography style={linkStyle} onClick={() => removeFile(index)}>
                Remover
              </Typography>
            </Flex>
          );
        })}
      </Flex>
    </Flex>
  );
}

FileUpload.propTypes = {
  /** Tipo de arquivo que será enviado */
  fileType: PropTypes.oneOf(['audio', 'video', 'image', '']),
  /** Função disparada quando um arquivo é escolhido */
  onChange: PropTypes.func,
};

export { FileUpload };