Adobe Creative SDK for Web saving edited image

Question

I am implementing the Adobe Creative SDK product onto my site for administrative use; administrators are able to access specific images (used on the frontpage slider), edit, and save.

The trouble is that Adobe's documentation on how to take advantage of the onSave() callback function is very vague. I had to go to the old site, Aviary, to find answers, but even there it's quite vague.

First, I am pulling the images off the server using a MySql DB query (there's at least 2 images in the slider so I wanted this to be database-driven rather than static). The images are stored as files with reference to them in the DB.

Second, once the images are displayed on the page (all of them are displayed on the administrative page along with text overlays, links, etc.), the administrator can click on the image and the Adobe Creative SDK is called and the editor window shows. All good.

Third, after editing, the admin can click "Save" and his edits are saved to the Adobe cloud temporarily (and the edited image replaces the original image on the page). What I need is for the image to ALSO save on my server OVERRIDING the original image (I don't want to have to do a DB update - too much extra work).

This is where the vague instructions at Adobe and Aviary are not helpful.

Here's my code...

(These is the functions from Adobe Creative SDK):

var featherEditor = new Aviary.Feather({
     apiKey: 'myapikey',
     theme: 'dark', // Check out our new 'light' and 'dark' themes!
     tools: 'all',
     appendTo: '',
     onSave: function(imageID, newURL) {
          var img = document.getElementById(imageID);
          img.src = newURL;
     },
     onError: function(errorObj) {
          alert(errorObj.message);
     }
});
function launchEditor(id, src) {
     featherEditor.launch({
          image: id,
          url: src
     });
     return false;
}

Essentially each image that is loaded includes in the <img> tag an onclick event which looks like:

<a href="#" onclick="return launchEditor('editableimage<?php echo $srow->id ?>', 'http://www.3yearlectionary.org/assets/slider/<?php echo $srow->sld_image ?>');"><img id="editableimage<?php echo $srow->id ?>" src="assets/slider/<?php echo $srow->sld_image ?>" /></a>

This calls the launchEditor function and shows the editor. When Save is clicked, among a few other things, the onSave() callback is fired and it is in that callback function that I can save the image locally.

BUT Adobe only offers the following examples to accomplish this and they make little sense to me:

First, it appears that this needs to be added to the onSave() function:

$.post('/save', {url: newURL, postdata: 'some reference to the original image'})

I'm assuming that the '/save' would actually be the php script I use to do the work...or maybe it's the location on the server to save the image...not sure. The 'postdata' says it needs "some reference to the original image", but I don't really know how to get that. I tried using "url" from the launchEditor() function because it appears that it was passed to the featherEditor, but that didn't work, it just returned a null value when I did an alert().

If someone could help me figure this out, I can easily take care of the server side php which does the saving. But I just don't know how to get the new image that Adobe has saved to override the old image on my server. Thanks!

Answer 1

The Image Editor onSave() method

onSave() is just a hook; it is the method called after the image save is complete. What you put inside of the onSave() method is entirely up to you.

Just to illustrate, you could 1) replace the original image element's source with the new edited image URL, then 2) close the editor:

onSave: function(imageID, newURL) {
    originalImage.src = newURL;
    featherEditor.close();
}

You could even just put a console log in there, but that wouldn't do much for the user.

Again, onSave() is just a hook that is used after the save is complete, and its content is completely up to you.

Posting to your server

The code you showed in your question is just an example of how you might post the data to your server using jQuery within the Image Editor's onSave() method. There is no requirement that you do it this way; you don't even have to use jQuery.

For clarity, here's a look at that example again:

$.post('/save', {url: newURL, postdata: 'some reference to the original image'})

The endpoint

The example above uses the jQuery post() method to hit a /save endpoint on your server. This endpoint could be anything you want it to be. If you have an endpoint on your server called /upload-image, you could use that instead.

In your case, at this endpoint would be the PHP script that handles the image file save and database update.

The post data

The second argument to post() is an object with the data that you want to pass. In this example, we're passing:

1. the newURL of the edited image so your server can do something with it (see Important note below)
2. a reference to the original image (arbitrarily named postdata here) so your server can know what image was edited

You can put anything you want in this object. It depends on what your server script needs. But at the bare minimum, I would think it would need the newURL and likely some way to reference the original image in your database.

Important note: as noted in the Creative SDK for web Image Editor guide, the newURL that you receive in the onSave() method is a temporary URL. It expires in 72 hours. That means that your server script needs to save the image itself to your server. If you only store the URL in your database, your images will start disappearing in 72 hours.