How to enable file upload on React s Material UI simple input

Question

I am creating a simple form to upload file using electron-react-boilerplate with redux form  amp  material ui   The problem is that I do not know how to create input file field because material ui does not support upload file input   Any ideas on how to achieve this

User · Answer

newer MUI version    lt input   accept  image      className  classes input    style    display   none       id  raised-button-file    multiple   type  file    gt   lt label htmlFor  raised-button-file  gt     lt Button variant  raised  component  span  className  classes button  gt      Upload    lt  Button gt   lt  label gt

User · Answer

lt input type  quot file quot                 id  quot fileUploadButton quot                 style    display   none                    onChange  onFileChange            gt           lt label htmlFor   fileUploadButton   gt             lt Button             color  quot secondary quot              className  classes btnUpload              variant  quot contained quot              component  quot span quot              startIcon                  lt SvgIcon fontSize  quot small quot  gt                   lt UploadIcon   gt                 lt  SvgIcon gt                           gt               Upload            lt  Button gt           lt  label gt   Make sure Button has component  quot span quot   that helped me

User · Answer

Just the same as what should be but change the button component to be label like so    lt form id  uploadForm        action  http   localhost 8000 upload        method  post        encType  multipart form-data  gt       lt input type  file  id  sampleFile  style  display  none     gt       lt Button htmlFor  sampleFile  component  label  type   submit   gt Upload lt  Button gt    lt  form gt

User · Answer

Here an example  return        lt Box alignItems  center  display  flex  justifyContent  center  flexDirection  column  gt         lt Box gt           lt input accept  quot image   quot  id  quot upload-company-logo quot  type  file  hidden   gt           lt label htmlFor  quot upload-company-logo quot  gt             lt Button component  quot span quot   gt               lt Paper elevation  5  gt                 lt Avatar src  formik values logo  className  classes avatar  variant  rounded    gt               lt  Paper gt             lt  Button gt           lt  label gt         lt  Box gt       lt  Box gt

User · Answer

You need to wrap your input with  component  and add containerElement property with value  label        lt RaisedButton    containerElement  label      lt -- Just add me     label  My Label  gt      lt input type  file    gt   lt  RaisedButton gt    You can read more about it in this GitHub issue   EDIT  Update 2019   Check at the bottom answer from  galki  TLDR    lt input   accept  image      className  classes input    style    display   none       id  raised-button-file    multiple   type  file    gt   lt label htmlFor  raised-button-file  gt     lt Button variant  raised  component  span  className  classes button  gt      Upload    lt  Button gt   lt  label gt

User · Answer

Nov 2020 With Material-UI and React Hooks import   as React from  quot react quot   import     Button    IconButton    Tooltip    makeStyles    Theme    from  quot  material-ui core quot   import   PhotoCamera   from  quot  material-ui icons quot    const useStyles   makeStyles  theme  Theme    gt       root         quot  amp   gt    quot           margin  theme spacing 1                 input        display   quot none quot          faceImage        color  theme palette primary light             interface FormProps     saveFace  any     fileName Blob    gt  Promise lt void gt      callback taking a string and then dispatching a store actions    export const FaceForm  React FunctionComponent lt FormProps gt       saveFace      gt       const classes   useStyles      const  selectedFile  setSelectedFile    React useState null      const handleCapture      target    any    gt        setSelectedFile target files 0            const handleSubmit        gt        saveFace selectedFile           return        lt  gt         lt input         accept  quot image jpeg quot          className  classes input          id  quot faceImage quot          type  quot file quot          onChange  handleCapture          gt         lt Tooltip title  quot Select Image quot  gt           lt label htmlFor  quot faceImage quot  gt             lt IconButton             className  classes faceImage              color  quot primary quot              aria-label  quot upload picture quot              component  quot span quot             gt               lt PhotoCamera fontSize  quot large quot    gt             lt  IconButton gt           lt  label gt         lt  Tooltip gt         lt label gt  selectedFile   selectedFile name    quot Select Image quot   lt  label gt              lt Button onClick       gt  handleSubmit    color  quot primary quot  gt          Save        lt  Button gt       lt   gt

User · Answer

You can use Material UI s Input and InputLabel components  Here s an example if you were using them to input spreadsheet files  import   Input  InputLabel   from  quot  material-ui core quot    const styles       hidden        display   quot none quot          importLabel        color   quot black quot             lt InputLabel htmlFor  quot import-button quot  style  styles importLabel  gt       lt Input         id  quot import-button quot          inputProps              accept               quot  csv  application vnd openxmlformats-officedocument spreadsheetml sheet  application vnd ms-excel quot                      onChange  onInputChange          style  styles hidden          type  quot file quot        gt      Import Spreadsheet  lt  InputLabel gt

User · Answer

If you re using React function components  and you don t like to work with labels or IDs  you can also use a reference  const uploadInputRef   useRef null    return      lt Fragment gt       lt input       ref  uploadInputRef        type  quot file quot        accept  quot image   quot        style    display   quot none quot           onChange  onChange        gt       lt Button       onClick       gt  uploadInputRef current  amp  amp  uploadInputRef current click          variant  quot contained quot       gt        Upload      lt  Button gt     lt  Fragment gt

User · Answer

It is work for me    material-ui core     4 3 1          lt Fragment gt           lt input           color  primary            accept  image              type  file            onChange  onChange            id  icon-button-file            style    display   none                gt           lt label htmlFor  icon-button-file  gt             lt Button             variant  contained              component  span              className  classes button              size  large              color  primary             gt               lt ImageIcon className  classes extendedIcon    gt             lt  Button gt           lt  label gt         lt  Fragment gt

User · Answer

Here s an example using an IconButton to capture input  photo video capture  using v3 9 2   import React    Component  Fragment   from  react   import PropTypes from  prop-types    import   withStyles   from   material-ui core styles   import IconButton from   material-ui core IconButton   import PhotoCamera from   material-ui icons PhotoCamera   import Videocam from   material-ui icons Videocam    const styles    theme    gt         input            display   none             class MediaCapture extends Component       static propTypes             classes  PropTypes object isRequired             state            images              videos                 handleCapture      target      gt            const fileReader   new FileReader            const name   target accept includes  image      images     videos            fileReader readAsDataURL target files 0            fileReader onload    e    gt                this setState  prevState    gt                      name       prevState name   e target result                                          render             const   classes     this props           return                lt Fragment gt                   lt input                     accept  image                        className  classes input                      id  icon-button-photo                      onChange  this handleCapture                      type  file                    gt                   lt label htmlFor  icon-button-photo  gt                       lt IconButton color  primary  component  span  gt                           lt PhotoCamera   gt                       lt  IconButton gt                   lt  label gt                    lt input                     accept  video                        capture  camcorder                      className  classes input                      id  icon-button-video                      onChange  this handleCapture                      type  file                    gt                   lt label htmlFor  icon-button-video  gt                       lt IconButton color  primary  component  span  gt                           lt Videocam   gt                       lt  IconButton gt                   lt  label gt               lt  Fragment gt                      export default withStyles styles    withTheme  true    MediaCapture

User · Answer

The API  provides component for this purpose   lt Button   variant  quot contained quot    component  quot label quot   gt    Upload File    lt input     type  quot file quot      hidden     gt   lt  Button gt

[reactjs] How to enable file upload on React's Material UI simple input?

Examples related to reactjs

Examples related to electron

Examples related to react-redux

Examples related to redux-form

Examples related to formsy-material-ui