как отправить сообщение в случае успеха при загрузке картинки в firebase - PullRequest
0 голосов
/ 10 февраля 2020

Я проверяю 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>
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...