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

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

You can create a file upload progress bar in Vue by using the XMLHttpRequest or Fetch API to handle file uploads and track progress.

Can you show me a code example?

Sure! Here's a simple example using the Fetch API:

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

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

      this.uploading = true;
      const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        }
      });
      this.uploading = false;
    }
  }
};

This code sets up a file input and a progress bar that updates as the file uploads.

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

You can add a success message by updating the state after the upload completes. Here's how you can modify the code:

this.uploading = false;
if (response.ok) {
  alert('File uploaded successfully!');
} else {
  alert('Upload failed.');
}