lib-storage's httpUploadProgress is only called on completion of the upload

[ryno1234]

Describe the bug

The httpUploadProgress event is only called upon completion of the file upload when uploading small files (~3mb) making it not possible to actually track the incremental upload progress. The v2 SDKs equivalent component AWS.S3.ManagedUpload() did fire this event regularly even for small files.

This is also referenced here: #2206

Your environment

SDK version number

"@aws-sdk/client-lambda": "^3.43.0"
"@aws-sdk/client-s3": "^3.44.0"
"@aws-sdk/credential-providers": "^3.43.0"
"@aws-sdk/lib-storage": "^3.44.0"

Is the issue in the browser/Node.js/ReactNative?

Browser

Details of the browser/Node.js/ReactNative version

Browsers:
Chrome: 96.0.4664.110
Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
Internet Explorer: 11.0.19041.1202

Steps to reproduce

	const uploader = new Upload({
		client: s3Client,
		params: {
			Bucket: "my-bucket",
			Key: "/folder/file.mov",
			Body: file
		},
		leavePartsOnError: true
	});

	uploader.on('httpUploadProgress', function (progress) {
		console.log('Progress %i, part: %i', progress.loaded, progress.part);
	});

Observed behavior

The httpUploadProgress event is only called upon completion of the file upload, not incrementally.

Expected behavior

The httpUploadProgress event should be called multiple times as the file is uploaded. This was the behavior seen when using AWS's JavaScript SDK v2

Additional context

The files I'm uploading are roughly 2-3MB.

[shanlalit]

There is no way to change the default minimum upload size. It is important for user experience to show upload progress for small file (5MB or below). What will appear to a slow internet connection user on mobile?

May be we could reduce the size of minimum upload or are suggested in the ticket httpUploadProgress is called multiple times.

Are there any alternate way to define the progress tracker, I would love to see an example code for the same.

[kuhe]

JS SDK v2 uses XHR for browser network requests, which has a good interface for progress tracking.

JS SDK v3 uses fetch for the same, which offers some other advantages but one downside is that it does not seem to support upload progress yet, and progress on that feature is extremely slow.

It would perhaps be a tough decision to add an XHR http handler just to support upload progress.

[kuhe]

Added a backlog ticket (internal) to address this by adding XHR http support.

Amplify has an axios http handler that could be helpful as a reference:
https://github.com/aws-amplify/amplify-js/blob/main/packages/storage/src/providers/axios-http-handler.ts