What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Filepicker.io with aviary

    Asked by dasjell on December 01, 2012 at 03:42 PM

    I want the ability for folks to edit their photos when they upload them. I can do that with aviary but don't know how to incorporate it with Jotform filepicker.io. On filepicker they have some sample code. Can I add that to my jotform filepicker.io? or do I need to add it to my website?:

    Sample code from filepicker.io

    <!--Import the Aviary and Filepicker.io scripts--> <script src='http://feather.aviary.com/js/feather.js'></script> <script src='//api.filepicker.io/v1/filepicker.js'></script> <!--Your application--> <script type='text/javascript'> //Setup Filepicker.io - to get an apikey, go to https://developers.filepicker.io/register/ filepicker.setKey('MY_API_KEY'); //Setup Aviary var featherEditor = new Aviary.Feather({ //Get an api key for Aviary at http://www.aviary.com/web-key apiKey: 'AVIARY_API_KEY', apiVersion: 2, onSave: function(imageID, newURL) { //Export the photo to the cloud using Filepicker.io! filepicker.export(newURL, {extension:'.png'}); }, appendTo: 'web_demo_pane' }); //Giving a placeholder image while Aviary loads var preview = document.getElementById('web_demo_preview'); //When the user clicks the button, import a file using Filepicker.io var editPane = document.getElementById('start_web_demo'); editPane.onclick = function(){ filepicker.pick({mimetype: 'image/*'}, function(fpfile) { //Showing the preview preview.src = fpfile.url; //Launching the Aviary Editor featherEditor.launch({ image: preview, url: fpfile.url }); }); }; </script>
  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 01, 2012 at 04:11 PM

    For custom script integration, generating the form's source code and embedding it on your site together with the 3rd-party script is what we usually suggest to our users. However, since we do not natively support these codes, we cannot guarantee that it will work as intended.

    It is a 'proceed at your own risk' task and we strongly advise against it unless one is really knowledgeable in web programming.

    This image editing function looks slick though, so I'll be adding this to our feature wishlist. Thank you very much for your ideas.

    Have a great weekend!