用Aviary替换编辑后的Filepicker文件

Question

我有一个编辑按钮旁边的每个上传的缩略图在我的页面上，召唤鸟类模式点击。我想要做的是，当我在Aviary中保存编辑结果时，替换FP上的原始文件。filepicker.saveAs似乎不是正确的解决方案，因为我不想保存到新文件，我只想替换FP上的文件。"Saving Back“文档似乎不适用，因为它说要将完整的文件发布到原始URL。理想情况下，我只想有一个函数，接受原始的URL和新的鸟类url，并替换原始URL的内容。

目前这是可能的吗？谢谢！

我在这里粘贴了我的代码：

<script src='http://feather.aviary.com/js/feather.js'></script>
<script src="https://api.filepicker.io/v0/filepicker.js"></script>
<script type="text/javascript">
$(document).on('click', '.delete-image', function(e) {
  var image = $(this).closest('tr').attr('data-image');
  $('.modal-footer .btn-danger').remove();
  $('.modal-footer').append("<button class='delete-confirmed btn btn-danger' data-image='"+image+"'>Delete</button>");
  $('#myModal').modal('show');
  return false;
});

$(document).on('click', '.delete-confirmed', function(e) {
  e.preventDefault();
  var image = $(this).attr('data-image');
  var row = $("tr[data-image="+image+"]");
  $('#myModal').modal('hide');
  $.ajax({
    url: row.attr('data-link'),
    dataType: 'json',
    type: 'DELETE',
    success: function(data) {
      if (data.success) {
        row.hide();
        filepicker.revokeFile(row.attr('data-fplink'), function(success, message) {
          console.log(message);
        });
      }
    }
  });
  return false;
});

//Setup Aviary
var featherEditor = new Aviary.Feather({
    //Get an api key for Aviary at http://www.aviary.com/web-key
    apiKey: '<%= AVIARY_KEY %>',
    apiVersion: 2,
    appendTo: ''
});
//When the user clicks the button, import a file using Filepicker.io
$(document).on('click', '.edit-image', function(e) {
  var image = $(this).closest('tr').attr('data-image');
  var url = $(this).closest('tr').attr('data-fplink');
  $('#aviary').append("<img id='img-"+image+"'src='"+url+"'>");
  //Launching the Aviary Editor
  featherEditor.launch({
    image: 'img-'+image,
    url: url,
    onSave: function(imageID, newURL) {
      //Export the photo to the cloud using Filepicker.io!
      //filepicker.saveAs(newURL, 'image/png');
      console.log('savin it!');
    }
  });
});

filepicker.setKey('<%= FILEPICKER_KEY %>');
var conversions = { 'original': {},
                    'thumb': {
                    'w': 32,
                    'format': 'jpg'
                  },
};
$(document).on("click", "#upload-button", function() {
  filepicker.getFile(['image/*'], { 'multiple': true,
                                    'services': [filepicker.SERVICES.COMPUTER, filepicker.SERVICES.URL, filepicker.SERVICES.FLICKR, filepicker.SERVICES.DROPBOX, filepicker.SERVICES.IMAGE_SEARCH],
                                    'maxsize': 10000*1024,
                                    'conversions': conversions
                                  },
                                  function(images){
      $.each(images, function(i, image) {
        $.ajax({
          url: "<%= product_images_path(@product.id) %>",
          type: 'POST',
          data: {image: JSON.stringify(image)},
          dataType: 'json',
          success: function(data) {
            if (data.success) {
              $('.files').append('<tr><td><img src="'+image.data.conversions.thumb.url+'"</td></tr>')
            }
          }
        });
      });
  });
});

​

Answer 1

实际上，您也可以将url发布到filepicker url，例如

curl -X POST -d "url=https://www.filepicker.io/static/img/watermark.png"
    https://www.filepicker.io/api/file/gNw4qZUbRaKIhpy-f-b9

或在javascript中

$.post(fpurl, {url: aviary_url}, function(response){console.log(response);});