Material-ui: [फ्लैटबटन] फ़ाइल इनपुट बटन के साथ काम नहीं कर रहा है।

संस्करण 0.7.5 पर।

@nschaubeck क्या दस्तावेज़ साइट पर बटन आपके लिए काम करता है?

@ hai-cea हाँ यह करता है। ऐसा लग रहा था कि <input> तत्व _in_ DOM भी नहीं था, जैसे बटन तत्व अपने बच्चों को प्रस्तुत नहीं कर रहा था।

मुझे भी यह समस्या हो रही है। @nschaubeck क्या आपको कभी कोई समाधान मिला?

@ ई-मोनसन मैं वास्तव में समाधान खोजने में सक्षम नहीं था।

यह काम!
चलो शैलियों = {
उदाहरण छवि इनपुट: {
कर्सर: 'पॉइंटर',
स्थिति: 'पूर्ण',
शीर्ष: '0',
नीचे: '0',
दाएं: '0',
बाएं: '0',
चौड़ाई: '100%',
अस्पष्टता: '0'
}
}

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

@nihildaga जो केवल क्रोम पर काम करता है क्योंकि इनपुट फ़ील्ड को बटन में रखना W3C युक्ति का हिस्सा नहीं है।

एक अलग समाधान यह है कि बटन को छिपे हुए इनपुट फ़ील्ड के क्लिक ईवेंट को केवल आग लगाना है।

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}/>
  );
}

मैं देख रहा हूं कि यह समस्या अभी भी ठीक नहीं हुई है ...
दस्तावेज़ में प्रस्तावित समाधान केवल क्रोम में काम करता है जैसा @Wofiel ने कहा। (अभी भी बीटा 15-0.2 में मामला)

क्या htmlFor की तरह <FlatButton> (या <RaisedButton> ) पर सेट करने में सक्षम होना बेहतर नहीं होगा, इनपुट फ़ाइल में एक आईडी सेट करें और बस इतना ही? आपको क्लिक को मैन्युअल रूप से ट्रिगर करने की आवश्यकता नहीं होगी...
मैंने लेबल में बटन लपेटने की कोशिश की, दुर्भाग्य से, यह काम नहीं करता है :(

अभी @Wofiel सबसे अच्छा समाधान प्रतीत होता है।

जब मूल समाधान नहीं है तो इसे बंद क्यों करें

हाय @Wofiel आप एक स्टेटलेस घटक में रेफरी के बिना इस तकनीक का उपयोग करने का सुझाव कैसे देते हैं?

@excalliburbd आप आईडी और jQuery का उपयोग कर सकते हैं, जो काम करना चाहिए

प्रतिक्रिया में @ बिरसन डोम हेरफेर? क्या ये ठीक है?

मैं आमतौर पर इसकी अनुशंसा नहीं करता, लेकिन मुझे लगता है कि एक क्लिक ईवेंट ट्रिगर करना है जो इस मामले में ठीक होना चाहिए

@Wofiel जैसा संस्करण 15 प्रतिक्रिया के साथ किया जा सकता है?

@Wofiel इस समाधान के साथ console.log(e.target.value) एक प्राप्त करता है
सी:\नकलीपथ\imagefilename.png
सबसे अच्छा समाधान है
e.target.files[0]

अगर कोई और इस मुद्दे पर आता है तो मैंने पाया कि आप containerElement को RaisedButton $ पर सेट कर सकते हैं ताकि बच्चे के रूप में इनपुट तत्व रखने के लिए कुछ और उपयुक्त हो। उदाहरण के लिए एक लेबल ;-)

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

@ थॉमस 101 धन्यवाद! मुझे अभी इस मुद्दे का सामना करना पड़ा है और आपका समाधान काम करता प्रतीत होता है।
बहुत बढ़िया :)

@ थॉमस 101 टिप के लिए धन्यवाद। इससे मेरी समस्या भी हल हो गई। वास्तविक

बस @ थॉमस 101 उत्तर का पूरक, जब मैं घटकों को उनके उदाहरण की तरह घोषित करता हूं, तो मेरा उठाया बटन फ़ाइल इनपुट के साथ प्रस्तुत किया जाता है। इसे रोकने के लिए, बस फ़ाइल इनपुट शैली को display: none पर सेट करें। :)

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

@andreyluiz किन परिस्थितियों में यह काम नहीं करता है:

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

मुझे दस्तावेज़ साइट उदाहरण के साथ कोई समस्या नहीं मिली है, लेकिन स्पष्ट रूप से कई अन्य लोगों के पास यह समस्या है!

क्या यह आपके द्वारा प्रदान किए गए कोड के साथ नहीं दिखाने के लिए फ़ाइल इनपुट के अनुरूप है?

वह अजीब है। मेरे मामले में यह सामग्री-यूआई बटन के अंदर एक फ़ाइल इनपुट प्रस्तुत करता है।

@andreyluiz हां, डॉक्स साइट उदाहरण (http://www.material-ui.com/#/components/raised-button) के साथ कोई दृश्यमान <input> नहीं है। आप किस ब्राउज़र और संस्करण के साथ परीक्षण कर रहे हैं?

नवीनतम क्रोम संस्करण।

मैं @andreyluiz से सहमत हूं, the साथ ही दिखाता है, लेकिन style={{display: 'none'}} के साथ, यह एक आकर्षण की तरह काम करता है!

टीएल; डॉ

<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>

उपरोक्त समाधान अब और काम नहीं कर रहा है। मैं नई v1 बीटा शाखा का उपयोग कर रहा हूं और निम्नलिखित मेरे लिए काम नहीं करते हैं

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

मुझे कंसोल में निम्न त्रुटि मिलती है:

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.

किसी को उपाय पता है? वैसे भी इस तरह के एक सामान्य उपयोग के मामले को मूल रूप से समर्थित नहीं किया जाना चाहिए? (गैर-हैकी तरीके से)

@ आदित्य आनंद 1 निम्नलिखित कोड काम करना चाहिए

<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>