image field css and preview

resolves #71

app/app.css

@@ -1734,4 +1734,25 @@ table.dataTable thead .sorting:after {
 /* end page transitions */
 .move-to-bottom, .move-to-top, .move-to-bottom-modal, .move-to-top-modal {
     margin-right: 10px !important;
-}
+}
\ No newline at end of file
+
+/* file upload button */
+
+.fileUpload {
+    position: relative;
+    overflow: hidden;
+    margin: 10px;
+}
+.fileUpload input.upload {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+}
+
+/* end file upload */
\ No newline at end of file

app/shared/directives.js

@@ -357,6 +357,7 @@ app.directive('logout', function ($http, $location, RESTURL) {
                         $rootScope.searchInputs = data;
 
                         $rootScope.current_user = data.current_user;
+                        $rootScope.settings = data.settings;
 
                         $scope.menuItems = $scope.prepareMenu({other: $scope.allMenuItems.other});
 
@@ -553,6 +554,7 @@ app.directive('logout', function ($http, $location, RESTURL) {
                                 file_name: changeEvent.target.files[0].name,
                                 file_content: scope.$parent.model[changeEvent.target.name]
                             }
+                            document.querySelector('#image-preview').src = URL.createObjectURL(changeEvent.target.files[0]);
                         });
                     }
                     reader.readAsDataURL(changeEvent.target.files[0]);

app/shared/templates/filefield.html

@@ -4,7 +4,8 @@
         {{form.title}}
     </label>
 
-    <div class="form-group input-group">
+    <div class="form-group input-group fileUpload btn btn-primary">
+        <span>Dosya seç</span>
         <input type="file"
                ng-model="$$value$$"
                fileread="$$value$$"
@@ -12,11 +13,14 @@
                ng-model-options="form.ngModelOptions"
                ng-disabled="form.readonly"
                sf-changed="form"
-               class="form-control {{form.fieldHtmlClass}}"
+               class="form-control {{form.fieldHtmlClass}} upload"
                schema-validate="form"
                ng-change="form.fileInsert()"
                name="{{form.name}}"/>
     </div>
 
+    <img ng-show="form.avatar" src="{{form.imageSrc || 'img/empty-profile-pic.jpg'}}" alt="" id="image-preview" style="width:
+        100px;" class="pull-left">
+
     <div class="help-block" sf-message="form.description"></div>
 </div>
\ No newline at end of file

app/zetalib/form_service.js

@@ -215,7 +215,9 @@ angular.module('formService', ['ui.bootstrap'])
                         key: k,
                         fileInsert: function () {
                             $scope.$broadcast('schemaForm.error.' + k, 'tv4-302', true);
-                        }
+                        },
+                        imageSrc: scope.model[k] ? $rootScope.settings.static_url + scope.model[k] : '',
+                        avatar: k === 'avatar' ? true : false
                     };
                     v.type = 'string';
                 }

dist/css/app.css

@@ -1749,6 +1749,27 @@ table.dataTable thead .sorting:after {
     margin-right: 10px !important;
 }
 
+/* file upload button */
+
+.fileUpload {
+    position: relative;
+    overflow: hidden;
+    margin: 10px;
+}
+.fileUpload input.upload {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+}
+
+/* end file upload */
+
 /*
  * metismenu - v1.1.3
  * Easy menu jQuery plugin for Twitter Bootstrap 3

dist/templates.js

@@ -1571,7 +1571,8 @@ angular.module("shared/templates/filefield.html", []).run(["$templateCache", fun
     "        {{form.title}}\n" +
     "    </label>\n" +
     "\n" +
-    "    <div class=\"form-group input-group\">\n" +
+    "    <div class=\"form-group input-group fileUpload btn btn-primary\">\n" +
+    "        <span>Dosya seç</span>\n" +
     "        <input type=\"file\"\n" +
     "               ng-model=\"$$value$$\"\n" +
     "               fileread=\"$$value$$\"\n" +
@@ -1579,12 +1580,15 @@ angular.module("shared/templates/filefield.html", []).run(["$templateCache", fun
     "               ng-model-options=\"form.ngModelOptions\"\n" +
     "               ng-disabled=\"form.readonly\"\n" +
     "               sf-changed=\"form\"\n" +
-    "               class=\"form-control {{form.fieldHtmlClass}}\"\n" +
+    "               class=\"form-control {{form.fieldHtmlClass}} upload\"\n" +
     "               schema-validate=\"form\"\n" +
     "               ng-change=\"form.fileInsert()\"\n" +
     "               name=\"{{form.name}}\"/>\n" +
     "    </div>\n" +
     "\n" +
+    "    <img ng-show=\"form.avatar\" src=\"{{form.imageSrc || 'img/empty-profile-pic.jpg'}}\" alt=\"\" id=\"image-preview\" style=\"width:\n" +
+    "        100px;\" class=\"pull-left\">\n" +
+    "\n" +
     "    <div class=\"help-block\" sf-message=\"form.description\"></div>\n" +
     "</div>");
 }]);