stfalcon / fwdays

web/js/InlineUpload.js

var InlineUpload = {
    dialog: null,
    options: {
        form_class: 'inline_upload_form',
        action: '/posts/upload',
        iframe: 'inline_upload_iframe'
    },
    display: function(hash) {

The parameter hash is not used and could be removed.

        var self = this;

        this.dialog = $(document).find(".inline_upload_container");

        if (!this.dialog.size()) {
            // Create invisible form and iframe
            this.dialog = $([
                '<div style="opacity:0;position:absolute;" class="inline_upload_container"><form class="',this.options.form_class,'" action="',this.options.action,'" target="',this.options.iframe,'" method="post" enctype="multipart/form-data">',
                '<input name="upload_file" type="file" /></form>' +
                '<iframe id="',this.options.iframe,'" name="',this.options.iframe,'" class="',this.options.iframe,'" src="about:blank" width="0" height="0"></iframe></div>',
            ].join(''));
            this.dialog.appendTo(document.body);
        }

        // make 'click' action on file element right after 'Picture' selection on markItUp menu
        // to show system dialog
        $("input[name='upload_file']").focus();
        $("input[name='upload_file']").trigger('click');

        // submit hidden form after file was selected in system dialog
        $("input[name='upload_file']").on('change', function(){
            if ($(this).val() != '') {
                $('.' + self.options.form_class).submit();
            }
        });

        // response will be sent to the hidden iframe
        $('.' + this.options.iframe).bind('load', function() {
            var responseJSONStr = $(this).contents().text();
            if (responseJSONStr != '') {
                var response = $.parseJSON(responseJSONStr);
                if (response.status == 'success') {
                    var block = ['<img src="' + response.src + '" width="' + response.width + '" height="' + response.height + '" alt="" class=""/>'];
                    $.markItUp({replaceWith: block.join('')} );
                } else {
                    alert(response.msg);

The alert UI element is often considered obtrusive and is generally only used as a temporary measure. Consider replacing it with another UI element.

                }
                self.cleanUp();
            }
        });
    },
    cleanUp: function() {
        $("input[name='upload_file']").off('change');
        this.dialog.remove();
    }
};