No Upload Progress Safari

[dlewis23]

Describe the bug

When uploading in Safari on MacOS or on iOS no upload progress event is fired. If you use FireFox or Chrome the upload progress is fired correctly.

To Reproduce

Use the inspector in Safari and no progress % is shown in the console.

Code snippet

let config = {
		onUploadProgress: progressEvent => {
			let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
			console.log(percentCompleted);
		}
	}

	axios.post('https://httpbin.org/post', data, config)
		.then(response => console.log(response));

Expected behavior

Progress of the upload should show as it does in Firefox and chrome.

Axios Version

1.7.2

Adapter Version

No response

Browser

Safari

Browser Version

17.4

Node.js Version

No response

OS

MacOS 14, iOS 17

Additional Library Versions

No response

Additional context/Screenshots

No response

[DigitalBrainJS]

Which adapter do you use fetch or xhr?

[dlewis23]

I typically use XHR, but the issue happens with both.

[fred-boink]

I have the same issue on WebKit iOS 18.

totalSize is completely off until it is complete, then changes to the correct value:

total: 18446744073709552000 totalSize: 18446744073709552000

Last progress event returns the correct values:

total: 59461221 totalSize: 59461221

[Andrew920]

I have the same issue in version 1.7.4 and 1.7.7. This issue appeard after updating to ios 18 and only exists on safari. Is there currently any workaround for this?

[echoaxis1]

I have same problem

[dlewis23]

I have reported this issue to Apple/Safari because I don't believe it's something we can fix its something with Safari/MacOS itself. https://bugs.webkit.org/show_bug.cgi?id=277286

[DigitalBrainJS]

Has anyone tested the issue with the fetch adapter instead of the default xhr? In theory, it shouldn't have the same issue.

[xcaeser]

Has anyone tested the issue with the fetch adapter instead of the default xhr? In theory, it shouldn't have the same issue.

just tested it. still an issue. it’s a safari issue.

[dlewis23]

@DigitalBrainJS this problem happens with both XHR and Fetch. It's a bug with safari itself. I have reported the bug to Apple, others should say they have the issue here so it gets more eyes on it: https://bugs.webkit.org/show_bug.cgi?id=277286

[ty-yeo]

onDownloadProgress is also not working on Safari

[quarantaquatro]

this seems to be still not working. Does anyone have an idea for a workaround?

[ty-yeo]

onDownloadProgress is also not working on Safari

For my case, The problem was caused by Safari not supporting Content-type: x-mixed-replace, Not an axios bug for me.

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

[jasonsaayman]

closing as this seems to be a safari issue. i will add this as something to note or add to the docs