OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Sending a form with data and a file - react

  • Thread starter Thread starter kiki129
  • Start date Start date
K

kiki129

Guest
I have read some threads on the subject but I am not sure if I am thinking correctly. I'm supposed to create a form where the user enters their details and finally using Drag and Drop adds the file. If all the fields are filled in then he clicks Send and submits the form. However, I have a problem with Drag and Drop because my component should show a progress bar after adding the file, but the file should not be uploaded yet, only after clicking submit.

Is it ok to handle this file via fileReader?

Code:
  const handleFileRead = (file: IFile) => {
    const fileReader = new FileReader();

    fileReader.onprogress = (event) => {
      if (event.lengthComputable) {
        const progress = (event.loaded / event.total) * 100;
        updateProgress(progress, file.name);
      }
    };

    fileReader.onload = (event) => {
      const fileContent = event.target?.result as string;
      console.log(fileContent);
      updateStatus(FileLoadingStatus.uploaded, file.name);
    };

    fileReader.readAsDataURL(file.originalFile); 
  };

I mainly care about the onprogess event and I don't know how to handle it, because event.loaded always returns a value after the file has been uploaded.

Is there any other alternative to displaying this progress?

<p>I have read some threads on the subject but I am not sure if I am thinking correctly.
I'm supposed to create a form where the user enters their details and finally using <strong>Drag and Drop</strong> adds the file. If all the fields are filled in then he clicks <strong>Send</strong> and submits the form.
However, I have a problem with <strong>Drag and Drop</strong> because my component should show a progress bar after adding the file, but the file should not be uploaded yet, only after clicking submit.</p>
<p>Is it ok to handle this file via fileReader?</p>
<pre><code>
const handleFileRead = (file: IFile) => {
const fileReader = new FileReader();

fileReader.onprogress = (event) => {
if (event.lengthComputable) {
const progress = (event.loaded / event.total) * 100;
updateProgress(progress, file.name);
}
};

fileReader.onload = (event) => {
const fileContent = event.target?.result as string;
console.log(fileContent);
updateStatus(FileLoadingStatus.uploaded, file.name);
};

fileReader.readAsDataURL(file.originalFile);
};
</code></pre>
<p>I mainly care about the <code>onprogess</code> event and I don't know how to handle it, because <code>event.loaded</code> always returns a value after the file has been uploaded.</p>
<p>Is there any other alternative to displaying this progress?</p>
 

Latest posts

D
Replies
0
Views
1
Damiano Miazzi
D
Top