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

Open
weavermedia opened this Issue Jan 4, 2014 · 4 comments

2 participants

@weavermedia

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: https://github.com/blueimp/jQuery-File-Upload/wiki/API#how-to-cancel-an-upload 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.

@repurpose

Any luck with this?

@weavermedia

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 s3_direct_upload.js.coffee 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) ->
        e.preventDefault()
        if confirm('Are you sure you want to cancel this upload?')
          jqXHR.abort()
          node.remove()
    # 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
      else
        forms_for_submit = [data]
    else
      # 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'>
  ....
    {%=o.name%} - <span class='cancel'>CANCEL</span>
    ....
</script>

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 https://github.com/blueimp/jQuery-File-Upload, on which this gem is based.

I hope this helps.

@weavermedia

By the way I copied the raw code from the s3_direct_upload.js.coffee here into a s3_direct_upload_custom.js.coffee 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.

@repurpose

🍰

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