hoodcms 5.0.7 → 5.0.11

package/dist/js/core/Media.js

@@ -0,0 +1,363 @@
+import { Alerts } from "./Alerts";
+import { Response } from "./Response";
+import { DataList } from "./DataList";
+import { ModalController } from "./Modal";
+import { Validator } from "./Validator";
+import { Inline } from "./Inline";
+export class MediaService {
+    constructor(element, options) {
+        this.options = {
+            action: 'show',
+            size: 'large'
+        };
+        this.galleryInitialised = false;
+        this.selectedMedia = new Array();
+        this.element = element;
+        if (!this.element) {
+            return;
+        }
+        this.options = Object.assign(Object.assign({}, this.options), options);
+        $('body').off('click', '.media-delete', this.delete.bind(this));
+        $('body').on('click', '.media-delete', this.delete.bind(this));
+        $(this.element).on('click', '.media-item', this.action.bind(this));
+        $(this.element).on('click', '.media-create-directory', this.createDirectory.bind(this));
+        $(this.element).on('click', '.media-delete-directory', this.deleteDirectory.bind(this));
+        this.media = new DataList(this.element, {
+            onLoad: this.options.onListLoad,
+            onError: this.options.onError,
+            onRender: this.options.onListRender,
+            onComplete: function (html, sender) {
+                this.initUploader();
+                // if this is gallery type, add the "Add to gallery button" and hook it to the add function
+                if (this.options.action == 'gallery' && !this.galleryInitialised) {
+                    $('#media-select-modal .modal-footer').removeClass('d-none');
+                    $('#media-select-modal .modal-footer').on('click', this.galleryAdd.bind(this));
+                    this.galleryInitialised = true;
+                }
+                if (this.options.onListComplete) {
+                    this.options.onListComplete(html, sender);
+                }
+            }.bind(this)
+        });
+    }
+    initUploader() {
+        this.uploadButton = document.getElementById('media-add');
+        this.uploader = document.getElementById('media-upload');
+        if (!this.uploadButton || !this.uploader)
+            return;
+        this.progressArea = document.getElementById('media-progress');
+        this.progressText = $('<div class="progress-text text-muted mb-3"><i class="fa fa-info-circle me-2"></i>Uploading file <span></span>...</div>');
+        this.progress = $('<div class="progress"><div class= "progress-bar progress-bar-striped" role="progressbar" style="width:0%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" ></div></div>');
+        this.progressText.appendTo(this.progressArea);
+        this.progress.appendTo(this.progressArea);
+        var dz = null;
+        $("#media-upload").dropzone({
+            url: $("#media-upload").data('url') + "?directoryId=" + $("#media-list > #upload-directory-id").val(),
+            thumbnailWidth: 80,
+            thumbnailHeight: 80,
+            parallelUploads: 5,
+            paramName: 'files',
+            acceptedFiles: $("#media-upload").data('types') || ".png,.jpg,.jpeg,.gif",
+            autoProcessQueue: true,
+            previewsContainer: false,
+            clickable: "#media-add",
+            dictDefaultMessage: '<span><i class="fa fa-cloud-upload fa-4x"></i><br />Drag and drop files here, or simply click me!</div>',
+            dictResponseError: 'Error while uploading file!',
+            init: function () {
+                dz = this;
+            }
+        });
+        dz.on("error", function (file, errormessage) {
+            Alerts.warning(errormessage);
+        }.bind(this));
+        dz.on("success", function (file, data) {
+            Response.process(data);
+        }.bind(this));
+        dz.on("addedfile", function (file) {
+            this.progress.find('.progress-bar').css({ width: 0 + "%" });
+            this.progressText.find('span').html(0 + "%");
+        }.bind(this));
+        // Update the total progress bar
+        dz.on("totaluploadprogress", function (totalProgress, totalBytes, totalBytesSent) {
+            this.progress.find('.progress-bar').css({ width: totalProgress + "%" });
+            this.progressText.find('span').html(Math.round(totalProgress) + "% - " + totalBytesSent.formatKilobytes() + " / " + totalBytes.formatKilobytes());
+        }.bind(this));
+        dz.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            this.progressArea.classList.remove('collapse');
+            this.progress.find('.progress-bar').css({ width: 0 + "%" });
+            this.progressText.find('span').html(0 + "%");
+        }.bind(this));
+        // Hide the total progress bar when nothing's uploading anymore
+        dz.on("complete", function (file) {
+            this.media.reload();
+        }.bind(this));
+        // Hide the total progress bar when nothing's uploading anymore
+        dz.on("queuecomplete", function () {
+            this.progressArea.classList.add('collapse');
+            this.media.reload();
+        }.bind(this));
+    }
+    createDirectory(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        let createDirectoryModal = new ModalController({
+            onComplete: function () {
+                let form = document.getElementById('content-directories-edit-form');
+                new Validator(form, {
+                    onComplete: function (response) {
+                        Response.process(response, 5000);
+                        if (response.success) {
+                            this.media.reload();
+                            createDirectoryModal.close();
+                        }
+                    }.bind(this)
+                });
+            }.bind(this)
+        });
+        createDirectoryModal.show($(e.currentTarget).attr('href'), this.element);
+    }
+    deleteDirectory(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        Alerts.confirm({}, function (result) {
+            if (result.isConfirmed) {
+                Inline.post(e.currentTarget.href, e.currentTarget, function (response, sender) {
+                    // Refresh the list, using the parent directory id - stored in the response's data array.
+                    Response.process(response, 5000);
+                    if (response.data.length > 0) {
+                        var listUrl = document.createElement('a');
+                        listUrl.href = $(this.element).data('url');
+                        listUrl.search = `?dir=${response.data[0]}`;
+                        this.media.reload(new URL(listUrl.href));
+                    }
+                }.bind(this));
+            }
+        }.bind(this));
+    }
+    uploadUrl() {
+        return $("#media-upload").data('url') + "?directoryId=" + $("#media-list > #upload-directory-id").val();
+    }
+    action(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        // Load media object from clicked item in the media list
+        let mediaObject = $(e.currentTarget).data('json');
+        // Perform the chosen action, which is set on the service's options when loaded.
+        switch (this.options.action) {
+            case 'select':
+                this.select(mediaObject, e);
+                break;
+            case 'insert':
+                this.insert(mediaObject, e);
+                break;
+            case 'attach':
+                this.attach(mediaObject, e);
+                break;
+            case 'gallery':
+                this.galleryClick(mediaObject, e);
+                break;
+            default:
+                this.show(mediaObject, e);
+                break;
+        }
+    }
+    show(mediaObject, sender) {
+        // Load the media as a new blade to display.
+        this.currentBlade = new ModalController();
+        this.currentBlade.show($(sender.target).data('blade'), sender.target);
+        // TODO: On close, reload the list and reinstate the modal??
+    }
+    select(mediaObject, e) {
+        Alerts.log(`[MediaService.select] Selecting media object id ${mediaObject.id} - ${mediaObject.filename} and inserting ${this.options.size} url to target: ${this.options.target}`);
+        if (this.options.target) {
+            let target = $(this.options.target);
+            switch (this.options.size) {
+                case 'thumb':
+                    target.val(mediaObject.thumbUrl);
+                    break;
+                case 'small':
+                    target.val(mediaObject.smallUrl);
+                    break;
+                case 'medium':
+                    target.val(mediaObject.mediumUrl);
+                    break;
+                case 'large':
+                    target.val(mediaObject.largeUrl);
+                    break;
+                case 'full':
+                    target.val(mediaObject.url);
+                    break;
+            }
+        }
+        if (this.options.refresh) {
+            MediaService.refresh(mediaObject, this.options.refresh);
+        }
+        // Run the callback for onAction
+        if (this.options.onAction) {
+            this.options.onAction(mediaObject);
+        }
+    }
+    insert(mediaObject, e) {
+        // basic functionality to insert the correct string from the media response (from uploader) to given input element. 
+        Alerts.log(`[MediaService.insert] Selecting media object id ${mediaObject.id} - ${mediaObject.filename} and inserting ${this.options.size} image to target editor: ${this.options.target}`);
+        this.options.targetEditor.insertContent('<img alt="' + mediaObject.filename + '" src="' + mediaObject.url + '" class="img-fluid" />');
+        // Run the callback for onAction
+        if (this.options.onAction) {
+            this.options.onAction(mediaObject);
+        }
+    }
+    attach(mediaObject, e) {
+        // once file is uploaded to given directory, send media id to the given attach endpoint.
+        Alerts.log(`[MediaService.attach] Attaching media object id ${mediaObject.id} - ${mediaObject.filename} to url: ${this.options.url}`);
+        $.post(this.options.url, { mediaId: mediaObject.id }, function (response) {
+            Response.process(response, 5000);
+            MediaService.refresh(response.media, this.options.refresh);
+            // Run the callback for onAction
+            if (this.options.onAction) {
+                this.options.onAction(mediaObject);
+            }
+        }.bind(this));
+    }
+    galleryClick(mediaObject, e) {
+        // once file is uploaded to given directory, send media id to the given attach endpoint.
+        if (!this.isMediaSelected(mediaObject)) {
+            Alerts.log(`[MediaService.galleryClick] Adding to selected media objects - id ${mediaObject.id} - ${mediaObject.filename}.`);
+            this.selectedMedia.push(mediaObject);
+            $(e.currentTarget).parents('.media-item').addClass('active');
+        }
+        else {
+            Alerts.log(`[MediaService.galleryClick] Removing media from selection - id ${mediaObject.id} - ${mediaObject.filename}.}`);
+            this.selectedMedia = this.selectedMedia.filter(function (obj) {
+                return obj.id !== mediaObject.id;
+            });
+            $(e.currentTarget).parents('.media-item').removeClass('active');
+        }
+    }
+    galleryAdd(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        // once file is uploaded to given directory, send media id to the given attach endpoint.
+        Alerts.log(`[MediaService.galleryAdd] Adding ${this.selectedMedia.length} selected media objects  to url: ${this.options.url}`);
+        let mediaIds = this.selectedMedia.map(function (v) {
+            return v.id;
+        });
+        // create the url to send to (add media id's to it as query params)
+        $.post(this.options.url, { media: mediaIds }, function (data) {
+            Response.process(data);
+            // refresh the gallery - - 
+            let galleryEl = document.getElementById(this.options.target);
+            let gallery = galleryEl.hoodDataList;
+            gallery.reload();
+            // Run the callback for onAction
+            if (this.options.onAction) {
+                this.options.onAction(data.media);
+            }
+        }.bind(this));
+    }
+    isMediaSelected(mediaObject) {
+        let added = false;
+        this.selectedMedia.forEach(function (value, index, array) {
+            if (value.id == mediaObject.id) {
+                added = true;
+            }
+        });
+        return added;
+    }
+    static refresh(media, refresh) {
+        let icon = media.icon;
+        if (media.genericFileType === "Image") {
+            icon = media.mediumUrl;
+        }
+        if (refresh) {
+            let $image = $(refresh);
+            $image.css({
+                'background-image': 'url(' + icon + ')'
+            });
+            $image.find('img').attr('src', icon);
+            $image.removeClass('loading');
+        }
+    }
+    delete(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        Alerts.confirm({
+            html: 'This file will be permanently deleted, are you sure?'
+        }, function (result) {
+            if (result.isConfirmed) {
+                Inline.post(e.currentTarget.href, e.currentTarget, function (response) {
+                    Response.process(response, 5000);
+                    this.media.reload();
+                    if (this.currentBlade) {
+                        this.currentBlade.close();
+                    }
+                }.bind(this));
+            }
+        }.bind(this));
+    }
+}
+export class MediaModal {
+    constructor() {
+        $('body').on('click', '[data-hood-media=attach],[data-hood-media=select],[data-hood-media=gallery]', this.load.bind(this));
+        $('body').on('click', '[data-hood-media=clear]', this.clear.bind(this));
+        $('[data-hood-media=gallery]').each(this.initGallery.bind(this));
+    }
+    initGallery(index, element) {
+        // setup the gallery list also, just a simple list jobby, and attach it to the 
+        let el = document.getElementById(element.dataset.hoodMediaTarget);
+        if (el) {
+            new DataList(el, {
+                onComplete: function (data, sender = null) {
+                    Alerts.log('Finished loading gallery media list.', 'info');
+                }.bind(this)
+            });
+        }
+    }
+    load(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.element = e.currentTarget;
+        if (this.modal && this.modal.isOpen) {
+            return;
+        }
+        this.modal = new ModalController({
+            onComplete: function (sender) {
+                this.list = document.getElementById('media-list');
+                this.service = new MediaService(this.list, {
+                    action: this.element.dataset.hoodMedia,
+                    url: this.element.dataset.hoodMediaUrl,
+                    refresh: this.element.dataset.hoodMediaRefresh,
+                    target: this.element.dataset.hoodMediaTarget,
+                    size: this.element.dataset.hoodMediaSize,
+                    beforeAction: function (sender, mediaObject) {
+                    }.bind(this),
+                    onAction: function (sender, mediaObject) {
+                        this.modal.close();
+                    }.bind(this),
+                    onListLoad: (sender) => {
+                    },
+                    onListRender: (data) => {
+                        return data;
+                    },
+                    onListComplete: (data) => {
+                    },
+                    onError: (jqXHR, textStatus, errorThrown) => {
+                    },
+                });
+            }.bind(this)
+        });
+        this.modal.show($(e.currentTarget).data('hood-media-list'), e.currentTarget);
+    }
+    clear(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        Alerts.confirm({}, function (result) {
+            if (result.isConfirmed) {
+                Inline.post(e.currentTarget.href, e.currentTarget, function (response) {
+                    Response.process(response, 5000);
+                    MediaService.refresh(response.media, e.currentTarget.dataset.hoodMediaRefresh);
+                }.bind(this));
+            }
+        }.bind(this));
+    }
+}

