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>