title: How to implement progress bar properly?
body: <p>So I am doing this project on React and ChakraUI to display images. My requirement is to display a progress bar whenever someone uploads an image.
  My problem is, when I reload the page, the progress bar works fine the first time e.g. I select an image, after selecting the image I press the upload button and the progress bar is shown. It works okay the only the first time. After that, whenever I just select the image, the progress bar gets full already. After that, clicking the upload button just uploads it.
  How to prevent this from happening?</p>
  <pre><code>import * as React from &quot;react&quot;;
  
  import { Button, Flex, Progress } from &quot;@chakra-ui/react&quot;;
  import { useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  import { baseUrl } from &quot;../config&quot;;
  
  function Upload(props) {
    const [selectedFile, setSelectedFile] = useState(null);
    const [curretFile, setCurrentFile] = useState(null);
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
  
    function fileSelectedHandler(event) {
      setSelectedFile(event.target.files[0]);
    }
  
    const fileUploadHandler = (event) =&gt; {
      const fd = new FormData();
      fd.append(&quot;image&quot;, selectedFile, selectedFile.name);
  
      axios
        .post(`${baseUrl}/upload`, fd, {
          headers: {
            &quot;Content-Type&quot;: &quot;multipart/form-data&quot;,
          },
          onUploadProgress: (event) =&gt; {
            setProgress(Math.round((100 * event.loaded) / event.total));
          },
        })
        .then((res) =&gt; {
          props.onSuccessfulUpload();
          setSelectedFile(null);
          setError(null);
        })
        .catch((error) =&gt; {
          setSelectedFile(null);
          setError(error);
        });
    };
  
    const fileData = () =&gt; {
      if (selectedFile) {
        if (
          selectedFile.type === &quot;image/jpeg&quot; ||
          selectedFile.type === &quot;image/png&quot;
        ) {
          return (
            &lt;div&gt;
              {error &amp;&amp; &lt;div&gt;file too large!!&lt;/div&gt;}
              &lt;Button colorScheme='teal' size='sm' onClick={fileUploadHandler}&gt;
                Upload!
              &lt;/Button&gt;
              &lt;Progress value={progress} min='0' max='100' width='40' /&gt;
            &lt;/div&gt;
          );
        } else {
          return (
            &lt;div&gt;
              &lt;h4&gt;Please choose an image to upload&lt;/h4&gt;
            &lt;/div&gt;
          );
        }
      } else {
        return (
          &lt;div&gt;
            &lt;h4&gt;Choose Photos&lt;/h4&gt;
          &lt;/div&gt;
        );
      }
    };
  
    return (
      &lt;div&gt;
        &lt;input type='file' onChange={fileSelectedHandler} /&gt;
        {fileData()}
      &lt;/div&gt;
    );
  }
  
  export default Upload;
  </code></pre>