package/dist/js/core/Modal.d.ts

@@ -0,0 +1,35 @@
+import { Modal } from "bootstrap";
+export interface ModalOptions {
+    /**
+     * Called before the data is fetched.
+     */
+    onLoad?: (sender: HTMLElement) => void;
+    /**
+     * Called before the fetched HTML is rendered to the list. Must return the data back to datalist to render.
+     */
+    onRender?: (sender: HTMLElement, html: string) => string;
+    /**
+     * Called when loading and rendering is complete.
+     */
+    onComplete?: (sender: HTMLElement) => void;
+    /**
+     * Called when loading and rendering is complete.
+     */
+    onHidden?: (sender: HTMLElement) => void;
+    /**
+     * Called when loading and rendering is complete.
+     */
+    onError?: (jqXHR: any, textStatus: any, errorThrown: any) => void;
+    closePrevious?: boolean;
+}
+export declare class ModalController {
+    element: HTMLElement;
+    modal: Modal;
+    isOpen: boolean;
+    options: ModalOptions;
+    constructor(options?: ModalOptions);
+    show(url: string | URL, sender?: HTMLElement): void;
+    close(): void;
+    dispose(): void;
+    createElementFromHTML(htmlString: string): HTMLElement;
+}

package/dist/js/core/Modal.js

