Nuxt•3mo ago

Nuxt UI: progressbar not showing the actual progress but is animated

Hi, I'm using a UProgress like this in my template but it doesn't show the progress

<div v-if="isUploading" class="mt-4">
   <UProgress :value="uploadProgress" status />
   <p class="text-sm text-gray-500 mt-1">Uploading...</p>
</div>

<div v-if="isUploading" class="mt-4">
   <UProgress :value="uploadProgress" status />
   <p class="text-sm text-gray-500 mt-1">Uploading...</p>
</div>

In my script I have this

const isUploading = ref(false)
const uploadProgress = ref(0)

const uploadFile = (file: File) => {
  isUploading.value = true
  uploadProgress.value = 0

  return new Promise<void>((resolve, reject) => {
    const formData = new FormData()
    formData.append('image', file)

    const xhr = new XMLHttpRequest()
    xhr.open('POST', props.uploadUrl, true)

    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        uploadProgress.value = Math.round((event.loaded / event.total) * 100)
        console.log(uploadProgress.value)
      }
    }

    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const newMedia = JSON.parse(xhr.responseText)
          emit('upload-success', newMedia)
          media.value.unshift(newMedia)
          resolve()
        } catch (err) {
          reject(err)
        }
      } else {
        reject(new Error(`Upload failed with status ${xhr.status}`))
      }
      isUploading.value = false
      uploadProgress.value = 0
    }

    xhr.onerror = () => {
      isUploading.value = false
      uploadProgress.value = 0
      reject(new Error('Upload failed due to a network error'))
    }

    xhr.send(formData)
  })
}

const isUploading = ref(false)
const uploadProgress = ref(0)

const uploadFile = (file: File) => {
  isUploading.value = true
  uploadProgress.value = 0

  return new Promise<void>((resolve, reject) => {
    const formData = new FormData()
    formData.append('image', file)

    const xhr = new XMLHttpRequest()
    xhr.open('POST', props.uploadUrl, true)

    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        uploadProgress.value = Math.round((event.loaded / event.total) * 100)
        console.log(uploadProgress.value)
      }
    }

    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const newMedia = JSON.parse(xhr.responseText)
          emit('upload-success', newMedia)
          media.value.unshift(newMedia)
          resolve()
        } catch (err) {
          reject(err)
        }
      } else {
        reject(new Error(`Upload failed with status ${xhr.status}`))
      }
      isUploading.value = false
      uploadProgress.value = 0
    }

    xhr.onerror = () => {
      isUploading.value = false
      uploadProgress.value = 0
      reject(new Error('Upload failed due to a network error'))
    }

    xhr.send(formData)
  })
}

The console.log in the onprogress is showing correctly the progress in the console 🤔 why is it not showing in the progressbar?

3 Replies

kapa.ai•3mo ago

Hi @CG Seb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue is that the UProgress component from Nuxt UI expects the progress value to be passed using the v-model directive, not the :value prop. In your code, you are using :value="uploadProgress", which will not bind the progress value correctly and will cause the progress bar to remain in its indeterminate (animated) state. To fix this, change your template to use v-model:

<div v-if="isUploading" class="mt-4">
   <UProgress v-model="uploadProgress" status />
   <p class="text-sm text-gray-500 mt-1">Uploading...</p>
</div>

<div v-if="isUploading" class="mt-4">
   <UProgress v-model="uploadProgress" status />
   <p class="text-sm text-gray-500 mt-1">Uploading...</p>
</div>

This will correctly bind the progress value and display the actual progress in the progress bar, as shown in the official documentation:

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <UProgress v-model="value" status />
</template>

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <UProgress v-model="value" status />
</template>

See Nuxt UI Progress usage If you want the progress bar to show a percentage, ensure that uploadProgress is a number between 0 and 100, which matches your current logic. Summary:
Replace :value="uploadProgress" with v-model="uploadProgress" in your template to make the progress bar reflect the actual progress value instead of being animated only. Reference: Nuxt UI Progress Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@182470797850312704> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CG SebOP•3mo ago

Thanks a lot I didn't see that

Gaming

Programming

Nuxt UI: progressbar not showing the actual progress but is animated

Did you find this page helpful?