FileInput

Since we haven't found a nice library for some nice file inputs, we've dcided to create our own fileInputs.

This component is actually extending the CustomInput component, but has some extra styles to make it look nice.

To make it work for your own purposes you will have to change the handleSubmit = e => { function which you will find inside components/CustomFileInput/CustomFileInput.js on lince 23.

Styles

You will find it's styles inside:

Examples

import React from "react";
// @material-ui/icons
import AttachFile from "@material-ui/icons/AttachFile";
import Layers from "@material-ui/icons/Layers";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import CustomFileInput from "components/CustomFileInput/CustomFileInput.js";

export default function FileInput() {
  return (
    <GridContainer>
      <GridItem xs={12} sm={3} md={3}>
        <CustomFileInput
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            placeholder: "Simple chooser..."
          }}
        />
        <CustomFileInput
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            placeholder: "Single File..."
          }}
          endButton={{
            buttonProps: {
              round: true,
              color: "primary",
              justIcon: true,
              fileButton: true
            },
            icon: <AttachFile />
          }}
        />
        <CustomFileInput
          multiple
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            placeholder: "Multiple File..."
          }}
          endButton={{
            buttonProps: {
              round: true,
              color: "info",
              justIcon: true,
              fileButton: true
            },
            icon: <Layers />
          }}
        />
      </GridItem>
    </GridContainer>
  );
};

Props

CustomFileInput.defaultProps = {
  multiple: false
};

CustomFileInput.propTypes = {
  id: PropTypes.string,
  endButton: PropTypes.object,
  startButton: PropTypes.object,
  inputProps: PropTypes.object,
  formControlProps: PropTypes.object,
  multiple: PropTypes.bool
};