@@ -0,0 +1,69 @@
+import { Modal } from "bootstrap";
+import { Inline } from "./Inline";
+export class ModalController {
+    constructor(options = null) {
+        this.isOpen = false;
+        this.options = {
+            closePrevious: true
+        };
+        this.options = Object.assign(Object.assign({}, this.options), options);
+    }
+    show(url, sender = null) {
+        if (this.options.onLoad) {
+            this.options.onLoad(this.element);
+        }
+        if (this.isOpen) {
+            return;
+        }
+        this.isOpen = true;
+        $.get(url, function (data) {
+            if (this.modal && this.options.closePrevious) {
+                this.close();
+            }
+            if (this.options.onRender) {
+                data = this.options.onRender(this.element, data);
+            }
+            this.element = this.createElementFromHTML(data);
+            this.element.classList.add('hood-inline-modal');
+            $('body').append(this.element);
+            this.modal = new Modal(this.element, {});
+            this.modal.show();
+            // Workaround for sweetalert popups.
+            this.element.addEventListener('shown.bs.modal', function () {
+                $(document).off('focusin.modal');
+            }.bind(this));
+            this.element.addEventListener('hidden.bs.modal', function () {
+                if (this.options.onHidden) {
+                    this.options.onHidden(this.element);
+                }
+                this.dispose();
+                this.isOpen = false;
+            }.bind(this));
+            if (this.options.onComplete) {
+                this.options.onComplete(this.element);
+            }
+        }.bind(this))
+            .fail(function (xhr, textStatus, errorThrown) {
+            this.isOpen = false;
+            if (this.options.onError) {
+                this.options.onError(xhr, textStatus, errorThrown);
+            }
+            Inline.handleError(xhr, textStatus, errorThrown);
+        }.bind(this));
+    }
+    close() {
+        if (this.modal) {
+            this.modal.hide();
+        }
+    }
+    dispose() {
+        this.modal.dispose();
+        this.element.remove();
+    }
+    createElementFromHTML(htmlString) {
+        var div = document.createElement('div');
+        div.innerHTML = htmlString.trim();
+        // Change this to div.childNodes to support multiple top-level nodes
+        return div.firstChild;
+    }
+}

