react-material-file-upload/lib/index.js

File upload component for React with Material UI components

import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import { Box, FormControl, Typography, Button, FormHelperText, Chip } from '@mui/material';
import { useDropzone } from 'react-dropzone';
import UploadFileIcon from '@mui/icons-material/UploadFile';
import { styled } from '@mui/material/styles';
import { jsx, jsxs } from 'react/jsx-runtime';

// src/index.tsx
var ListItem = styled("li")(({ theme }) => ({
  margin: theme.spacing(0.5)
}));
var FileListItem = ({ name, onDelete }) => /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Chip, { label: name, icon: /* @__PURE__ */ jsx(UploadFileIcon, {}), variant: "outlined", sx: { maxWidth: 200 }, onDelete }) });
var FileUpload = ({
  value,
  onChange,
  sx,
  title = "Drag 'n' drop some files here, or click to select files",
  buttonText = "Upload",
  typographyProps,
  buttonProps,
  disabled,
  maxSize,
  ...options
}) => {
  const { fileRejections, getRootProps, getInputProps, open } = useDropzone({
    ...options,
    disabled,
    maxSize,
    onDropAccepted: onChange,
    noClick: true,
    noKeyboard: true
  });
  const isFileTooLarge = maxSize !== void 0 && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
  const remove = (index) => {
    const files2 = [...value];
    files2.splice(index, 1);
    onChange(files2);
  };
  const files = value?.map((file, i) => /* @__PURE__ */ jsx(FileListItem, { name: file.name, onDelete: () => remove(i) }, file.name));
  return /* @__PURE__ */ jsxs(
    Box,
    {
      ...getRootProps(),
      sx: {
        border: 1,
        borderRadius: 1,
        borderColor: "rgba(0, 0, 0, 0.23)",
        paddingY: 3,
        paddingX: 1,
        "&:hover": {
          borderColor: disabled ? void 0 : "text.primary"
        },
        "&:focus-within": {
          borderColor: "primary.main",
          borderWidth: 2
        },
        ...sx
      },
      children: [
        /* @__PURE__ */ jsxs(
          FormControl,
          {
            error: isFileTooLarge,
            sx: { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" },
            children: [
              /* @__PURE__ */ jsx("input", { ...getInputProps() }),
              /* @__PURE__ */ jsx(CloudUploadIcon, { sx: { fontSize: 40 }, color: disabled ? "disabled" : "primary" }),
              /* @__PURE__ */ jsx(Typography, { variant: "caption", textAlign: "center", sx: { paddingY: 1 }, ...typographyProps, children: title }),
              /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: open, disabled, sx: { marginBottom: 1 }, ...buttonProps, children: buttonText }),
              /* @__PURE__ */ jsxs(FormHelperText, { children: [
                " ",
                fileRejections[0]?.errors[0]?.message,
                " "
              ] })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          Box,
          {
            component: "ul",
            sx: {
              display: "flex",
              justifyContent: "center",
              flexWrap: "wrap",
              listStyle: "none",
              p: 0.5,
              m: 0
            },
            children: files
          }
        )
      ]
    }
  );
};

export { FileUpload };
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map