Material-ui: [FlatButton] L'entrée de fichier ne fonctionne pas avec le bouton.

Sur la version 0.7.5.

@nschaubeck Le bouton sur le site de documentation fonctionne-t-il pour vous ?

@hai-cea Oui. Il semblait qu'il n'y avait même pas d'élément <input> _in_ DOM, comme si l'élément bouton ne rendait pas ses enfants.

J'ai aussi ce problème. @nschaubeck Avez-vous déjà trouvé une solution ?

@e-monson Je n'ai en fait pas pu trouver de solution.

cela marche!
laisser styles = {
exempleImageInput : {
curseur : 'pointeur',
position : 'absolue',
haut : '0',
en bas : '0',
à droite : '0',
gauche : '0',
largeur : '100%',
opacité : '0'
}
}

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

@nikhildaga Cela ne fonctionne que sur Chrome car placer des champs de saisie dans des boutons ne fait pas partie de la spécification W3C.

Une autre solution consiste à faire en sorte que le bouton déclenche simplement l'événement click d'un champ de saisie masqué.

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

Je vois que ce problème n'est toujours pas résolu correctement...
La solution proposée dans la doc ne fonctionne que sous Chrome comme l'a dit @Wofiel . (toujours le cas dans la bêta 15-0.2)

Ne serait-il pas préférable de pouvoir définir comme un htmlFor sur le <FlatButton> (ou <RaisedButton> ), définir un Id sur le fichier d'entrée et c'est tout ? Vous n'auriez pas besoin de déclencher le clic manuellement...
J'ai essayé d'envelopper le bouton dans l'étiquette, malheureusement, cela ne fonctionne pas :(

En ce moment @Wofiel semble être la meilleure solution.

Pourquoi fermer ceci alors qu'il n'y a pas de solution native

salut @Wofiel comment suggérez-vous d'utiliser cette technique sans refs dans un composant sans état

@excalliburbd Vous pouvez utiliser id et Jquery, cela devrait fonctionner

Manipulation du dom @Birssan en réaction ? est-ce OK?

Je ne le recommanderais pas habituellement, mais je pense déclencher un événement de clic qui devrait être correct dans ce cas

@Wofiel Comme on peut le faire avec la version 15 réagir ?

@Wofiel avec cette solution console.log(e.target.value) on reçois
C:\fakepath\imagefilename.png
La meilleure solution est
e.target.files[0]

Si quelqu'un d'autre rencontre ce problème, j'ai trouvé que vous pouvez définir containerElement sur le RaisedButton pour être quelque chose de plus adapté à avoir un élément d'entrée en tant qu'enfant. Par exemple une étiquette ;-)

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

@Thomas101 Merci ! Je viens de rencontrer ce problème et votre solution semble fonctionner.
Impressionnant :)

@ Thomas101 Merci pour le tuyau. Cela a également résolu mon problème. L'actuel

En complément de la réponse @ Thomas101 , lorsque je déclare les composants comme son exemple, mon RaisedButton est rendu avec une entrée de fichier à l'intérieur. Pour éviter cela, définissez simplement le style d'entrée du fichier sur display: none . :)

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

@andreyluiz dans quelles circonstances cela ne fonctionne-t-il pas :

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

Je n'ai pas été en mesure de trouver un problème avec l'exemple du site docs, mais il est clair que beaucoup d'autres ont ce problème !

Est-il supposé que le fichier d'entrée ne s'affiche pas avec le code que vous avez fourni ?

C'est bizarre. Dans mon cas, il rend une entrée de fichier à l'intérieur du bouton material-ui.

@andreyluiz Oui, avec l'exemple du site docs (http://www.material-ui.com/#/components/raised-button) il n'y a pas de <input> visible. Avec quel navigateur et quelle version testez-vous ?

La dernière version de Chrome.

Je suis d'accord avec @andreyluiz , le montre aussi, mais avec un style={{display: 'none'}} , ça marche comme un charme !

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>

La solution ci-dessus ne semble plus fonctionner. J'utilise la nouvelle branche bêta v1 et ce qui suit ne fonctionne pas pour moi

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

J'obtiens l'erreur suivante dans la 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.

Quelqu'un connaît une solution de contournement? Quoi qu'il en soit, un cas d'utilisation aussi courant ne devrait-il pas être pris en charge de manière native? (d'une manière non hacky)

@ AdityaAnand1 le code suivant devrait fonctionner

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