package/dist/js/core/RandomStringGenerator.d.ts

@@ -0,0 +1,11 @@
+export declare interface RandomStringGeneratorOptions {
+    specials?: string;
+    alpha?: string;
+    numeric?: string;
+    numSpecial?: number;
+}
+export declare class RandomStringGenerator {
+    options: RandomStringGeneratorOptions;
+    constructor(options?: RandomStringGeneratorOptions);
+    generate(length: number): string;
+}

package/dist/js/core/RandomStringGenerator.js

@@ -0,0 +1,23 @@
+export class RandomStringGenerator {
+    constructor(options) {
+        this.options = {
+            specials: '!@#$&*',
+            alpha: 'abcdefghijklmnopqrstuvwxyz',
+            numeric: '0123456789',
+            numSpecial: 2
+        };
+        this.options = Object.assign(Object.assign({}, this.options), options);
+    }
+    generate(length) {
+        let password = '';
+        let len = Math.ceil((length - this.options.numSpecial) / 2);
+        for (let i = 0; i < len; i++) {
+            password += this.options.alpha.charAt(Math.floor(Math.random() * this.options.alpha.length));
+            password += this.options.numeric.charAt(Math.floor(Math.random() * this.options.numeric.length));
+        }
+        for (let j = 0; j < this.options.numSpecial; j++)
+            password += this.options.specials.charAt(Math.floor(Math.random() * this.options.specials.length));
+        password = password.split('').sort(function () { return 0.5 - Math.random(); }).join('');
+        return password;
+    }
+}

