Я проверяю Firebase с первого раза, читая немного документации, и здесь я попытался настроить базовый c компонент, который позволяет мне загружать картинку и отправлять мне сообщение и предварительный просмотр в случае успеха, а также индикатор выполнения, на котором вы можете видеть прогресс, индикатор работает нормально, но сообщение и предварительный просмотр не работают, и я не понимаю, почему, поскольку я следовал методам, которые я видел в документации, если кто-то может дать подсказку, будет оценил
это код:
class Documents extends Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
name: "Jesus",
uploaded: 0,
message: "",
document: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e: any) {
const file = e.target.files[0];
const storageRef = firebase.storage().ref(`Pictures/${file.name}`);
const task = storageRef.put(file);
task.on(
"state_changed",
snapshot => {
console.log(snapshot)
let percenteage =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
this.setState({
uploaded: percenteage
});
},
error => {
this.setState(
{
message: `Ha ocurrido un error: ${error.message}`
},
() => {
this.setState({
message: "Arhivo subido",
document: task.snapshot.downloadURL //this is the url from firebase where our file is located so we will see a preview of the document
});
}
);
}
);
}
componentDidMount() {}
render() {
return (
<div>
<progress value={this.state.uploaded} max="100" />
<br />
<input type="file" onChange={this.handleChange} />
{this.state.message}
<br />
<img style={{ width: 1000 }} src={this.state.document} />
</div>
);
}
}