2

I handled file upload in Angular 5 using listening to progress events method. also displaying progress percentage bar.

https://angular.io/guide/http#listening-to-progress-events.

It works good when uploading small size files (below 20 mb). If I try to upload large size file (100 MB or 1GB), the progress percentage bar running upto 40% or sometimes 70% then suddenly it stopped running. It shows error net:ERR_CONNECTION_RESET. At this moment, If I leave the page idle, the upload progress gets finished. But in UI, it is stuck at 40% or 70% like that.. I could not find the exact problem what is reason for this issue. Please suggest solution if you guys had faced this issue.

Karthikeyan Vellingiri
  • 1,270
  • 1
  • 17
  • 26
  • Where exactly are you uploading this file? – SiddAjmera Sep 22 '18 at 06:05
  • Upload progress handled in frontend side, once the progress 100% complete, It will hit the backend API and get the (status:200) response. – Karthikeyan Vellingiri Sep 22 '18 at 06:21
  • Check on your back-end max file size and max request size – Patryk Brejdak Sep 22 '18 at 06:42
  • 1
    This can happen if the server is signaling a reset on the TCP level (because of an error. Possibly exceeding the max limit) and the client (in this case browser) is flushing its own incoming TCP buffer and as a result missing the returned response. Please read [Why the lingering close functionality is necessary with HTTP](https://httpd.apache.org/docs/2.0/misc/fin_wait_2.html#appendix) – Vahid Apr 05 '19 at 14:26

1 Answers1

3

In any case, the best practice for large file uploading is to split a file by blob-parts.

let blob = file.slice(start, next_slice);

where start - would be a start index and next_slice your needed limit for splicing which should be included inside a loop to proceed progress.

on server-side also, first, you need to store chunks and combine them into one file after completing.

un.spike
  • 4,857
  • 2
  • 18
  • 38