Merge pull request #49 from ushahidi/842-fix-image-save

842 fix image save
ushahidi · Nov 23, 2015 · 24110e8 · 24110e8
2 parents 84d15e9 + 71fd5b5
commit 24110e8
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 17 deletions.
diff --git a/app/common/common-module.js b/app/common/common-module.js
@@ -3,6 +3,8 @@ angular.module('ushahidi.common', [
 	'ushahidi.common.accordion',
 	'ushahidi.common.offcanvas',
 	'ushahidi.common.modal',
+	'ushahidi.common.custom-on-change',
+	'ushahidi.common.file-upload',
   'ushahidi.common.notification-slider',
 	'ushahidi.common.sticky-sidebar',
     'ushahidi.common.chart'
@@ -56,6 +58,8 @@ require('./directives/dropdown.js');
 require('./directives/accordion.js');
 require('./directives/offcanvas.js');
 require('./directives/modal.js');
+require('./directives/custom-on-change.js');
+require('./directives/file-upload.js');
 require('./directives/notification-slider.js');
 require('./directives/sticky-sidebar.js');
 require('./directives/chart.js');
diff --git a/app/common/directives/custom-on-change.js b/app/common/directives/custom-on-change.js
@@ -0,0 +1,11 @@
+angular.module('ushahidi.common.custom-on-change', [])
+
+.directive('customOnChange', function () {
+    return {
+        restricet: 'A',
+        link: function ($scope, $element, $attrs) {
+            var onChangeFunc = $scope.$eval($attrs.customOnChange);
+            $element.bind('change', onChangeFunc);
+        }
+    };
+});
diff --git a/app/common/directives/file-upload.js b/app/common/directives/file-upload.js
@@ -0,0 +1,21 @@
+angular.module('ushahidi.common.file-upload', [])
+
+.directive('fileUpload', function () {
+    return {
+        restrict: 'E',
+        templateUrl: 'templates/file-upload/file-upload.html',
+        scope: {
+            fileContainer: '='
+        },
+
+        controller: [
+            '$scope',
+            function (
+                $scope
+            ) {
+                $scope.uploadFile = function ($event) {
+                    $scope.fileContainer.file = $event.target.files[0];
+                };
+            }]
+    };
+});
diff --git a/app/common/directives/first-time-config.js b/app/common/directives/first-time-config.js
@@ -30,6 +30,9 @@ function (
             $scope.site = {};
             $scope.saving_config = false;
             $scope.step = 'customize';
+            $scope.fileContainer = {
+                file : null
+            };
 
             // Load config, and open modal if first time login
             var checkConfig = function () {
@@ -65,13 +68,6 @@ function (
                 $scope.modalOpen = false;
             };
 
-            // @todo Copied from settings-editor. Move to shared directive
-
-            // Get selected file
-            // @todo move file handling to own directive, or find a 3rd party implementation
-            $scope.fileNameChanged = function (element) {
-                $scope.file = element.files[0];
-            };
             $scope.clearHeader = function () {
                 $scope.site.image_header = null;
             };
@@ -82,9 +78,9 @@ function (
             var uploadHeaderImage = function () {
                 var dfd = $q.defer();
 
-                if ($scope.file) {
+                if ($scope.fileContainer.file) {
                     var formData = new FormData();
-                    formData.append('file', $scope.file);
+                    formData.append('file', $scope.fileContainer.file);
 
                     $http.post(
                         Util.apiUrl('/media'),

diff --git a/app/setting/directives/setting-editor-directive.js b/app/setting/directives/setting-editor-directive.js
@@ -29,6 +29,9 @@ function (
         templateUrl: 'templates/settings/settings-editor.html',
         link: function ($scope, $element, $attrs) {
             $scope.saving_config = false;
+            $scope.fileContainer = {
+                file : null
+            };
 
             $scope.site = ConfigEndpoint.get({ id: 'site' });
             $scope.userSavedSettings = false;
@@ -46,10 +49,6 @@ function (
 
             $scope.languages = Languages.languages;
 
-            // @todo move file handling to own directive, or find a 3rd party implementation
-            $scope.fileNameChanged = function (element) {
-                $scope.file = element.files[0];
-            };
             $scope.clearHeader = function () {
                 $scope.site.image_header = null;
             };
@@ -60,9 +59,9 @@ function (
             var uploadHeaderImage = function () {
                 var dfd = $q.defer();
 
-                if ($scope.file) {
+                if ($scope.fileContainer.file) {
                     var formData = new FormData();
-                    formData.append('file', $scope.file);
+                    formData.append('file', $scope.fileContainer.file);
 
                     $http.post(
                         Util.apiUrl('/media'),

diff --git a/server/www/templates/file-upload/file-upload.html b/server/www/templates/file-upload/file-upload.html
@@ -0,0 +1,2 @@
+<input id="appearance-header-image" name="file" type="file" custom-on-change='uploadFile'/>
+
diff --git a/server/www/templates/partials/first-time-config.html b/server/www/templates/partials/first-time-config.html
@@ -33,7 +33,8 @@ <h1 translate>settings.customize_your_new_deployment</h1>
 
         <label class="input-label" for="appearance-header-image" translate>settings.appearance_header_image</label>
         <p class="small" translate>settings.appearance_header_image_instructions</p>
-        <input id="appearance-header-image" name="file" type="file" onchange="angular.element(this).scope().fileNameChanged(this)" />
+       <file-upload file-container="fileContainer">
+        </file-upload>
 
         <div class="divider white"></div>
 

diff --git a/server/www/templates/settings/settings-editor.html b/server/www/templates/settings/settings-editor.html
@@ -12,7 +12,8 @@
 
     <label class="input-label" for="appearance-header-image" translate>settings.appearance_header_image</label>
         <p class="small" translate>settings.appearance_header_image_instructions</p>
-    <input id="appearance-header-image" name="file" type="file" onchange="angular.element(this).scope().fileNameChanged(this)" />
+        <file-upload file-container="fileContainer">
+        </file-upload>
     <p class="small" ng-show="site.image_header"><a href="{{ site.image_header }}" translate>settings.current_header</a> <button type="button" ng-click="clearHeader()" class="button button-secondary icon-only trash"></button></p>
 
     <label class="input-label" for="site-settings-email" translate>settings.site_email</label>