title: Semantic UI React progress bar with file upload
body: <p>I have a small file upload component where the user picks a file from their file system and uploads it (sent via REST call).</p>
  
  <p>I'm trying to implement <a href="https://react.semantic-ui.com/modules/progress/" rel="nofollow noreferrer"><code>&lt;Progress&gt;</code></a> module from semantic-ui-react to indicate success/failure when the file is sent to the endpoint. So is it best to do this based off the <code>status</code> of the response? Or is there a better way to handle it?</p>
  
  <p>Codesandbox is <a href="https://codesandbox.io/s/5wxr0mwq5p" rel="nofollow noreferrer">here</a> </p>
  
  <pre><code>    class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            file: null,
            fileName: "",
            isUploading: false,
            statusCode: ""
          };
        }
  
        onFormSubmit = e =&gt; {
          e.preventDefault(); // Stop form submit
          this.fileUpload(this.state.file).then(response =&gt; {
            console.log(response.data);
          });
        };
  
        fileChange = e =&gt; {
          this.setState(
            { file: e.target.files[0], fileName: e.target.files[0].name },
            () =&gt; {
              console.log(
                "File chosen ---&gt;",
                this.state.file,
                console.log("File name  ---&gt;", this.state.fileName)
              );
            }
          );
        };
  
  
    fileUpload = async file =&gt; {
      const formData = new FormData();
      formData.append("file", file);
      try {
        axios.post("/file/upload/enpoint").then(response =&gt; {
          console.log(response);
          console.log(response.status);
          this.setState({ statusCode: response.status }, () =&gt; {
            console.log(
              "This is the response status code ---&gt;",
              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: () =&gt; (
            &lt;Tab.Pane attached={false}&gt;
              &lt;Message&gt;Some random message idk.&lt;/Message&gt;
              &lt;Form onSubmit={this.onFormSubmit}&gt;
                &lt;Form.Field&gt;
                  &lt;label&gt;File input &amp; upload &lt;/label&gt;
                  &lt;Button as="label" htmlFor="file" type="button" animated="fade"&gt;
                    &lt;Button.Content visible&gt;
                      &lt;Icon name="file" /&gt;
                    &lt;/Button.Content&gt;
                    &lt;Button.Content hidden&gt;Choose a File&lt;/Button.Content&gt;
                  &lt;/Button&gt;
                  &lt;input
                    type="file"
                    id="file"
                    hidden
                    onChange={this.fileChange}
                  /&gt;
                  &lt;Form.Input
                    fluid
                    label="File Chosen: "
                    placeholder="Use the above bar to browse your file system"
                    readOnly
                    value={this.state.fileName}
                  /&gt;
                  &lt;Button style={{ marginTop: "20px" }} type="submit"&gt;
                    Upload
                  &lt;/Button&gt;
                  {statusCode &amp;&amp; statusCode === "200" ? (
                    &lt;Progress
                      style={{ marginTop: "20px" }}
                      percent={100}
                      success
                      active
                      progress
                    /&gt;
                  ) : statusCode &amp;&amp; statusCode === "500" ? (
                    &lt;Progress
                      style={{ marginTop: "20px" }}
                      percent={100}
                      error
                      active
                      progress
                    /&gt;
                  ) : null}
                &lt;/Form.Field&gt;
                  &lt;/Form&gt;
                &lt;/Tab.Pane&gt;
              )
            }
          ];
          return (
            &lt;Segment style={{ padding: "5em 1em" }} vertical&gt;
              &lt;Divider horizontal&gt;OFFLINE USAGE&lt;/Divider&gt;
              &lt;Tab menu={{ pointing: true }} panes={panes} /&gt;
            &lt;/Segment&gt;
          );
        }
      }
  </code></pre>