jquery - 如何取消正在上传到 Amazon S3 的文件？

Question

我添加了通过 Dropbox Chooser 将文件从 Dropbox 上传到我的网站的功能。一切工作正常，除了一件事 - 我不知道如何正确实现 Cancel 功能。它应该以这种方式工作 - 当您单击取消时 - 相应的文件面板应该从 UI 中删除，并且从 Dropbox 上传应该停止。

当用户单击从 Dropbox 中选择并选择文件并单击提交时，我向 Rails 的方法 发起一个 Ajax 请求add_file_via_dropbox。在此方法中，我通过 Paperclip gem 的帮助获得了 Dropbox 文件的 URL，以便将其上传到 Amazon S3 服务器。

当用户单击取消时，我想删除部分上传到S3文件，该文件将存储(成功上传后)在content.attachment中 属性。但是当他点击取消时 - 文件仍在上传(否则他不会看到取消链接)，我不知道如何立即删除它。

我的另一个想法是，我可以简单地将 cancelled 属性添加到 content 中，然后不显示任何此类属性 == 的 content 真。但这种方法无法避免浪费 Amazon S3 空间，因此我应该每天运行一次后台任务来删除已取消 附件。我不想首先将它们保存在 S3 上。是否可以？我考虑过将 Controller 的操作 add_file_via_dropbox 移动到后台作业，这样我就可以在收到客户端的 cancel ajax 请求后立即kill它。我对这一切有点困惑。你会如何解决这个问题？谢谢。

product_form.html.erb

$.ajax({

  // Cancel file uploading on client side via jqXHR.abort()
  // It's quite useless because with 99% probability that request     
  // already was sent to Rails and is processing by appropriate action

  beforeSend: function(jqXHR, options) {
    tmpl.find('a').click(function(e) {
      e.preventDefault();
      jqXHR.abort();
      $(this).parents('li').remove();
    });
  },
  type: "POST",
  dataType: "json",
  url: "<%= add_file_via_dropbox_url %>",
  data: { product_id: $("#fileupload").data("product_id"), file: dropbox_file },
})

// When Rails response is returned - update UI with "successful upload state"
.done(function(json_file) {
  var done_tmpl = $(tmpl("template-download", json_file));
  var li = $(".files_list").find('[data-uuid="' + json_file.uuid + '"]');
  li.replaceWith(done_tmpl);
}
})

product_controller.rb

# This method is called by Ajax request
def add_file_via_dropbox
  product = Product.find(params[:product_id])

  # Each Product has_many Contents(files)
  file = params[:file]
  content = product.contents.build
  content.attachment_remote_url = file[:url]
  content.save

  # Construct json response object for Ajax call
  json_obj = []
  json_obj << {name: content.attachment_file_name,
               size: content.attachment_file_size,
               url: content.attachment.url,
               thumbnailUrl: content.attachment.url,
               deleteUrl: "#{root_url}profile/products/delete_content/#{product.id}/#{content.id}",
               deleteType: "DELETE",
               uuid: file[:uuid]}

  respond_to do |format|
    format.json { render json: json_obj }
  end
end

内容.rb

class Content
  attr_reader :attachment_remote_url
  has_attached_file :attachment, bucket: ENV['S3_BUCKET_NAME']

  def attachment_remote_url=(url_value)
    self.attachment = URI.parse(url_value)
  end
end

稍后添加

我更详细地研究了 Paperclip 的工作原理:

1)当这行代码执行时

content.attachment_remote_url = file[:url]

此回形针代码从 paperclip/.../uri_adapter.rb 执行它从给定的 URL(在我的示例中为 Dropbox URL)下载文件并将其保存在本地(Rails 服务器中的临时文件中)

class UriAdapter < AbstractAdapter
  def initialize(target)
    @target = target
    @content = download_content # <----
    cache_current_values
    @tempfile = copy_to_tempfile(@content)
  end

...

def download_content
  open(@target) # method from 'open-uri' library
end

2) 仅当我在此处保存模型时，此文件才会推送到 S3:

content.attachment_remote_url = file[:url]
content.save # <----

Paperclip save 方法将被调用:(paperclip/.../attachment.rb)

def save
  flush_deletes unless @options[:keep_old_files]
  flush_writes # <-----
  @dirty = false
  true
end

然后flush_writes然后将本地文件推送到S3(paperclip/.../s3.rb)

def flush_writes    
  # omitted code       
  s3_object(style).write(file, write_options) # method from `aws-sdk` gem
  # omitted code                 
  end

因此，我将原来的问题缩小到这两个问题:

1) 当 open(@target) 已经在运行时，如何取消调用(文件正在下载到我的 Rails 服务器)

2) 当文件从 Rails 服务器上传到 S3 时，如何取消对 s3_object(style).write(file, write_options) 的调用？

Answer 1

如果在服务器端将文件处理到 S3 之前文件仍在上传到您的服务器，您将需要像之前一样中止连接。 IE。 How to cancel/abort jQuery AJAX request?

如果文件已上传到服务器并且正在上传到 S3:因为 ruby​​ 不是基于异步的，所以您本质上必须让文件上传，但因为服务器现在正在上传它，所以您的客户端可以从技术上讲，请离开该页面。所以:当您的服务器收到文件时，我会传回一个唯一的 ID，如果用户仍然单击取消，则将 ID 重新输入并让您的服务器轮询或即 cron 删除要删除的文件。