Material-ui: [FlatButton] File input not working with button.

[actionnick]

With this...

<FlatButton primary={true} label="Choose an Image">
  <input type="file" id="imageButton"></input>
</FlatButton>

I end up with a button that doesn't actually render a file input field in the dom (clicking on the button does not open up the file dialog).

[actionnick]

On version 0.7.5.

[hai-cea]

@nschaubeck Does the button on the doc site work for you?

[actionnick]

@hai-cea Yes it does. It seemed like there wasn't even an <input> element _in_ DOM, like the button element wasn't rendering it's children.

[e-monson]

I'm having this problem as well. @nschaubeck Did you ever find a solution?

[actionnick]

@e-monson I was actually not able to find a solution.

[nikhildaga]

this works!
let styles = {
exampleImageInput: {
cursor: 'pointer',
position: 'absolute',
top: '0',
bottom: '0',
right: '0',
left: '0',
width: '100%',
opacity: '0'
}
}

      <FlatButton label="Choose an Image" primary={true}>
        <input id="imageButton" style={styles.exampleImageInput} type="file"></input>
      </FlatButton>

[Wofiel]

@nikhildaga That only works on Chrome as placing input fields into buttons is not part of the W3C spec.

A different solution is to make the button just fire the click event of a hidden input field.

handleChange: function(e){
  console.log(e.target.value)
},
_openFileDialog: function(){
  var fileUploadDom = React.findDOMNode(this.refs.fileUpload);
  fileUploadDom.click();
},
render: function() {
  return (
    <FlatButton
      label="Upload file"
      onClick={this._openFileDialog}/>
    <input
      ref="fileUpload"
      type="file" 
      style={{"display" : "none"}}
      onChange={this._handleChange}/>
  );
}

[Birssan]

I see this issue is still not fixed correctly...
The solution proposed in the doc only works in Chrome as @Wofiel said. (still the case in beta 15-0.2)

Wouldn't it better to be able to set like a htmlFor to the <FlatButton> (or <RaisedButton>), set an Id to the input file and that's all ? You wouldn't need to trigger the click manually...
I tried wrapping the button in the label, unfortunately, that doesn't work :(

Right now @Wofiel seems to be the best solution.

[mewsu]

Why close this when there is not a native solution

[excalliburbd]

hi @Wofiel how do you suggest using this technique without refs in a stateless component

[Birssan]

@excalliburbd You can use id and Jquery, that should work

[excalliburbd]

@Birssan dom manipulation in react? is that okay?

[Birssan]

I would not recommand it usually, but I think to trigger a click event that should be ok in this case

[juandav]

@Wofiel As can be done with version 15 react?

[code-by]

@Wofiel with this solution console.log(e.target.value) one receive
C:\fakepath\imagefilename.png
Best solutions is
e.target.files[0]

[Thomas101]

If anyone else comes across this issue I found that you can set containerElement on the RaisedButton to be something more suited to having an input element as a child. For example a label ;-)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" />
</RaisedButton>

[w3nda]

@Thomas101 Thanks! I've just encountered this issue and your solution seems to work.
Awesome :)

[trialTrail]

@Thomas101 Thanks for the tip. This solved my problem as well. The actual

[andreyluiz]

Just complementing @Thomas101 answer, when I declare the components like his example, my RaisedButton is rendered with a file input inside. To prevent this, just set the file input style to display: none. :)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" style={{ display: 'none' }} />
</RaisedButton>

[mbrookes]

@andreyluiz under what circumstances does this not work:

<RaisedButton label='My Label'>
    <input type="file" />
</RaisedButton>

I haven't been able to find an issue wit the docs site example, but clearly many others have this issue!

[andreyluiz]

Is it suposed to the file input to not show with the code you provided?

That's weird. In my case it renders an file input inside the material-ui button.

[mbrookes]

@andreyluiz Yes, with the docs site example (http://www.material-ui.com/#/components/raised-button) there's no visible <input>. What browser & version are you testing with?

[andreyluiz]

The latest Chrome version.

[bachrc]

I agree with @andreyluiz , the shows as well, but with a style={{display: 'none'}}, it works like a charm !

[sonaye]

tl;dr

<RaisedButton
  containerElement="label"
  icon={<Icons.FileUpload />} // material-ui-icons
  labelColor="white"
  primary
  style={{ minWidth: 40, width: 40 }}>
  <input
    onChange={e => this.upload(e.target.files[0])}
    style={{ display: 'none' }}
    type="file"
  />
</RaisedButton>

[AdityaAnand1]

The above solution doesn't seem to work any more. I'm using the new v1 beta branch and the following doesn't work for me

                        <Button dense
                                containerElement="label"
                                label="label">
                            <input
                                onChange={e => this.upload(e.target.files[0])}
                                style={{display: 'none'}}
                                type="file"
                            />
                        </Button>

I get the following error in the console:

Warning: React does not recognize the `containerElement` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containerelement` instead.
If you accidentally passed it from a parent component, remove it from the DOM element.

Anybody know a workaround? Anyways shouldn't such a common use case be natively supported? (in a non-hacky way)

[itelofilho]

@AdityaAnand1 the following code should work

<Button
            raised
            component="label" <---- use component instead of containerElement
            color="primary"
            className={buttonClassname}
            disabled={this.state.loading}
            onClick={this.handleButtonClick}
          >
            {'Upload'}
            <FileUpload className={classes.rightIcon} />
            <input
              onChange={e => console.log(e.target.files[0])}
              style={{ display: 'none' }}
              type="file"
            />
</Button>