Así que estoy haciendo este proyecto en React y ChakraUI para mostrar imágenes. Mi requisito es mostrar una barra de progreso cada vez que alguien carga una imagen. Mi problema es que, cuando vuelvo a cargar la página, la barra de progreso funciona bien la primera vez, por ejemplo, selecciono una imagen, después de seleccionar la imagen, presiono el botón de carga y se muestra la barra de progreso. Funciona bien solo la primera vez. Después de eso, cada vez que selecciono la imagen, la barra de progreso ya se llena. Después de eso, al hacer clic en el botón de carga simplemente se carga. ¿Cómo evitar que esto suceda?

 import * as React from "react"; import { Button, Flex, Progress } from "@chakra-ui/react"; import { useState } from "react"; import axios from "axios"; import { baseUrl } from "../config"; 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) => { const fd = new FormData(); fd.append("image", selectedFile, selectedFile.name); axios .post(`${baseUrl}/upload`, fd, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress: (event) => { setProgress(Math.round((100 * event.loaded) / event.total)); }, }) .then((res) => { props.onSuccessfulUpload(); setSelectedFile(null); setError(null); }) .catch((error) => { setSelectedFile(null); setError(error); }); }; const fileData = () => { if (selectedFile) { if ( selectedFile.type === "image/jpeg" || selectedFile.type === "image/png" ) { return ( <div> {error && <div>file too large!!</div>} <Button colorScheme='teal' size='sm' onClick={fileUploadHandler}> Upload! </Button> <Progress value={progress} min='0' max='100' width='40' /> </div> ); } else { return ( <div> <h4>Please choose an image to upload</h4> </div> ); } } else { return ( <div> <h4>Choose Photos</h4> </div> ); } }; return ( <div> <input type='file' onChange={fileSelectedHandler} /> {fileData()} </div> ); } export default Upload;