boards/static/js/form.js

var isCompact = false;

$('input[name=image]').wrap($('<div class="file_wrap"></div>'));

$('body').on('change', 'input[name=image]', function(event) {
    var file = event.target.files[0];

    if(file.type.match('image.*')) {
        var fileReader = new FileReader();

        fileReader.addEventListener("load", function(event) {
            var wrapper = $('.file_wrap');

            wrapper.find('.file-thumb').remove();
            wrapper.append(
                $('<div class="file-thumb" style="background-image: url('+event.target.result+')"></div>')
            );
        });

        fileReader.readAsDataURL(file);
    }
});

var fullForm = $('.swappable-form-full');

function swapForm() {
    if (isCompact) {
        // TODO Use IDs (change the django form code) instead of absolute numbers
        fullForm.find('textarea').appendTo(fullForm.find('.form-row')[4]);
        fullForm.find('.file_wrap').appendTo(fullForm.find('.form-row')[7]);
        fullForm.find('.form-row').show();
    } else {
        fullForm.find('textarea').appendTo($('.compact-form-text'));
        fullForm.find('.file_wrap').insertBefore($('.compact-form-text'));
        fullForm.find('.form-row').hide();
        fullForm.find('input[type=text]').val('');
    }
    isCompact = !isCompact;

    scrollToBottom();
}

$(document).ready(function() {
    swapForm();
})