How to cancel/abort an in-progress upload? #145

weavermedia opened this Issue Jan 4, 2014 · 4 comments

2 participants


I'd like to have a simple [Cancel Upload] button that would trigger an jqXHR.abort() method for all uploads currently in progress.

The code for canceling in jquery-file-upload is provided here: but I'm not sure how to implement it.

I've tried adapting the code in the above link into my main application.js but I don't know how to get filesList required when setting the jqXHR variable.


Any luck with this?


Yes, I got this working in the last few days actually. I just had to add some extra functionality to the add: method of the upload form in like this:

add: (e, data) ->
  file = data.files[0]
  file.unique_id = Math.random().toString(36).substr(2,16)

  unless settings.before_add and not settings.before_add(file)
    current_files.push data
    if $('#template-upload').length > 0
      data.context = $($.trim(tmpl("template-upload", file)))
      # make node a reference to the individual upload
      node = $(data.context).appendTo(settings.progress_bar_target || $uploadForm)
      # add a click event to the cancel button in the node that will cancel the upload
      node.find('.cancel').click (e) ->
        if confirm('Are you sure you want to cancel this upload?')
    # back to original code
    else if !settings.allow_multiple_files
      data.context = settings.progress_bar_target
    if settings.click_submit_target
      if settings.allow_multiple_files
        forms_for_submit.push data
        forms_for_submit = [data]
      # set jqXHR here
      jqXHR = data.submit()

Then add a cancel button to the progress bar template in the HTML:

<script id='template-upload' type='text/x-tmpl'>
    {} - <span class='cancel'>CANCEL</span>

This adds a [CANCEL] button after the filename. Clicking [CANCEL] brings up an prompt. When the user confirms the action the upload is aborted and the progress bar template is removed from the DOM.

I cobbled this together from a few questions and answers I found on this gem and, on which this gem is based.

I hope this helps.


By the way I copied the raw code from the here into a file and required it from my application.js because there are a couple of other tweaks I want to do like drop zones etc. that will be easier to do with access to the whole file.



Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment