socialforge/public/javascripts/avatars.js

/* Redmine - project management software
   Copyright (C) 2006-2013  Jean-Philippe Lang 
   Modified by Jianfeng Tao, to upload one avatar for user*/


(function(){

    function addFile(inputEl, file, eagerUpload) {

        var fileSpan = $('#avatar_file');

        //fileSpan.append(
        //    $('<input>', { type: 'text', 'class': 'filename readonly', name: 'avatar[filename]', readonly: 'readonly'} ).val(file.name),
        //    $('<a>&nbsp</a>').attr({ href: "#", 'class': 'remove-upload' }).click(removeFile).toggle(!eagerUpload)
        //).appendTo('#avatar_fields');

        if(eagerUpload) {
            ajaxUpload(file, fileSpan, inputEl);
        }

        return 1;
    }

    function ajaxUpload(file, fileSpan, inputEl) {

        function onLoadstart(e) {
            fileSpan.removeClass('ajax-waiting');
            fileSpan.addClass('ajax-loading');
            $('input:submit', $(this).parents('form')).attr('disabled', 'disabled');
        }

        function onProgress(e) {
            if(e.lengthComputable) {
                this.progressbar( 'value', e.loaded * 100 / e.total );
            }
        }

        function actualUpload(file, fileSpan, inputEl) {

            ajaxUpload.uploading++;

            uploadBlob(file, $(inputEl).data('upload-path'),$(inputEl).data('source-type'), $(inputEl).data('source-id'),$(inputEl).data('is-direct'),{
                loadstartEventHandler: onLoadstart.bind(progressSpan),
                progressEventHandler: onProgress.bind(progressSpan)
            })
                .done(function(result) {
                    progressSpan.progressbar( 'value', 100 );
                    progressSpan.progressbar( 'destroy');
                    fileSpan.find('input.description, a').css('display', 'inline-block');
                })
                .fail(function(result) {
                    progressSpan.text(result.statusText);
                }).always(function() {
                ajaxUpload.uploading--;
                fileSpan.removeClass('ajax-loading');
                var form = fileSpan.parents('form');

                // if (form.queue('upload').length == 0 && ajaxUpload.uploading == 0) {
                //   $('input:submit', form).removeAttr('disabled');
                // }
                // form.dequeue('upload');
            });
        }


        var progressSpan = $('#upload_progressbar');
        progressSpan.progressbar();
        fileSpan.addClass('ajax-waiting');

        var maxSyncUpload = $(inputEl).data('max-concurrent-uploads');

        if(maxSyncUpload == null || maxSyncUpload <= 0 || ajaxUpload.uploading < maxSyncUpload)
            actualUpload(file, fileSpan, inputEl);
        else
            $(inputEl).parents('form').queue('upload', actualUpload.bind(this, file, fileSpan, inputEl));
    }

    ajaxUpload.uploading = 0;

    function removeFile() {
        $(this).parent('span').remove();
        return false;
    }

    function uploadBlob(blob, uploadUrl, source_type,source_id,is_direct, options) {

        var actualOptions = $.extend({
            loadstartEventHandler: $.noop,
            progressEventHandler: $.noop
        }, options);

        uploadUrl = uploadUrl + '?source_type=' + source_type + '&source_id=' + source_id + '&is_direct=' + is_direct;
        if (blob instanceof window.File) {
            uploadUrl += '&filename=' + encodeURIComponent(blob.name);
        }

        return $.ajax(uploadUrl, {
            type: 'POST',
            contentType: 'application/octet-stream',
            beforeSend: function(jqXhr) {
                jqXhr.setRequestHeader('Accept', 'application/js');
            },
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                xhr.upload.onloadstart = actualOptions.loadstartEventHandler;
                xhr.upload.onprogress = actualOptions.progressEventHandler;
                return xhr;
            },
            data: blob,
            cache: false,
            processData: false
        });
    }

    window.addInputAvatar = function(inputEl) {
//  var clearedFileInput = $(inputEl).clone().val('');

        if (inputEl.files) {
            // upload files using ajax
            uploadAndAttachFiles(inputEl.files, inputEl);
            // $(inputEl).remove();
        } else {
            // browser not supporting the file API, upload on form submission
            var avatarId;
            var aFilename = inputEl.value.split(/\/|\\/);
            avatarId = addFile(inputEl, { name: aFilename[ aFilename.length - 1 ] }, false);
            if (avatarId) {
                $(inputEl).attr({ name: 'avatar[file]', style: 'display:none;' }).appendTo('#avatar_image');
            }
        }

        //clearedFileInput.insertAfter('#avatars_fields');
    }

    function uploadAndAttachFiles(files, inputEl) {

        var maxFileSize = $(inputEl).data('max-file-size');
        var maxFileSizeExceeded = $(inputEl).data('max-file-size-message');

        var sizeExceeded = false;
        $.each(files, function() {
            if (this.size && maxFileSize && this.size > parseInt(maxFileSize)) {sizeExceeded=true;}
        });
        if (sizeExceeded) {
            window.alert(maxFileSizeExceeded);
        } else {
            uploadAndTypeFiles(files,inputEl);
            //$.each(files, function() {addFile(inputEl, this, true);});
        }
    }

    function uploadAndTypeFiles(files, inputEl) {

        var enableType = $(inputEl).data('file-type');
        var typeSupportrdMessage = $(inputEl).data('type-support-message');
        if (enableType == null || enableType.trim() == "")
        {
            $.each(files, function() {addFile(inputEl, this, true);});
            return;
        }
        var typeSupported = false;
        $.each(files, function() {
            var a = this.name.split('.');
            var type = a[a.length-1];
            var rs = enableType.indexOf(type);
            if(rs >= 0) {typeSupported = true }
        });
        if (typeSupported) {
            $.each(files, function() {addFile(inputEl, this, true);});
        } else {
            window.alert(typeSupportrdMessage + enableType);
        }
    }




    function handleFileDropEvent(e) {
        $(this).removeClass('fileover');
        blockEventPropagation(e);

        if ($.inArray('Files', e.dataTransfer.types) > -1) {
            uploadAndAttachFiles(e.dataTransfer.files, $('input:file.file_selector'));
        }
    }

    function dragOverHandler(e) {
        $(this).addClass('fileover');
        blockEventPropagation(e);
    }

    function dragOutHandler(e) {
        $(this).removeClass('fileover');
        blockEventPropagation(e);
    }

    function setupFileDrop() {
        console.log("setupFileDrop");
        $('#avatar_image').on('click', function(){
            console.log("click");
        });
        if (window.File && window.FileList && window.ProgressEvent && window.FormData) {

            $.event.fixHooks.drop = { props: [ 'dataTransfer' ] };

            $('form div.box').has('input:file').each(function() {
                $(this).on({
                    dragover: dragOverHandler,
                    dragleave: dragOutHandler,
                    drop: handleFileDropEvent
                });
            });
        }
    }

    $(document).ready(setupFileDrop);
})();