Semantic UI Реагирует на индикатор выполнения с загрузкой файла

Question

У меня есть небольшой компонент для загрузки файлов, в котором пользователь выбирает файл из своей файловой системы и загружает его (отправленный с помощью вызова REST).

Я пытаюсь реализовать <Progress> модуль из semantic-ui-реагирует, чтобы указать успех / неудачу, когда файл отправляется в конечную точку.Так лучше ли делать это на основе status ответа?Или есть лучший способ справиться с этим?

Codesandbox это здесь

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          file: null,
          fileName: "",
          isUploading: false,
          statusCode: ""
        };
      }

      onFormSubmit = e => {
        e.preventDefault(); // Stop form submit
        this.fileUpload(this.state.file).then(response => {
          console.log(response.data);
        });
      };

      fileChange = e => {
        this.setState(
          { file: e.target.files[0], fileName: e.target.files[0].name },
          () => {
            console.log(
              "File chosen --->",
              this.state.file,
              console.log("File name  --->", this.state.fileName)
            );
          }
        );
      };


  fileUpload = async file => {
    const formData = new FormData();
    formData.append("file", file);
    try {
      axios.post("/file/upload/enpoint").then(response => {
        console.log(response);
        console.log(response.status);
        this.setState({ statusCode: response.status }, () => {
          console.log(
            "This is the response status code --->",
            this.state.statusCode
          );
        });
      });
    } catch (error) {
      console.error(Error(`Error uploading file ${error.message}`));
    }

    const data = JSON.stringify({
      uploadData: file
    });
    console.log(data);
  };

  render() {
    const { statusCode } = this.state;
    const panes = [
      {
        menuItem: "Import ",
        render: () => (
          <Tab.Pane attached={false}>
            <Message>Some random message idk.</Message>
            <Form onSubmit={this.onFormSubmit}>
              <Form.Field>
                <label>File input & upload </label>
                <Button as="label" htmlFor="file" type="button" animated="fade">
                  <Button.Content visible>
                    <Icon name="file" />
                  </Button.Content>
                  <Button.Content hidden>Choose a File</Button.Content>
                </Button>
                <input
                  type="file"
                  id="file"
                  hidden
                  onChange={this.fileChange}
                />
                <Form.Input
                  fluid
                  label="File Chosen: "
                  placeholder="Use the above bar to browse your file system"
                  readOnly
                  value={this.state.fileName}
                />
                <Button style={{ marginTop: "20px" }} type="submit">
                  Upload
                </Button>
                {statusCode && statusCode === "200" ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    success
                    active
                    progress
                  />
                ) : statusCode && statusCode === "500" ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    error
                    active
                    progress
                  />
                ) : null}
              </Form.Field>
                </Form>
              </Tab.Pane>
            )
          }
        ];
        return (
          <Segment style={{ padding: "5em 1em" }} vertical>
            <Divider horizontal>OFFLINE USAGE</Divider>
            <Tab menu={{ pointing: true }} panes={panes} />
          </Segment>
        );
      }
    }

Answer 1

У меня есть предложенное решение, которое в основном ориентировано на редукторы. Что вам нужно сделать, это вы должны отправить действие загрузки.

Перейти к моему репозиторию Github: Индикатор семантического интерфейса пользователя

Вы могли бы пройти репо и понять это. Это просто другой метод. Так что может быть много способов сделать это. Я использовал простой семантический загрузчик, если вы можете применить то же самое к индикатору выполнения.

Answer 2

Я изменил функцию fileUpload, чтобы обновить переменную состояния statusCode с помощью response.status из ответа сервера.

  fileUpload = async file => {
    const formData = new FormData();
    formData.append("file", file);
    try {
      axios.post("/file/upload/enpoint").then(response => {
        console.log(response);
        console.log(response.status);
        this.setState({ statusCode: response.status }, () => {
          console.log(
            "This is the response status code --->",
            this.state.statusCode
          );
        });
      });
    } catch (error) {
      console.error(Error(`Error uploading file ${error.message}`));
    }
  };

Затем при рендеринге я проверил, чтобы statusCode было либо200 или 500, я изменю его, чтобы включить более подходящие коды состояния, но вы поняли.

{statusCode && statusCode === 200 ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    success
                    progress
                  >
                    File Upload Success
                  </Progress>
                ) : statusCode && statusCode === 500 ? (
                  <Progress
                    style={{ marginTop: "20px" }}
                    percent={100}
                    error
                    active
                    progress
                  >
                    File Upload Failed
                  </Progress>
                ) : null}

Обновленные коды и поле можно найти здесь для тех, кто хочетвзглянуть.