Question

I have an Edit button next to each uploaded thumbnail on my page that summons the Aviary modal upon click. What I’d like to do is replace the original file on FP when I save the outcome of editing in Aviary.
filepicker.saveAs doesn’t seem like the right solution because I don’t want to save to a new file, I just want to replace the file on FP.
The “Saving Back” documentation doesn’t seem to apply because it says to POST a full file to the original URL. Ideally I’d like to just have a function take the original url and the new Aviary URL and replace the contents at the original URL.

Is this possible at the moment? Thanks!!!

I’ve pasted my code here:

<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

You actually can POST a url to the filepicker url as well, for example

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

or in javascript

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