Breaking News: Grepper is joining You.com. Read the official announcement!

file input material ui icon

Clear Copperhead answered on September 18, 2021 Popularity 7/10 Helpfulness 3/10

answer file input material ui icon

related file input material ui icon

file input material ui icon

Comment

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

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: file input javascript material-ui

Link to this answer
Share Copy Link

Contributed on Sep 18 2021

Clear Copperhead

0 Answers Avg Quality 2/10

Closely Related Answers

file input material ui icon

Comment

//WITH BUTTON
<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>

Popularity 7/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: whatever input material-ui file fi

Link to this answer
Share Copy Link

Contributed on Sep 18 2021

Clear Copperhead

0 Answers Avg Quality 2/10

file input material ui icon

Contents

More Related Answers

file input material ui icon

Closely Related Answers

file input material ui icon

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.