When uploading from the browser, the onProgress is not called.

[genu]

• Package Name: @azure/storage-file-datalake
• Package Version: 12.25.0
• Operating system: OSx
• nodejs
  • version: v22.5.1
• browser Arc/Chrome
  • name/version:
• typescript
  • version: 5.6.3
• Is the bug related to documentation in
  • README.md
  • source code documentation
  • SDK API docs on https://learn.microsoft.com

Describe the bug
The onProgress doesn't get called when uploading from the browser using DataLakeFileClient.upload(...). It gets called a single time at the end of an upload.

To Reproduce

  let dir = new DataLakeDirectoryClient(sasUrl)
  const fileClient = dir.getFileClient('test.mp4')

  await fileClient.upload(file, {
     onProgress: ({ loadedBytes }) => {
        console.log("loadedBytes", loadedBytes)
     },
  })

Expected behavior
I expect that I would see a console.log as the file is uploaded from the browser.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
The current behavior is that the onProgress is called a single time at the end of an upload. There is no way to implement an upload progress bar without this callback functioning properly.

[github-actions]

Thanks for the feedback! We are routing this to the appropriate team for follow-up. cc @xgithubtriage.

[jeremymeng]

It is a limitation of the fetch() API. As far as I know, onUploadProgress only works on Chrome-based browsers if the request body is a ReadableStream<Uint8Array>.

onUploadProgress may work for Blob and ArrayBuffer if you use an XHR http client. For example, you can adapt the following file to your needs https://github.com/Azure/azure-sdk-for-js/blob/7eb9ca14aecf5cc1907808fd58b5dbb7cbcfddd7/sdk/core/core-rest-pipeline/src/xhrHttpClient.ts,

and pass it via the DataLakeDirectoryClient

azure-sdk-for-js/sdk/storage/storage-blob/samples-dev/advancedRequestOptions.ts

Line 31 in 7eb9ca1

// httpClient: MyHTTPClient, // A customized HTTP client implementing IHttpClient interface

[github-actions]

Hi @genu. Thank you for opening this issue and giving us the opportunity to assist. To help our team better understand your issue and the details of your scenario please provide a response to the question asked above or the information requested above. This will help us more accurately address your issue.