How to cancel file upload in Vue

Question

I have a post method

uploadFile: async function () {
  const formData = new FormData();
  formData.append("file", this.file);
  let url = `http://...`;
  try {
    this.source = axios.CancelToken.source();
    const res = await axios.post(url, formData, {
      headers: {
        Authorization: "Token " + this.$store.getters.getToken,
        "Content-Type": "multipart/form-data",
      },
      cancelToken: this.source.token,
    });
  } catch (error) {
  }
}

and cancel method

  cancelLoad: function () {
      this.source.cancel('cancel upload');
  },

The request was canceled, but after reloading my page, the file uploaded.

@tony19 the file was uploaded and I can get it from the backend — user233428
– user233428, Commented Oct 13, 2020 at 18:58

user233428 · Accepted Answer · 2020-10-29 10:00:26Z

1

I've fixed it.

const CancelToken = axios.CancelToken;
let cancel;

const res = await axios.post(url, formData, {
      headers: {...},
      cancelToken: new CancelToken(function executor(c) {
        cancel = c;
      }),
}...

cancel();

answered Oct 29, 2020 at 10:00

user233428

18711 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to cancel file upload in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related