Using Filepicker.io with Aviary tool

Question

I am using the Aviary-Filepicker tool to have a user upload an image, crop it, and then save it. When I use the code below in my javascript, the following happens.

1. I click the upload button
2. Filepicker opens
3. I choose an image using fiepicker.
4. The aviary edit pane opens.
5. I crop the image.
6. I save the image.
7. Then filepicker opens again (prompting me to choose another picture).
8. I choose the picture, and then it says my work is saved.
9. The console logs the console.log function.

I do not know why filepicker is opening again after I have cropped it and saved it.

Here is the code:

$(function(){var a=new Aviary.Feather({apiKey:'zwbGz6e420egYruuRuohTA',apiVersion:2,tools: 'all',initTool: 'crop',cropPresets: [['Square','1:1']],
                                      onSave:function(a){filepicker.pickAndStore({mimetype:"image/*"},{},function(fpfiles){
                                                                                   console.log(JSON.stringify(fpfiles));
                                                                                   });},

    onError:function(a){},appendTo:"editpane"});filepicker.setKey(server_vars.apikey);$(".openbutton").click(function(){filepicker.pick({mimetype:'image/*'},function(b){var c=$('<img id="#editimage"/>');c.attr("src",b.url);$(".editpane").empty().append(c);a.launch({image:c[0],url:b.url});});});});

Answer 1

Here is how I did it and it works. I added the export function to the onSave within the aviary function. There is some weirdness trying to customize onSave or OnSaveButtonClicked as described by the Aviary API notes:

        onSave: function(imageID, newURL) {
        var img = document.getElementById(imageID);
        img.src = newURL;
            filepicker.exportFile(
            newURL,
            {mimetype:'image/png'},
            function(FPFile){
            console.log(FPFile.url);
            });
       },
       onError: function(errorObj) {
           alert(errorObj.message);
       }
   });
   function launchEditor(id, src) {
       featherEditor.launch({
           image: id,
       url: src
       });
      return false;
   }
</script>

Answer 2

There are some integration instructions up on the filepicker site, in case you haven't seen them.