Support Request / Response progress

[acidjazz]

I know fetch itself didn't have it for a while, last I recall it was coming in 2020 with some command like

allowHTTP1ForStreamingUpload

Do we have any recommendations on what people might want to use for nuxt3?

[bf]

I have same issue in nuxt3. Is there any way to show a progress bar for file uploads with ohmyfetch?

[kissu]

Small bump here on demand of this question: https://stackoverflow.com/q/73811890/8816585

[mohammedmoutawakkil]

any news ?!

[PhE]

any news ?!

no progress :smile:

[capoia]

i need this too D:

[nickchomey]

It seems this should now be possible with Chromium versions > 105. It would be cool if it could be integrated into ofetch!

https://developer.chrome.com/articles/fetch-streaming-requests/#streaming-request-bodies fetch() upload streaming - Chrome Platform Status (chromestatus.com)

Here's an example implementation: https://stackoverflow.com/a/52860605/19510854

[4KDA]

news?

[Dmytro-Tihunov]

Still nothing ?)

[acidjazz]

🙏 🙏 🤞 🤞

[cdwmhcc]

https://ladjs.github.io/superagent/#progress-tracking

[alirayaneh]

is there any solution for this problem ?

[ademyalcin27]

Is there any news about this ?

[clinton9ice]

Has any solution been provided on this yet? I have read few stuff around it on the solution chrome provided using the ReadeableStream api but it's still not recommendable 100%.

[sohaha]

any news ?!

[EduardoRocha234]

any news?

[Megachill]

+1 can we please get this? We had this for ages with axios and now its been taken while switching to NUXT3 🙈🤷‍♂️

[meyt]

My solution,

Create composables/useUploader.js:

export function useUploader() {
  const config = useRuntimeConfig()
  const baseUrl = config.public.apiBase
  const authCookieName = 'THEAUTHCOOKIE'

  return {
    upload(url, form, onProgress) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('POST', baseUrl + url, true)

        // authorization
        const token = useCookie(authCookieName)
        if (token.value) {
          xhr.setRequestHeader('Authorization', `Token ${token.value}`)
        }

        xhr.upload.onprogress = function (event) {
          if (!event.lengthComputable) return
          onProgress((event.loaded / event.total) * 100)
        }
        xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 300) {
            try {
              resolve(JSON.parse(xhr.responseText))
            } catch (error) {
              reject(new Error('Failed to parse response as JSON'))
            }
          } else {
            reject(new Error(`Upload failed with status: ${xhr.status}`))
          }
        }
        xhr.onerror = function () {
          reject(new Error('Upload failed due to a network error'))
        }
        xhr.send(form)
      })
    }
  }
}

and use it like:

const uploader = useUploader()
const video = ref(null)

async function submit() {
  const formData = new FormData()
  const onProgress = v => console.log('Upload progress', v)
  formData.append('file', video)
  const result = await uploader.upload('/media', formData, onProgress)
  console.log(result)
}

[bradley-varol]

Really frustrating that Nuxt switched from axios to ofetch, despite ofetch seemingly lacking feature parity... 🤯

[EduardoRocha234]

My solution,

https://stackoverflow.com/a/78849307/22387795

[pi0]

I appreciate the responses and solutions and understand it is a common requirement in frontend applications to track request/response progress when making HTTP calls but please do not respond with repetitive responses, it is an open issue.

ofetch is based on fetch API that is natively supported in both modern servers and browser runtimes but sadly, the standard spec does not allow tracking requests and responses (it is not a limitation of ofetch.)

There are currently two solutions:

• Using an alternative method for making HTTP requests (XHR in browsers / HTTP module in node)
  • You can use axios (progresss capturing) but consider it is a legacy approach and has edge-cases.
• Using native fetch and wrapper around request and response streams as proposed in #277 ( request streaming is not possible in all browsers/http servers).

[bradley-varol]

@pi0 why is Axios considered "legacy"?

[pi0]

Dear @bradley-varol I would be happy to answer this, but it is out of this issue's context. replying notifies 20+ people.