Ich erstelle ein einfaches Formular zum Hochladen einer Datei mit einem Elektronenreaktions-Boilerplate mit Redux-Formular und Material-Benutzeroberfläche.
Das Problem ist, dass ich nicht weiß, wie man ein Eingabedateifeld erstellt, da die Material-Benutzeroberfläche die Eingabe von Upload-Dateien nicht unterstützt.
Irgendwelche Ideen, wie dies erreicht werden kann?
reactjs
electron
react-redux
redux-form
formsy-material-ui
gintoki27
quelle
quelle
Antworten:
Die API bietet
component
zu diesem Zweck.<Button variant="contained" component="label" > Upload File <input type="file" hidden /> </Button>
quelle
style={{ display: "none" }}
, können Sie einfach setzenhidden
neuere MUI-Version:
<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>
quelle
input: {display: 'none'}
für dieses Element hinzufügen .<input hidden>
onChange
Ereignis auf dem<input />
aufgerufen, aber meine Datei ist nicht in dertarget
Eigenschaft des Ereignisobjekts (oder einer Eigenschaft auf) verfügbar das Ereignisobjekt, das ich sehen kann). Wo ist die Datei verfügbar?target.files
(input
Elemente haben ein eingebautesfiles
Attribut, das jede ausgewählte Dateivariant="raised"
ist veraltet, es erwartet einen von ["Text", "umrissen", "enthalten"]Sie müssen Ihre Eingabe mit einschließen Komponente, und fügen Sie die containerElement- Eigenschaft mit dem Wert 'label' hinzu ...
<RaisedButton containerElement='label' // <-- Just add me! label='My Label'> <input type="file" /> </RaisedButton>
Weitere Informationen finden Sie in dieser GitHub- Ausgabe .
BEARBEITEN: Update 2019.
Überprüfen Sie unten die Antwort von @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>
quelle
<input type='file' onChange='handleFile'>
handleFile = file => { .. }
Hier ist ein Beispiel für die Verwendung eines IconButton zum Erfassen von Eingaben (Foto- / Videoaufnahme) mit Version 3.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);
quelle
Es ist Arbeit für mich ("@ material-ui / core": "^ 4.3.1"):
<Fragment> <input color="primary" accept="image/*" type="file" onChange={onChange} id="icon-button-file" style={{ display: 'none', }} /> <label htmlFor="icon-button-file"> <Button variant="contained" component="span" className={classes.button} size="large" color="primary" > <ImageIcon className={classes.extendedIcon} /> </Button> </label> </Fragment>
quelle
Genauso wie es sein sollte, aber ändern Sie die Schaltflächenkomponente so, dass sie so beschriftet ist
<form id='uploadForm' action='http://localhost:8000/upload' method='post' encType="multipart/form-data"> <input type="file" id="sampleFile" style="display: none;" /> <Button htmlFor="sampleFile" component="label" type={'submit'}>Upload</Button> </form>
quelle
Sie können die Input- und InputLabel-Komponenten der Material-Benutzeroberfläche verwenden. Hier ist ein Beispiel, wenn Sie sie zur Eingabe von Tabellenkalkulationsdateien verwendet haben.
import { Input, InputLabel } from "@material-ui/core"; const styles = { hidden: { display: "none", }, importLabel: { color: "black", }, }; <InputLabel htmlFor="import-button" style={styles.importLabel}> <Input id="import-button" inputProps={{ accept: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel", }} onChange={onInputChange} style={styles.hidden} type="file" /> Import Spreadsheet </InputLabel>
quelle
November 2020
Mit Material-UI und React Hooks
import * as React from "react"; import { Button, IconButton, Tooltip, makeStyles, Theme, } from "@material-ui/core"; import { PhotoCamera } from "@material-ui/icons"; const useStyles = makeStyles((theme: Theme) => ({ root: { "& > *": { margin: theme.spacing(1), }, }, input: { display: "none", }, faceImage: { color: theme.palette.primary.light, }, })); interface FormProps { saveFace: any; //(fileName:Blob) => Promise<void>, // callback taking a string and then dispatching a store actions } export const FaceForm: React.FunctionComponent<FormProps> = ({ saveFace }) => { const classes = useStyles(); const [selectedFile, setSelectedFile] = React.useState(null); const handleCapture = ({ target }: any) => { setSelectedFile(target.files[0]); }; const handleSubmit = () => { saveFace(selectedFile); }; return ( <> <input accept="image/jpeg" className={classes.input} id="faceImage" type="file" onChange={handleCapture} /> <Tooltip title="Select Image"> <label htmlFor="faceImage"> <IconButton className={classes.faceImage} color="primary" aria-label="upload picture" component="span" > <PhotoCamera fontSize="large" /> </IconButton> </label> </Tooltip> <label>{selectedFile ? selectedFile.name : "Select Image"}</label>. . . <Button onClick={() => handleSubmit()} color="primary"> Save </Button> </> ); };
quelle
Wenn Sie Funktionskomponenten von React verwenden und nicht mit Beschriftungen oder IDs arbeiten möchten, können Sie auch eine Referenz verwenden.
const uploadInputRef = useRef(null); return ( <Fragment> <input ref={uploadInputRef} type="file" accept="image/*" style={{ display: "none" }} onChange={onChange} /> <Button onClick={() => uploadInputRef.current && uploadInputRef.current.click()} variant="contained" > Upload </Button> </Fragment> );
quelle
<input type="file" id="fileUploadButton" style={{ display: 'none' }} onChange={onFileChange} /> <label htmlFor={'fileUploadButton'}> <Button color="secondary" className={classes.btnUpload} variant="contained" component="span" startIcon={ <SvgIcon fontSize="small"> <UploadIcon /> </SvgIcon> } > Upload </Button> </label>
Stellen Sie sicher, dass Button component = "span" hat , was mir geholfen hat.
quelle