Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Open
weavermedia opened this Issue · 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.

@rwassey

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.