package/dist/js/core/Response.d.ts

@@ -0,0 +1,20 @@
+import { KeyValue } from "../interfaces/KeyValue";
+import { MediaObject } from "./Media";
+export declare interface Response {
+    data: any[];
+    count: number;
+    url: string;
+    title: string;
+    message: string;
+    success: boolean;
+    exception: KeyValue<string, string>[];
+    errors: string;
+    error: string;
+    media: MediaObject;
+    mediaJson: string;
+    process(autoHide: number): void;
+}
+export declare class Response {
+    constructor();
+    static process(data: Response | any, autoHide?: number): void;
+}

package/dist/js/core/Response.js

@@ -0,0 +1,13 @@
+import { Alerts } from "./Alerts";
+export class Response {
+    constructor() {
+    }
+    static process(data, autoHide = 5000) {
+        if (data.success) {
+            Alerts.success(data.message, data.title, autoHide);
+        }
+        else {
+            Alerts.error(data.errors, data.title, autoHide);
+        }
+    }
+}

package/dist/js/core/Uploader.d.ts

@@ -0,0 +1,7 @@
+import { Response } from './Response';
+export declare class Uploader {
+    constructor();
+    refreshImage(sender: JQuery<HTMLElement>, data: Response): void;
+    singleImage(this: HTMLElement): void;
+    gallery(this: HTMLElement): void;
+}

package/dist/js/core/Uploader.js

