How can I implement a file upload progress bar in Vue?

How can I implement a file upload progress bar in Vue?

You can use the XMLHttpRequest or Fetch API to track the upload progress. Would you like a code example?

Yes, please provide a code example.

Here's a simple example using Axios:

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <progress v-if="progress > 0" :value="progress" max="100"></progress>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/upload', formData, {
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      });
    },
  },
};

This will show a progress bar while the file is uploading.

What if I want to show a success message after the upload?

You can add a success message in the then block of the Axios request. Here's how:

axios.post('/upload', formData, { ... })
  .then(response => {
    alert('File uploaded successfully!');
  })
  .catch(error => {
    alert('Error uploading file.');
  });