ProgressEvent.load is always the same as ProgressEvent.Total which causes the progress to fake

Question

I'm trying to implement progress bar on a website.

The Problem:
ProgressEvent.load is always the same as ProgressEvent.Total which prevent the progress to show the real state of the upload. At the first second the xhr request does sent it looks like it finished but actually the server is still getting parts of the file.

JS:
My js code(the part of the progress) looks like that:

xhr.upload.onprogress = function (event) {
    var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
    that._onProgressItem(item, progress);
}; 

the property lengthComputable is true.
the event.loaded is 4354707 as the event.total which is 4354707.

C# Server Side:

public async Task<FileResultViewModel> Upload(string type)
{            
   string ServerUploadFoler = "...";

   // Verify that this is an HTML Form file upload request
   if (!Request.Content.IsMimeMultipartContent())
   {
       throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.UnsupportedMediaType));
   }                       

   // Create a stream provider for setting up output streams
   var streamProvider = new MultipartFormDataStreamProvider(ServerUploadFolder);            

   // Read the MIME multipart asynchronously content using the stream provider we just created.
   await Request.Content.ReadAsMultipartAsync(streamProvider);            

   string guid = String.Empty;

   if (serverUploadMoveFolder != ServerUploadFolder)
   {
       foreach (MultipartFileData fileData in streamProvider.FileData)
       {
           guid = Guid.NewGuid().ToString();
           string newFileName = serverUploadMoveFolder + guid + GetExtension(uploadType);
           FileInfo fi = new FileInfo(fileData.LocalFileName);
           fi.MoveTo(newFileName);
       }
   }

   // Create response
   return new FileResultViewModel
   {                
       FileName = guid                
   };
}

Chrome debug after 1 second of upload with a file of 4.2MB:


In fiddler after the request has completed:

My questions are:

1. How does the browser knows the loaded size? How does it split the file to parts and based on what params?
2. How do the xhr.upload.onprogress function event get updated with the progress? Does it the server which report about his progress and if it is so where is it on the code because I didn't handle it.
3. Why doesn't the loaded property show the real size of part?