<div class="form-group" ngf-drop ngf-change="setImage($file, message)" ngf-pattern="'image/*'">
            <label class="control-label" translate="message.image" for="field_image">Image</label>
            <div>
                <img data-ng-src="{{'data:' + message.imageContentType + ';base64,' + message.image}}" style="max-height: 100px;" ng-if="message.image"/>
                <div class="help-block clearfix">
                    <span class="pull-left">{{message.imageContentType}} {{byteSize(message.image)}}</span>
                    <button ng-click="message.image=null;message.imageContentType=null;"
                            ng-if="message.image"
                            class="btn btn-default btn-xs pull-right">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
                <button type="file" ngf-select class="btn btn-default btn-block"
                        ngf-change="setImage($file, message)" accept="image/*" translate="entity.action.addimage">
                    Add image
                </button>
            </div>
            <input type="hidden" class="form-control" name="image" id="field_image"
                    ng-model="message.image"
                     />
            <input type="hidden" class="form-control" name="imageContentType" id="field_imageContentType"
                    ng-model="message.imageContentType" />
        </div>
        <div class="form-group" ngf-drop ngf-change="setDocument($file, message)">
            <label class="control-label" translate="message.document" for="field_document">Document</label>
            <div>
                <div class="help-block clearfix">
                    <span class="pull-left">{{abbreviate(message.document)}} {{message.documentContentType}} {{byteSize(message.document)}}</span>
                    <button ng-click="message.document=null;message.documentContentType=null;"
                            ng-if="message.document"
                            class="btn btn-default btn-xs pull-right">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
                <button type="file" ngf-select class="btn btn-default btn-block"
                        ngf-change="setDocument($file, message)" translate="entity.action.addblob">
                    Add blob
                </button>
            </div>
            <input type="hidden" class="form-control" name="document" id="field_document"
                    ng-model="message.document"
                     />
            <input type="hidden" class="form-control" name="documentContentType" id="field_documentContentType"
                    ng-model="message.documentContentType" />
        </div>




angular.module('App').controller('MessageDialogController',
    ['$scope', '$stateParams', '$uibModalInstance', 'DataUtils', 'entity', 'Message', 'User',
        function($scope, $stateParams, $uibModalInstance, DataUtils, entity, Message, User) {

        $scope.message = entity;
        $scope.users = User.query();
        $scope.load = function(id) {
            Message.get({id : id}, function(result) {
                $scope.message = result;
            });
        };

        var onSaveSuccess = function (result) {
            $scope.$emit('App:messageUpdate', result);
            $uibModalInstance.close(result);
            $scope.isSaving = false;
        };

        var onSaveError = function (result) {
            $scope.isSaving = false;
        };

        $scope.save = function () {
            $scope.isSaving = true;
            if ($scope.message.id != null) {
                Message.update($scope.message, onSaveSuccess, onSaveError);
            } else {
                Message.save($scope.message, onSaveSuccess, onSaveError);
            }
        };

        $scope.clear = function() {
            $uibModalInstance.dismiss('cancel');
        };

        $scope.abbreviate = DataUtils.abbreviate;

        $scope.byteSize = DataUtils.byteSize;

        $scope.setImage = function ($file, message) {
            if ($file && $file.$error == 'pattern') {
                return;
            }
            if ($file) {
                var fileReader = new FileReader();
                fileReader.readAsDataURL($file);
                fileReader.onload = function (e) {
                    var base64Data = e.target.result.substr(e.target.result.indexOf('base64,') + 'base64,'.length);
                    $scope.$apply(function() {
                        message.image = base64Data;
                        message.imageContentType = $file.type;
                    });
                };
            }
        };

        $scope.setDocument = function ($file, message) {
            if ($file) {
                var fileReader = new FileReader();
                fileReader.readAsDataURL($file);
                fileReader.onload = function (e) {
                    var base64Data = e.target.result.substr(e.target.result.indexOf('base64,') + 'base64,'.length);
                    $scope.$apply(function() {
                        message.document = base64Data;
                        message.documentContentType = $file.type;
                    });
                };
            }
        };
        $scope.datePickerForCreated = {};

        $scope.datePickerForCreated.status = {
            opened: false
        };

        $scope.datePickerForCreatedOpen = function($event) {
            $scope.datePickerForCreated.status.opened = true;
        };
}]);