How to cancel a file upload by clicking on a 'Cancel' button

Question

I have a form which contains a file input within the form and more importantly a cancel button which should cancel a file upload: ``` var $fileImage = $(""); ``` Now I have completed everything when it comes to uploading a file into a server and all that. But I have one problem. The problem I have is that I do not know how to cancel and upload. At the moment if the user clicks on the 'Cancel' button, then nothing happens. What I want to happen is that if the user clicks on the "Cancel" button, then it would navigate to the "stopImageUpload()" function and that it…

Accepted Answer

This an answer for people that may lend here. (not answering completly the question as it is already too old)

I will answer how you can implement cancel upload, or more cancel ajax request. Which can be needed in a lot of applications.

Using axios

You can cancel a request using a cancel token.

The axios cancel token API is based on the withdrawn cancelable promises proposal.

You can create a cancel token using the CancelToken.source factory as shown below:

```
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})
```

And to trigger the cancel

```
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
```

You can also create a cancel token by passing an executor function to the CancelToken constructor:

```
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

Note: you can cancel several requests with the same cancel token.
```

doc https://github.com/axios/axios#cancellation

Using XMLHttpRequest:

We use abort() method of the xhr object.

```
var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
  xhr.abort();
}
```

doc https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

How to cancel a file upload by clicking on a 'Cancel' button

Solution

Problem