/*
 * Copyright 2014-2017 Hewlett Packard Enterprise Development Company, L.P.
 * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
 */

define([
    'backbone',
    'dropzone',
    'find/app/page/customisations/asset-viewer',
    'i18n!find/nls/bundle',
    'text!find/templates/app/page/customisations/asset-widget.html'
], function(Backbone, Dropzone, AssetViewer, i18n, template) {
    'use strict';

    return Backbone.View.extend({

        className: 'col-md-12 col-lg-4',

        template: _.template(template),
        headerTemplate: _.template('<option value=""><%-i18n["customisations.selectFile"]%></option>'),

        initialize: function(options) {
            this.description = options.description;
            this.height = options.height;
            this.title = options.title;
            this.width = options.width;

            this.imageClass = options.imageClass || '';

            this.url = _.result(this.collection, 'url');

            this.assetViewer = new AssetViewer({
                collection: this.collection,
                defaultImage: options.defaultImage,
                height: this.height,
                imageClass: this.imageClass,
                type: options.type,
                width: this.width
            });
        },

        render: function() {
            this.$el.html(this.template({
                description: this.description,
                height: this.height,
                i18n: i18n,
                imageClass: this.imageClass,
                title: this.title,
                width: this.width
            }));

            this.assetViewer.setElement(this.$('.asset-viewer')).render();

            var width = this.width;
            var height = this.height;

            var self  = this;

            this.dropzone = new Dropzone(this.$('.dropzone')[0], {
                acceptedFiles: 'image/*',
                addRemoveLinks: false,
                autoProcessQueue: true,
                // matches Spring Boot setting
                maxFilesize: 1,
                url: this.url,
                dictDefaultMessage: i18n['dropzone.dictDefaultMessage'],
                dictFallbackMessage: i18n['dropzone.dictFallbackMessage'],
                dictFallbackText: i18n['dropzone.dictFallbackText'],
                dictFileTooBig: i18n['dropzone.dictFileTooBig'],
                dictInvalidFileType: i18n['dropzone.dictInvalidFileType'],
                dictResponseError: i18n['dropzone.dictResponseError'],
                dictCancelUpload: i18n['dropzone.dictCancelUpload'],
                dictCancelUploadConfirmation: i18n['dropzone.dictCancelUploadConfirmation'],
                dictRemoveFile: i18n['dropzone.dictRemoveFile'],
                dictRemoveFileConfirmation: i18n['dropzone.dictRemoveFileConfirmation'],
                // check file dimensions before upload
                // see https://github.com/enyo/dropzone/wiki/FAQ#reject-images-based-on-image-dimensions
                accept: function(file, done) {
                    file.acceptDimensions = done;
                    file.rejectDimensions = function() { done(i18n['customisations.fileDimensionsInvalid']); };
                },
                init: function() {
                    // Register for the thumbnail callback
                    // When the thumbnail is created the image dimensions are set
                    this.on('thumbnail', function(file) {
                        if (file.width !== width || file.height !== height) {
                            file.rejectDimensions()
                        }
                        else {
                            file.acceptDimensions();
                        }
                    });

                    this.on('success', function(file) {
                        self.collection.add({id: file.name});
                    });

                    // default error handling displays the server response as is, which is no good
                    this.on('error', function(file, response) {
                        var errorMessage = i18n['customisations.error.' + response] || i18n['customisations.error.default'];
                        $(file.previewElement).find('.dz-error-message').text(errorMessage);
                    })
                }
            });
        },

        remove: function() {
            this.assetViewer.remove();

            Backbone.View.prototype.remove.apply(this, arguments);
        }

    });

});
@@ -457,24 +457,198 @@
 e strict';%0A%0A
+    const DEFAULT_MESSAGE = _.template('%3Ci class=%22hp-icon hp-3x hp-document-upload%22%3E%3C/i%3E%3Cp%3E%3C%25-message%25%3E%3C/p%3E')(%7B%0A        message: i18n%5B'dropzone.dictDefaultMessage'%5D%0A    %7D);%0A%0A
     return B
@@ -2348,43 +2348,23 @@
 ge: 
-i18n%5B'dropzone.dictDefaultMessage'%5D
+DEFAULT_MESSAGE
 ,%0A  

Add icon to asset-widget