Show "Uploading" message, and setUploaded manually

[bangbaew]

My app does upload file to the backend after dragging the files to to component, I want it to show an "uploading" message first, and I want to be able to use setUploaded in my app after finish uploading to the backend.

my app

const handleUpload = (files: FileList) => {

  setUploaded(false) //<-- Show "Uploading" message

  for (let i = 0; i < files.length; i++) {
    const f = files.item(i)!
    const formData = new FormData();
    formData.append("file", f);

    axios.post(getConfigClient() + '/document/upload', formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      }
    })
      .then(async _ => {
        const newDocList: AxiosResponse<Document[]> = await axios.get(getConfigClient() + `/document`, { headers: { 'Cache-Control': 'no-cache', ...getAuthHeader() }, params: { parentId: currentFolderId } })
        setUploaded(true) // <-- Show "Uploaded" message when all files completed uploading

        setDocList(newDocList)
        setFile(f);
      })
      .catch(e => {
        console.log(e)
        alert(e.response?.data)
      })
  }
};