filepicker-rails w/signup form:在Filepicker中删除文件的按钮

Question

在我的Rails3.2应用程序中，我通过filepicker-rails gem使用Filepicker，允许用户在注册表单上上传头像。在f.filepicker_field中，我使用onchange选项调用一个onImageUpload()函数，该函数从自动生成的event.fpfile中获取有关新上传的图像的信息，并禁用Filepicker浏览按钮：

function onImageUpload() {
  file = event.fpfile
  img = $("<img>").prop("src", file.url).css({
      width: '160px',
      height: '160px',
    });
  $("#profile_photo_preview").append(img);
  $(".filepicker-button").toggleClass("disabled");
}; 

我在Filepicker docs section on Widgets上读到了关于event.fpfile的内容。在表单中，我还有一个链接，当单击该链接时，将从DOM中删除最近更新的图像，并重新启用Filepicker按钮：

:javascript 
  $(document).ready(function() {
    $("#picture-remover").click(function() {
      $("#profile_photo_preview").html("");
      if ( $(".filepicker-button").hasClass("disabled") ) {
        $(".filepicker-button").toggleClass("disabled");
      };
    });
  });
...
...
= link_to "Remove Picture", id: "picture-remover"

这一切似乎都运行得很好。唯一的问题是，如果用户删除第一张图片，然后使用Filepicker浏览器上传另一张图片，原始图片仍然保存在我的Filepicker帐户中。

我想让我的“删除图片”链接不仅从DOM中删除图片，还从我的Filepicker帐户中完全删除图片。Filepicker文档中有一节是关于移除/删除文件的here，但我并不真正理解示例代码，也不知道如何自己实现它。我特别搞不懂用于删除文件的InkBlob和用于显示缩略图预览的event.fpfile对象之间的关系。

到目前为止，我已经尝试将下面这行添加到我的“删除图片”链接中，但是没有任何反应：

:javascript 
  $(document).ready(function() {
    $("#picture-remover").click(function() {
      $("#profile_photo_preview").html("");
      if ( $(".filepicker-button").hasClass("disabled") ) {
        $(".filepicker-button").toggleClass("disabled");
      };
      filepicker.remove(InkBlob); #added this line
    });
  });

非常感谢任何能给我指明正确方向的人！

Answer 1

InkBlob和event.fpfile对象具有相同的角色和相同的属性。

在您的示例中，您可以将event.fpfile对象传递给remove函数。

var file = event.fpfile;
filepicker.remove(
  file,
  function(){
    console.log("Removed");
  }
);

一般情况下，要删除filepicker文件，你只需要它的url。

所以这段代码也能很好地工作：

var someObject = {url: 'https://www.filepicker.io/api/file/xaXphhT9R0GB1tPYUQAr'};
filepicker.remove(
  someObject,
  function(){
    console.log("Removed");
  }
);