Source

components/FormInputs/ImageInput/ImageInput.js

  1. // NPM module imports
  2. import React from "react";
  3. import PropTypes from "prop-types";
  5. // Style imports
  6. import styles from "./ImageInput.module.scss";
  8. /**
  9.  * Renders the ImageInput component.
  10.  * Allows the user to select an image from their file system.
  11.  * @component
  12.  * @category FormInputs
  13.  * @author Dan Levy <danlevy124@gmail.com>
  14.  */
  15. const ImageInput = (props) => {
  16.     return (
  17.         <div>
  18.             <input
  19.                 id={props.inputName}
  20.                 className={styles.imageInput}
  21.                 type="file"
  22.                 name={props.inputName}
  23.                 accept="image/*"
  24.                 hidden
  25.                 onChange={props.onChange}
  26.                 files={props.file}
  27.                 required={props.isRequired}
  28.             />
  29.             <label className={styles.imageInputLabel} htmlFor={props.inputName}>
  30.                 {props.buttonTitle}
  31.             </label>
  32.         </div>
  33.     );
  34. };
  36. // Prop types for the ImageInput component
  37. ImageInput.propTypes = {
  38.     /**
  39.      * The name for the input
  40.      */
  41.     inputName: PropTypes.string.isRequired,
  43.     /**
  44.      * The button title
  45.      */
  46.     buttonTitle: PropTypes.string.isRequired,
  48.     /**
  49.      * The file that is associated with this input
  50.      */
  51.     file: PropTypes.object,
  53.     /**
  54.      * Indicates if this input is required as part of its associated form
  55.      */
  56.     isRequired: PropTypes.bool.isRequired,
  58.     /**
  59.      * On input change handler
  60.      */
  61.     onChange: PropTypes.func.isRequired,
  62. };
  64. export default ImageInput;