@@ -0,0 +1,134 @@
+import { Alerts } from './Alerts';
+export class Uploader {
+    constructor() {
+        if ($('.image-uploader').length || $('.gallery-uploader').length) {
+            $(".upload-progress-bar").hide();
+            $('.image-uploader').each(this.singleImage);
+            $('.gallery-uploader').each(this.gallery);
+        }
+    }
+    refreshImage(sender, data) {
+        $(sender.data('preview')).css({
+            'background-image': 'url(' + data.media.smallUrl + ')'
+        });
+        $(sender.data('preview')).find('img').attr('src', data.media.smallUrl);
+    }
+    singleImage() {
+        let tag = '#' + $(this).attr('id');
+        let $tag = $(tag);
+        let jsontag = '#' + $(this).attr('json');
+        let avatarDropzone = null;
+        $tag.dropzone({
+            url: $tag.data('url'),
+            maxFiles: 1,
+            paramName: 'file',
+            parallelUploads: 1,
+            acceptedFiles: $tag.data('types') || ".png,.jpg,.jpeg,.gif",
+            autoProcessQueue: true,
+            previewsContainer: false,
+            clickable: tag,
+            init: function () {
+                avatarDropzone = this;
+            }
+        });
+        avatarDropzone.on("addedfile", function () {
+        });
+        avatarDropzone.on("totaluploadprogress", function (progress) {
+            $(".upload-progress-bar." + tag.replace('#', '') + " .progress-bar").css({ width: progress + "%" });
+        });
+        avatarDropzone.on("sending", function (file) {
+            $(".upload-progress-bar." + tag.replace('#', '')).show();
+            $($tag.data('preview')).addClass('loading');
+        });
+        avatarDropzone.on("queuecomplete", function (progress) {
+            $(".upload-progress-bar." + tag.replace('#', '')).hide();
+        });
+        avatarDropzone.on("success", function (file, response) {
+            if (response.success) {
+                if (response.media) {
+                    $(jsontag).val(JSON.stringify(response.media));
+                    $($tag.data('preview')).css({
+                        'background-image': 'url(' + response.media.smallUrl + ')'
+                    });
+                    $($tag.data('preview')).find('img').attr('src', response.media.smallUrl);
+                }
+                Alerts.success("New image added!");
+            }
+            else {
+                Alerts.error("There was a problem adding the image: " + response.error);
+            }
+            avatarDropzone.removeFile(file);
+            $($tag.data('preview')).removeClass('loading');
+        });
+    }
+    gallery() {
+        let tag = '#' + $(this).attr('id');
+        let $tag = $(tag);
+        let previewNode = document.querySelector(tag + "-template");
+        previewNode.id = "";
+        let previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+        let galleryDropzone = null;
+        $tag.dropzone({
+            url: $tag.data('url'),
+            thumbnailWidth: 80,
+            thumbnailHeight: 80,
+            parallelUploads: 5,
+            previewTemplate: previewTemplate,
+            paramName: 'files',
+            acceptedFiles: $tag.data('types') || ".png,.jpg,.jpeg,.gif",
+            autoProcessQueue: true,
+            previewsContainer: "#previews",
+            clickable: ".fileinput-button",
+            init: function () {
+                galleryDropzone = this;
+            }
+        });
+        $(tag + " .cancel").hide();
+        galleryDropzone.on("addedfile", function (file) {
+            $(file.previewElement.querySelector(".complete")).hide();
+            $(file.previewElement.querySelector(".cancel")).show();
+            $(tag + " .cancel").show();
+        });
+        // Update the total progress bar
+        galleryDropzone.on("totaluploadprogress", function (totalProgress, totalBytes, totalBytesSent) {
+            let progressBar = document.querySelector("#total-progress .progress-bar");
+            progressBar.style.width = totalProgress + "%";
+        });
+        galleryDropzone.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            let progressBar = document.querySelector("#total-progress");
+            progressBar.style.opacity = "1";
+        });
+        // Hide the total progress bar when nothing's uploading anymore
+        galleryDropzone.on("complete", function (file) {
+            $(file.previewElement.querySelector(".cancel")).hide();
+            $(file.previewElement.querySelector(".progress")).hide();
+            $(file.previewElement.querySelector(".complete")).show();
+            console.error("Uploader.Gallery.Dropzone.OnComplete - Inline.Refresh('.gallery') is not implemented.");
+            //Inline.Refresh('.gallery');
+        });
+        // Hide the total progress bar when nothing's uploading anymore
+        galleryDropzone.on("queuecomplete", function (progress) {
+            let totalProgress = document.querySelector("#total-progress");
+            totalProgress.style.opacity = "0";
+            $(tag + " .cancel").hide();
+        });
+        galleryDropzone.on("success", function (file, response) {
+            console.error("Uploader.Gallery.Dropzone.OnSuccess - Inline.Refresh('.gallery') is not implemented.");
+            //Inline.Refresh('.gallery');
+            if (response.success) {
+                Alerts.success("New images added!");
+            }
+            else {
+                Alerts.error("There was a problem adding the profile image: " + response.error);
+            }
+        });
+        // Setup the buttons for all transfers
+        // The "add files" button doesn't need to be setup because the config
+        // `clickable` has already been specified.
+        $(".actions .cancel").click(function () {
+            galleryDropzone.removeAllFiles(true);
+        });
+    }
+}