使用 Rails 的 Dropzonejs - 从服务器中删除文件

Question

我正在使用 dropzonejs-rails gem 并合并一个用于文件管理的 dropzone。我的上传工作很好，但删除文件让我很痛苦。我无法让侦听器附加，以便 ajax 访问我的服务器。我的强项是 Ruby on Rails，我只有有限的 javascript 经验，所以这可能是这里真正的问题......但也许有人可以帮助我解决我 [可耻] 2 天的斗争。

文件上传后，Dropzone 会在 dropzone 中正确显示 previewTemplate，addRemoveLinks: true 会在缩略图预览中显示删除链接。我的目标是，在用户单击文件的删除链接时，应向服务器发送请求以删除该文件。我从博客、dropzone 常见问题解答、github 问题等中尝试了许多不同的方法。我最接近成功的是：https://github.com/enyo/dropzone/issues/456。

我尝试在成功上传后向.dz-remove 按钮添加事件监听器。此侦听器旨在通过 ajax 请求访问服务器以删除文件。目前，单击预览缩略图上的删除链接只会从 dropzone 中删除预览缩略图，但不会使用 ajax 访问服务器。这是javascript代码：

// Listening for Dropzone upload success
// imageDropzone is the camelized version of the dropzone form's id. 
Dropzone.options.imageDropzone = {
  init: function() {
    this.on("success", function(file, response, event) {

      // Loads image ID to the file preview for use w/deletion
      var elem;
      elem = document.createElement('input');
      elem.setAttribute("name", "id");
      elem.setAttribute("value", response["id"]);
      elem.setAttribute("type", "hidden");
      file.previewTemplate.appendChild(elem);

      // Add the listener to the dz-remove class link
      $('.dz-remove').on("click", (function(e) {
        var imageId, imageToken, _this;
        _this = this;
        e.preventDefault();
        e.stopPropagation();
        imageId = $(_this).parent().find('[name="id"]').val();
        console.log(_this);
        console.log(imageId);
        console.log(imageToken);
        $.ajax({
          url: "/remove_image",
          type: "DELETE",
          dataType: "script",
          data: {
            id: imageId
          }
        });
        return false;
      }), false);
    });
  }
};

因此，它应该找到与单击的删除链接相关的文件信息，并将该信息发送到服务器以进行删除请求。任何人成功地使用 Javascript 为 Ruby on Rails (Rails 4) 应用程序获得了这种方法（或更好的方法？？）？

如果您需要任何其他信息或代码，请告诉我。谢谢！

Answer 1

我最终想出了如何通过 addRemoveLinks 选项（当设置为 true 时）通过 dropzonejs-rails 附带的“删除文件”按钮通过 ajax 请求使其到达 Rails 服务器。 (see dropzonejs.com for more info on that) 这是在@simmi simmi's answer here 的帮助下完成的。

所以，如果有人想知道，这里是 coffeescript 中的代码。 （很抱歉中间问题。如果您需要 JS 格式，请使用 js2coffee.org 转换回 JS 格式，或者如果我收到这样的请求，我可以发布它。）由于它在咖啡脚本中，解释 cmets 将使用“#”符号内嵌添加。

/app/assets/javascripts/upload.js.coffee

  # Note that imageDropzone is the #id of MY dropzone HTML element. Yours may be called myDropzone or otherwise - tailor as needed.
  Dropzone.options.imageDropzone = init: ->
    @on "success", (file, response, event) ->  #triggered by our render JSON's status: 200 "success" response rendered from controller on successful upload.

    # Append the image id as a hidden input
    elem = document.createElement('input')
    elem.setAttribute("name", "image[id]")
    elem.setAttribute("value", response["id"])
    elem.setAttribute("type", "hidden")
    file.previewTemplate.appendChild elem

    # Append the image token as a hidden input.
    # Because images are uploaded as an association (Post model has_many :images), there needs to be a common reference so the Post controller can associate the proper pictures during creation of the Post. 
    elem2 = document.createElement('input')
    elem2.setAttribute("name", "image[token]")
    elem2.setAttribute("value", response["token"])
    elem2.setAttribute("type", "hidden")
    file.previewTemplate.appendChild elem2

    # The "remove file" button's listener needs to be added through "file.previewTemplate" for it to work, but note that "click" does NOT work! 
    # It seemed like the built-in listener gets the "click" call before this one we add here, so it never receives this. 
    # So, I used a "mouseup" listener to have a fighting chance, and it worked. 
    file.previewTemplate.addEventListener "mouseup", (e) ->
      _this = this
      e.preventDefault()
      e.stopPropagation()
      # These next two lines are me grabbing the database reference values I put into the previewTemplate (see above). These are passed through the Ajax call at params. I wanted them to come through hashed like params[:images][:id] & params[:images][:token] for easy use with strong_params.
      imageId = $(_this).parent().find('[name="image[id]"]').val()
      imageToken = $(_this).parent().find('[name="image[token]"]').val()
      $.ajax
        url: "/destroyimage" #This is the route I'm hitting to forward to controller
        type: "DELETE"
        dataType: "script"   #Send as JS
        data:
          image:
            id: imageId
            token: imageToken
      false
    false

这是控制器信息，以防有用：

#app/controllers/images_controller.rb

def create
   @image = current_user.images.build(image_params) # Build through the association

   respond_to do |format|
     if @image.save
       # Send Response: id/token for remove button; status 200 OK for Dropzone success
       format.json { render json: @image, id: @image.id, token: @image.token, :status => 200 }
     else
       # Send Response: status 400 ERROR for Dropzone failure
       format.json { render json: { error: @image.errors.full_messages }, :status => 400 }
     end
   end
 end

 def destroy
   image = current_user.images.where(token: image_params[:token]).where(id: image_params[:id]).take  # Probably a little too redundant on security, but whatever
   respond_to do |format|
     if Image.destroy(image.id)
       format.json { head :ok, :status => 200 }
     else
       format.json { render json: { error: @image.errors.full_messages }, :status => 400 }
     end
   end
 end


 private
 def image_params
   # There's probably a better way to do this, but it worked for me.
   params[:image].present? ? params.require(:image).permit(:id, :filename, :token) : nil
 end

另外，请注意，这是利用 Rails CarrierWave gem 进行文件上传的。我敢肯定它与其他上传 gem 的文件（回形针、蜻蜓等）非常相似。