Using Filepicker.io with Aviary tool - filepicker.io

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.
I click the upload button
Filepicker opens
I choose an image using fiepicker.
The aviary edit pane opens.
I crop the image.
I save the image.
Then filepicker opens again (prompting me to choose another picture).
I choose the picture, and then it says my work is saved.
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.