javascript Примерприкрепленияизображений

Posted 2021-05-03

/**
 * Обеспечивает вложение изображений в переписку
 * @author Elovskiy I.V. <[e-mail]> <[e-mail]>
 * @type {Object}
 */
var broadcastAttachments = {

    init: function () {
        this.initAppVars();
        this.initAppListeners();
        this.initContentEditableDiv();
        this.addPasteHandler();
    },
    /**
     * Инициализация переменных
     */
    initAppVars: function () {
        this.broadcastMsgElem = $('#broadcast_message');
        this.listeners = {};
        this.handlers = {};
        this.broadcastId = null;
        this.companyId = null;
        this.broadcastMethods = null;
        this.broadcastIndicatorElem = null;
        this.userAgent = detect.parse(navigator.userAgent);
    },
    /**
     * Инициализация прослушек
     */
    initAppListeners: function () {
        this.addBtnListener();
        this.addInputListener();
    },
    /**
     * Добавляет прослушку
     * @param element
     * @param event
     * @param handler
     * @param capture
     * @returns {number} Идентификатор прослушки
     */
    addListener: function (element, event, handler, capture) {
        var i = Object.keys(this.listeners).length;
        element.addEventListener(event, handler, capture);
        this.listeners[i] = {
            element: element,
            event: event,
            handler: handler,
            capture: capture
        };
        return i;
    },
    /**
     * Удаляет прослушку по идентификатору
     * @param id
     */
    removeListener: function (id) {
        var h;
        if (id in this.listeners) {
            h = this.listeners[id];
            h.element.removeEventListener(h.event, h.handler, h.capture);
            delete this.listeners[id];
        }
    },
    addBtnListener: function () {
        var attachImageBtn = document.getElementById('broadcast_attach_image_btn');
        this.handlers['attachImageBtn'] = this.addListener(attachImageBtn, 'click', broadcastAttachments.actionAttach, false);
    },
    addInputListener: function () {
        var inputFile = $('#broadcast_file_uploader input')[0];
        this.handlers['inputFile'] = this.addListener(inputFile, 'change', broadcastAttachments.actionInput, false);
    },
    /**
     * Инициализация вспомогательного div-контейнера для IE (вставка из буфера)
     */
    initContentEditableDiv: function() {
        // Только для IE
        if (['IE'].indexOf(this.userAgent.browser.family) !== -1) {
            var div = $('<div />', {
                id: 'broadcast_message_ced',
                contenteditable: true,
                css: {opacity: '0', maxWidth: '0', maxHeight: '0', width: '0', height: '0', minWidth: '0', minHeight: '0', border: '0'}
            });
            $('#broadcast_attach_img_textarea_wrapper').append(div);
            this.contentEditableDiv = $('#broadcast_message_ced');
        }
    },
    /**
     * Обработка события paste
     */
    addPasteHandler: function () {
        this.handlers['pasteHandler'] = this.addListener(this.broadcastMsgElem[0], 'paste', broadcastAttachments.pasteHandler, false);

        // Для IE
        if (['IE'].indexOf(this.userAgent.browser.family) !== -1) {
            this.handlers['contentEditableDivPasteHandler'] = this.addListener(this.contentEditableDiv[0], 'paste', broadcastAttachments.pasteHandler, false);
            $(this.broadcastMsgElem[0]).on('keydown', function (event) {
                if ((event.ctrlKey && event.keyCode === 86) || (event.shiftKey && event.keyCode === 45)) {
                    $(broadcastAttachments.contentEditableDiv).empty();
                    $(broadcastAttachments.contentEditableDiv).focus();
                }
            });
        }
    },
    /**
     * Вызовет клик по label (input type file) для открытия диалога выбора файлов
     */
    actionAttach: function () {
        $('#broadcast_file_uploader label').trigger('click');
    },
    /**
     * Обработка выбранных файлов
     * @param e
     */
    actionInput: function (e) {
        var files = e.target.files;
        if (files.length === 0) return;

        var result = broadcastAttachments.checkRequirements(files);
        if (result.errorType === false && result.errorSize === false) {
            broadcastAttachments.createWindow(files);
        } else {
            broadcastAttachments.createErrorWindow(result);
        }
    },
    /**
     * Создаст окно с ошибкой
     * @param errors
     */
    createErrorWindow: function (errors) {
        var buttons = {};
        buttons[_('ОК')] = true;
        var errorMsg = {
            errorType: _('Только изображения, пожалуйста'),
            errorSize: _('Размер файла не должен превышать 2 мегабайта')
        };
        $.slPrompt((errors.errorType === true) ? errorMsg['errorType'] : errorMsg['errorSize'], {
            close: true,
            title: _('Ошибка'),
            prefix: 'err_',
            buttons: buttons
        });
    },
    /**
     * Проверка файлов
     * Файл должен быть изображением и не более 2 Мб
     * @param files
     */
    checkRequirements: function (files) {
        var result = {};
        result.errorType = false;
        result.errorSize = false;
        for (var k = 0; k < files.length; k++) {
            // Только изображения
            if (!files[k].type.match('image.*')) {
                result.errorType = true;
            }
            // Не более 2Мб
            if (files[k].size > 2097152) {
                result.errorSize = true;
            }
        }
        return result;
    },
    /**
     * Создает окно с предварительным просмотром изображения и вводом комментария
     * @param files
     */
    createWindow: function (files) {
        var buttons = {};
        buttons[_('Загрузить')] = true;
        buttons[_('Отмена')] = false;
        $.slPrompt('<div id="broadcast_file_uploader_thumbs" class="broadcast_file_uploader_thumbs"></div>', {
            close: true,
            title: _('Подтвердите действие'),
            prefix: 'bf_',
            buttons: buttons,
            callback: function (value, message, fields) {
            },
            submit: function (value, message, fields) {
                if (value === true) {
                    var comment = $('#broadcast_image_comment').val();
                    broadcastAttachments.broadcastMethods._addMessage(_('Загрузка изображения...'));
                    var formData;
                    var deferred = [];
                    var errors = [];
                    formData = new FormData();
                    formData.append('path', broadcastAttachments.companyId + '/broadcast/' + broadcastAttachments.broadcastId);
                    for (var i = 0; i < files.length; i++) {
                        formData.append('qqfile', files[i], (files[i].name) ? files[i].name : 'image.png');
                        deferred.push(
                            $.ajax({
                                url: '/File/ajaxUpload',
                                data: formData,
                                processData: false,
                                contentType: false,
                                type: 'post',
                                dataType: 'json',
                                success: function (data) {
                                    bindingsUtil.updateAjaxResponse(data);
                                    if (data.success === true) {
                                        var filePath = data.user_dir + '/' + data.filename;
                                        broadcastAttachments.sendMessage(comment, '/File/show' + filePath, data.filename);
                                    } else if (data.error) {
                                        errors.push(data.error);
                                    }
                                }
                            })
                        );
                    }
                    $.when.apply($, deferred).done(function () {
                        if (errors.length === 0) {
                            $.prompt.closePrompt($('#loadingbox'), null, null, null, null);
                        } else {
                            var errorMsg = errors.reduce(function (str, current, index, errors) {
                                return ((errors.length > 1) ? ((index + 1) + '. ') : '') + str + current + '<br />';
                            }, '');
                            $.showerror(errorMsg);
                            broadcastAttachments.clearInputFile();
                        }
                    });
                } else {
                    broadcastAttachments.clearInputFile();
                }
            },
            loaded: function () {
                broadcastAttachments.actionFileSelect(files);
                var parent = $('#broadcast_file_uploader_thumbs').parent();
                var commentDiv = $('<div />', {});
                var commentTextArea = $('<textarea />', {
                    id: 'broadcast_image_comment',
                    rows: 3,
                    placeholder: _('Добавить комментарий (не обязательно)')
                });
                $(commentTextArea).addClass('form-control');
                $(commentDiv).append(commentTextArea);
                $(parent).append(commentDiv);
                var text = $.trim($(broadcastAttachments.broadcastMsgElem).val());
                if (text !== '') {
                    $(commentTextArea).val(text);
                }
            }
        });
    },
    /**
     * Создает превью изображений
     * @param files
     */
    actionFileSelect: function (files) {
        for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    var div = document.createElement('div');
                    div.className = 'broadcast_file_uploader_thumb';
                    div.innerHTML = ['<img class="broadcast_file_uploader_img" title="', (theFile.name), '" src="', e.target.result, '" />'].join('');
                    document.getElementById('broadcast_file_uploader_thumbs').insertBefore(div, null);
                };
            })(f);
            // Чтение изображений в виде data URL.
            reader.readAsDataURL(f);
        }
    },
    /**
     * Очистит input от выбранных файлов
     */
    clearInputFile: function () {
        var inputFile = $('#broadcast_file_uploader input');
        $(inputFile).attr('type', '');
        $(inputFile).attr('type', 'file');
    },
    /**
     * Подготовит DOM и отправит на сохранение в БД
     * @param comment - комментарий
     * @param imgPath - путь к файлу
     * @param imgName - имя файла
     */
    sendMessage: function (comment, imgPath, imgName) {
        $(broadcastAttachments.broadcastMsgElem).val('');
        this.clearInputFile();

        var commentDiv = $('<div />', {text: comment});
        var wrapperMsg = $('<div />', {});
        var linkImgDiv = $('<div />', {});
        $(linkImgDiv).addClass('broadcast_message_img_div');
        var link = $('<a />', {href: imgPath, target: '_blank'});
        var img = $('<img />', {alt: imgName, src: imgPath});
        $(img).addClass('broadcast_message_img');
        $(link).append(img);
        $(linkImgDiv).append(link);
        $(wrapperMsg).append(commentDiv, linkImgDiv);

        this.broadcastMethods._send(this.broadcastIndicatorElem, this.broadcastId, $(wrapperMsg).html());
        $(this.broadcastMsgElem).val('');
    },
    /**
     * Перехватывает вставку из буфера обмена
     * @param e
     */
    pasteHandler: function (e) {
        // Если поддерживается event.clipboardData (Chrome|Opera|Safari|Firefox)
        if (e.clipboardData) {
            // Получаем все содержимое буфера
            var items = e.clipboardData.items;
            if (items) {
                // Находим изображение
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        // Представляем изображение в виде файла
                        var blob = items[i].getAsFile();
                        var result = broadcastAttachments.checkRequirements([blob]);
                        if (result.errorType === false && result.errorSize === false) {
                            broadcastAttachments.createWindow([blob]);
                        } else {
                            broadcastAttachments.createErrorWindow(result);
                        }
                    }
                }
            }
        } else {
            // IE
            var waitToPastInterval = setTimeout(function () {
                if ($(broadcastAttachments.contentEditableDiv).children().length > 0) {
                    clearInterval(waitToPastInterval);
                    // Поиск изображений
                    var image = $(broadcastAttachments.contentEditableDiv).find('img');
                    if (image.length > 0) {
                        var dataURI = $(broadcastAttachments.contentEditableDiv).find('img')[0].src;
                        var blob = broadcastAttachments.dataURItoBlob(dataURI);
                        var result = broadcastAttachments.checkRequirements([blob]);
                        if (result.errorType === false && result.errorSize === false) {
                            broadcastAttachments.createWindow([blob]);
                        } else {
                            broadcastAttachments.createErrorWindow(result);
                        }
                    } else {
                        // Изображения не найдены, заберём текст
                        var text = window.clipboardData.getData("text");
                        $(broadcastAttachments.broadcastMsgElem).val(text);
                        $(broadcastAttachments.broadcastMsgElem).focus();
                    }
                }
                $(broadcastAttachments.contentEditableDiv).empty();
            }, 1);
        }

    },
    /**
     * Конвертирует строку dataURI в blob-представление
     * @param dataURI
     * @returns {Blob}
     */
    dataURItoBlob: function (dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {type: mimeString});
    },
};