Prevent query devtools from erroring on image upload

[ChristopherChudzicki]

What are the relevant tickets?

None

Description (What does it do?)

This addresses a small issue with our image upload functionality in conjunction with Tanstack Query devtools.

How can this be tested?

This error is only visible if you have the Tanstack Query devtools enabled. These can be installed from LINK

1. Try uploading an image on https://rc.learn.mit.edu/articles/new You'll see an error like:

   4821-2c216e271775abe8.js:12 Error sending message to content script: DataCloneError: Failed to execute 'postMessage' on 'Window': e=>{var l;let r=Math.round(100*e.loaded/(null!=(l=e.total)?l:1));null==t||t(r)} could not be cloned.

2. Try again locally on this branch. No error.

[ChristopherChudzicki]

So the reason the error happens is:

1. Tanstack query devtools are a chrome extension, so they run in a webworker
2. The devtools track mutation state, which includes the args we pass to mutate (or mutateAsync).
3. In order for that data to get into the webworker, the data must be serializable. Previously we were passing a function, which was not serializable.

Now onUploadProgress is no longer an arg of mutateasync, which avoids the issue.

I don't love changing the application code to avoid a devtool error. However, it is useful to not have these errors showing up, and this alternative implementation seems fine.