How can I implement a cancel feature for file uploads in Vue.js?

How can I implement a cancel feature for file uploads in Vue.js?

You can implement a cancel feature by using the Axios library to manage your file uploads. You can create a cancel token that allows you to cancel the request.

Can you show me a code example of how to do that?

Sure! Here's a simple example:

import axios from 'axios';

let cancel;

function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  cancel = axios.CancelToken.source();

  axios.post('/upload', formData, { cancelToken: cancel.token })
    .then(response => {
      console.log('File uploaded successfully:', response.data);
    })
    .catch(error => {
      if (axios.isCancel(error)) {
        console.log('Upload canceled:', error.message);
      } else {
        console.error('Upload failed:', error);
      }
    });
}

function cancelUpload() {
  if (cancel) {
    cancel.cancel('Upload canceled by user.');
  }
}

You can call cancelUpload() to cancel the upload.

What if I want to show a progress bar during the upload?

You can use the onUploadProgress option in Axios to track the upload progress. Here's how you can modify the upload function:

axios.post('/upload', formData, {
  cancelToken: cancel.token,
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload progress: ${percentCompleted}%`);
  }
})