web-dev-qa-db-fra.com

Comment activer le téléchargement de fichier dans la saisie simple de l'interface de React Material?

Je crée un formulaire simple pour télécharger un fichier en utilisant electron-react-boilerplate avec redux form & ui.

Le problème est que je ne sais pas comment créer un champ de fichier d'entrée car le matériel ui ne prend pas en charge l'entrée de fichier de téléchargement.

Des idées sur la façon de réaliser ceci?

reactjselectronreact-reduxredux-formformsy-material-ui
31
gintoki27

Vous devez encapsuler votre entrée avec composant et ajouter une propriété containerElement avec valeur 'label' ...

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

Vous pouvez en savoir plus à ce sujet dans ce GitHub numéro .

EDIT: Mise à jour 2019.

Vérifiez en bas la réponse de @ galki

TLDR;

<input
  accept="image/*"
  className={classes.input}
  style={{ display: 'none' }}
  id="raised-button-file"
  multiple
  type="file"
/>
<label htmlFor="raised-button-file">
  <Button variant="raised" component="span" className={classes.button}>
    Upload
  </Button>
</label>
27
vblazenka

nouvelle version de MIUI:

<input
  accept="image/*"
  className={classes.input}
  style={{ display: 'none' }}
  id="raised-button-file"
  multiple
  type="file"
/>
<label htmlFor="raised-button-file">
  <Button variant="raised" component="span" className={classes.button}>
    Upload
  </Button>
</label>
40
galki

Une autre solution> = v1.0 qui me semble plus logique structurellement que la solution de @ galki.

RaisedButton est obsolète dans> = v1.0. Je ne trouve pas plus d'informations sur containerElement (cela n'a peut-être pas été documenté?), Mais l'API actuelle fournit component à cette fin.

<Button
  variant="contained"
  component="label"
>
  Upload File
  <input
    type="file"
    style={{ display: "none" }}
  />
</Button>
19
elijahcarrel

Voici un exemple d'utilisation d'un IconButton pour capturer une entrée (capture de photo/vidéo) à l'aide de 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) => ({
    input: {
        display: 'none'
    }
});

class MediaCapture extends Component {
    static propTypes = {
        classes: PropTypes.object.isRequired
    };

    state: {
        images: [],
        videos: []
    };

    handleCapture = ({ target }) => {
        const fileReader = new FileReader();
        const name = target.accept.includes('image') ? 'images' : 'videos';

        fileReader.readAsDataURL(target.files[0]);
        fileReader.onload = (e) => {
            this.setState((prevState) => ({
                [name]: [...prevState[name], e.target.result]
            }));
        };
    };

    render() {
        const { classes } = this.props;

        return (
            <Fragment>
                <input
                    accept="image/*"
                    className={classes.input}
                    id="icon-button-photo"
                    onChange={this.handleCapture}
                    type="file"
                />
                <label htmlFor="icon-button-photo">
                    <IconButton color="primary" component="span">
                        <PhotoCamera />
                    </IconButton>
                </label>

                <input
                    accept="video/*"
                    capture="camcorder"
                    className={classes.input}
                    id="icon-button-video"
                    onChange={this.handleCapture}
                    type="file"
                />
                <label htmlFor="icon-button-video">
                    <IconButton color="primary" component="span">
                        <Videocam />
                    </IconButton>
                </label>
            </Fragment>
        );
    }
}

export default withStyles(styles, { withTheme: true })(MediaCapture);
3
Markus Hay