JSFiddle - React, Tailwind, and code Playground

by filepicker

HTML

<script src="http://feather.aviary.com/js/feather.js "></script>
  <div id="web_demo_pane"></div>
  <img id="web_demo_preview" />
  <button id="start_web_demo">Start</button>


<script src='http://feather.aviary.com/js/feather.js'></script>
<script src='//api.filepicker.io/v1/filepicker.js'></script>

JavaScript

//Setup Filepicker.io - to get an apikey, go to https://developers.filepicker.io/register/
    filepicker.setKey('Alj2BuCPwRV2WDepr4bqZz');

 //Setup Aviary
    var featherEditor = new Aviary.Feather({
        //Get an api key for Aviary at http://www.aviary.com/web-key
        apiKey: '7d21594e8',
        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
            });
        });
    };