JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<script src="http://zurb.com/playground/uploads/upload/upload/235/ajaxupload.js"></script>
<div class="panel">
    <img id="thumb" width="100px" height="100px" src="/playground/images/icons/128px/zurb.png"/>

    <form id="newHotnessForm" action="/playground/ajax_upload" method="POST">
        <label>Upload a picture of yourself</label>
        <input type="file" size="20" id="imageUpload" class=""/>
            <a class="button">Save</a>
    </form>
</div>

JavaScript

$(document).ready(function(){

    var thumb = $('img#thumb');	
    
    new AjaxUpload('imageUpload', {
        action: $('form#newHotnessForm').attr('action'),
        name: 'image',
        onSubmit: function(file, extension) {
            $('div.preview').addClass('loading');
        },
        onComplete: function(file, response) {
            thumb.load(function(){
                $('div.preview').removeClass('loading');
                thumb.unbind();
            });
            thumb.attr('src', response);
        }
    });
});