How to do a material-ui button?

[gukii]

I ve tried all examples in the Readme to make react-firebase-file-uploader accept a material-ui react button, but failed, any ideas on how to do this?

Material-UI doesn t seem to have button styles that can be included as labels. I might be wrong..

The material-ui button renders, but does not active the firebase upload..

The latest try was doing it this way:

                        <FileUploader
                            hidden
                            id="photoButtonX"
                            name="photoButtonX"
                            accept="image/*"
                            filename={ !!this.props.fileName && this.props.fileName.length > 0 ? file => this.props.fileName : null }
                            storageRef={ storageUploadRef.child(this.props.firebaseImagePath) }
                            onUploadStart={ this.handleUploadStart }
                            onUploadError={ this.handleUploadError }
                            onUploadSuccess={ this.handleUploadSuccess }
                            onProgress={ this.handleProgress}

                        />

                        <label htmlFor="photoButtonX">
                            <Button     color="secondary" 
                                        variant="contained" 
                                        onClick={this.saveData}
                            >
                                {this.props.buttonText} { this.state.isUploading && <span> {this.state.progress}%</span> }
                            </Button>

                        </label>

[gukii]

Tried it with material-ui's 'FormControl' and 'InputLabel' as well, but pressing the button will not active 'FileUploader'..

<form>
    <FileUploader
        hidden
        id="photoButtonX"
        name="photoButtonX"
        accept="image/*"
        filename={ !!this.props.fileName && this.props.fileName.length > 0 ? file => this.props.fileName : null }
        storageRef={ storageUploadRef.child(this.props.firebaseImagePath) }
        onUploadStart={ this.handleUploadStart }
        onUploadError={ this.handleUploadError }
        onUploadSuccess={ this.handleUploadSuccess }
        onProgress={ this.handleProgress}

    />

    <label htmlFor="photoButtonX">
        <Button     color="secondary" 
                    variant="contained" 
        >
            {this.props.buttonText} { this.state.isUploading && <span> {this.state.progress}%</span> }
        </Button>
    </label>
</form>

[gukii]

figured it out, this structure works. the key is component="label" inside the material-ui button..

<form>

    <label htmlFor="photoButtonX">
        <Button     color="secondary" 
                    variant="contained" 
                    component="label"
        >   
            {this.props.buttonText}{ this.state.isUploading && <span>&nbsp;{this.state.progress}%</span> }

            <FileUploader
                hidden
                id="photoButtonX"
                name="photoButtonX"
                accept="image/*"
                filename={ !!this.props.fileName && this.props.fileName.length > 0 ? file => this.props.fileName : null }
                storageRef={ storageUploadRef.child(this.props.firebaseImagePath) }
                onUploadStart={ this.handleUploadStart }
                onUploadError={ this.handleUploadError }
                onUploadSuccess={ this.handleUploadSuccess }
                onProgress={ this.handleProgress}

            />
        </Button>

    </label>
</form>