I am Junior Full Stack Developer working on a ReactJs web application, wherein user will upload a video which will then goes to the server(Using Axios) for processing(Open CV Stuff). For the server part I am using Fast Api.

The problem is how do i validate the video size before sending it to the server? Also i have to show a progress bar for uploading.

Can anyone recommend the best apporach for this and relevant code? Keep in mind I am a quite begineer to ReactJS :)

Here's my form

<form action='.' enctype="multipart/form-data">
   <div class="input-group">
       <label for="file-upload" class="custom-file-upload m-auto w-100 text-center">
            <i class="fa fa-cloud-upload"></i> Upload a video
       </label>
       <input id="file-upload" type="file"/>
   </div>
</form>