ofetch
ofetch copied to clipboard
unjs
Support Request / Response progress
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?
I have same issue in nuxt3. Is there any way to show a progress bar for file uploads with ohmyfetch?
Small bump here on demand of this question: https://stackoverflow.com/q/73811890/8816585
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
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%.
+1 can we please get this? We had this for ages with axios and now its been taken while switching to NUXT3 🙈🤷♂️
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)
}
Really frustrating that Nuxt switched from axios to ofetch, despite ofetch seemingly lacking feature parity... 🤯
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).
Dear @bradley-varol I would be happy to answer this, but it is out of this issue's context. replying notifies 20+ people.