Demo ReactJS upload image to firebase Storage

[baobaostore]

import React, { Component } from "react";
import firebase from "firebase";
import FileUploader from


const config = {

apiKey: "AIzaSyCJHVsb5BAy43iMtQ2_JXmV__ROkiwuCBI",
authDomain: "demoupload-ef2ae.firebaseapp.com",
projectId: "demoupload-ef2ae",
storageBucket: "demoupload-ef2ae.appspot.com",
messagingSenderId: "509670570105",
appId: "1:509670570105:web:b9446336a8fd89afc2bca8",
measurementId: "G-E5R0QTMLRW"

};


class ProfilePage extends Component {
state = {
username: "",
avatar: "",
isUploading: false,
progress: 0,
avatarURL: ""
};

handleChangeUsername = event =>
this.setState({ username: event.target.value });
handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
handleProgress = progress => this.setState({ progress });
handleUploadError = error => {
this.setState({ isUploading: false });
console.error(error);
};
handleUploadSuccess = filename => {
this.setState({ avatar: filename, progress: 100, isUploading: false });
firebase
.storage()
.ref("images")
.child(filename)
.getDownloadURL()
.then(url => {this.setState({ avatarURL: url })

});
};

render() {
return (
<div>
<form>
<label>Username:</label>
<input
type="text"
value={this.state.username}
name="username"

/>
<label>Avatar:</label>
{this.state.isUploading && <p>Progress: {this.state.progress}</p>}
{this.state.avatarURL && <img src={this.state.avatarURL} />}
<FileUploader
accept="image/*"
name="avatar"
randomizeFilename





/>
</form>
</div>
);
}
}

export default ProfilePage;

[fabiocastellanos]

Está bueno, aunque sería mejor si fuera con functional components