How can I show a progress indicator for uploading a file using Nuxt3 built-in $fetch (ohmyfetch)?

Question

Nuxt3 documentation suggests using its built-in $fetch method for making API calls. I'm trying to show the upload progress for a file uploader. I've done it with Axios before, but it does not work with the $fetch method. Here is my code which works with Axios:

//...
const config = {
  onUploadProgress: (progressEvent) => {
    progress.value = Math.round((progressEvent.loaded / progressEvent.total)*100);
  }
}

$fetch('/portfolio/upload/', {method: 'POST', body: formdata, config});
//...

I've looked into the ohmyfetch documentation on GitHub, but I did not find anything. Any idea about how can I handle upload progress using the $fetch method?

Answer 1

Fetch or ofetch don't support uploading progress, right now this can be done only in browser with XMLHttpRequest, something like this:

function upload (url, file) {
    const form = new FormData()
    form.append('file', file)

    const xhr = new XMLHttpRequest()
    xhr.open('post', url, true)
    xhr.upload.onprogress = function (ev) {
        // Upload progress here
        console.log(ev)
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            // Uploaded
            console.log('Uploaded')
        }
    }
    xhr.send(form)
}

You can find more about this here Upload progress indicators for fetch?