Aviary Photo Editor hack

Question

I am using the Aviary Photo Editor, and I want users to use their own photos without writing PHP. So I created a code so that the user places the url of image and then they can edit it there, code is

$(function() {
 $('#imgsrc').hide();
  $('#edit').hide();
$('#sub_img').click(function(e) {
  e.preventDefault();
     var grant= $('#photo_url').val();
   $('#imgsrc').attr('src', grant).show();
   $('#edit').show();
 });
});

Though I am getting this error

There was a problem loading your image provided by URI to theurlconfig key. Either you typed the address wrong, it's not reachable by the public (and our service at http://featherservices.aviary.com/), or it doesn't really exist. Or maybe YOU don't and this is all just a dream. WAKE UP!

The Code for the Aviary is

<div id="photo_edit">
 <!-- Load Feather code -->
  <script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
 <div id='injection_site'></div>

  <input type="text" id="photo_url" placeholder="URL of Image"/>
     <button id="sub_img">Submit Image</button>

    <img id="imgsrc" src=""/>
      <!-- Instantiate Feather -->
 <script type="text/javascript">
   var featherEditor = new Aviary.Feather({
   apiKey: 'LuucZHMFU0yLQSnGBgAqsg',
   apiVersion: 2,
   tools: 'enhance,resize,crop,contrast,sharpness,text,whiten,effects,orientation,warmth,brightness,saturation,draw,redeye,blemish',
   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;
   }
 </script>

 <!-- Add an edit button, passing the HTML id of the image and the public URL ot the image -->
 <p><input id="edit" type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('imgsrc', 'onImageLoad');" /></p>
         </div>

Anyone work with this program before? This is just suppose to be a hack and I don't want to use PHP for the host image. It should just act as a image editor using the url if this is possible?

Answer 1

If you are allowing the user's to upload the files from various web resources.

You can try with the Filepicker.io plugin for the upload functionality.

https://developers.filepicker.io/docs/web/