upload image from smartphoneApp done

serverPredictor/serverPredictor.py

@@ -32,6 +32,7 @@ class Predict(Resource):
     def post(self):
         print("new predict")
         start = time.time()
+        print(request.files['file'])
         filer = request.files['file']#open the uploaded image, and transform to the numpy array
 
         #process the img
@@ -50,6 +51,8 @@ class Predict(Resource):
         logging.info("  [result]: " + r)
         roundtrip = time.time() - start
         logging.info("  [roundtriptime]: " + str(roundtrip) + "s")
+        print("Response: ")
+        print({'result': r})
         return({'result': r})
 
 api.add_resource(Predict, '/predict')

smartphoneApp/www/js/app.js

@@ -1,5 +1,7 @@
 var urlapi = "http://127.0.0.1:3200/";
 
+var selectedImg="";
+
 angular.module('app', [
     'ionic',
     'app.main',

smartphoneApp/www/js/main.js

@@ -1,10 +1,12 @@
 angular.module('app.main', [])
 
-.controller('MainCtrl', function($scope, $http) {
+.controller('MainCtrl', function($scope, $http, fileReader) {
     $scope.response = "";
-    $scope.model_file={};
+    $scope.imageSrc="";
-    
     $scope.uploadFile = function() {
+        var blob = dataURItoBlob(selectedImg);
+        $scope.img_file= blob;
+
         console.log("$scope.img_file");
         console.log($scope.img_file);
         var fd = new FormData();
@@ -31,50 +33,94 @@ angular.module('app.main', [])
                 });
     };
 
-    /*$scope.takePhoto = function() {
+    function dataURItoBlob(dataURI) {
-        alert("a");
+        // convert base64/URLEncoded data component to raw binary data held in a string
-        console.log("take photo");
+        var byteString;
-        var options = {
+        if (dataURI.split(',')[0].indexOf('base64') >= 0)
-                quality: 100,
+            byteString = atob(dataURI.split(',')[1]);
-                destinationType: Camera.DestinationType.DATA_URL,
+        else
-                sourceType: Camera.sourceType,
+            byteString = unescape(dataURI.split(',')[1]);
-                allowEdit: true,
-                encodingType: Camera.EncodingType.PNG,
-                targetWidth: 500,
-                targetHeight: 500,
-                popoverOptions: CameraPopoverOptions,
-                saveToPhotoAlbum: false,
-                correctOrientation:true
-            };
 
-            $cordovaCamera.getPicture(options).then(function(imageData) {
+        // separate out the mime component
-                //$scope.user.newAvatar = "data:image/jpeg;base64," + imageData;
+        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
-                $scope.img.imgdata = "data:image/jpeg;base64," + imageData;
-                $scope.img.img = imageData;
-                }, function(err) {
-                console.log(err);
-            });
-    };*/
-})
-.directive('fileModel', [
-    '$parse',
-    function($parse) {
-        return {
-            restrict: 'A',
-            link: function(scope, element, attrs) {
-                var model = $parse(attrs.fileModel);
-                var modelSetter = model.assign;
 
-                element.bind('change', function() {
+        // write the bytes of the string to a typed array
-                    scope.$apply(function() {
+        var ia = new Uint8Array(byteString.length);
-                        if (attrs.multiple) {
+        for (var i = 0; i < byteString.length; i++) {
-                            modelSetter(scope, element[0].files);
+            ia[i] = byteString.charCodeAt(i);
-                        } else {
+        }
-                            modelSetter(scope, element[0].files[0]);
+
-                        }
+        return new Blob([ia], {type:mimeString});
-                    });
-                });
-            }
-        };
     }
-]);
+
+})
+.directive("ngFileSelect", function(fileReader, $timeout) {
+    return {
+      scope: {
+        ngModel: '='
+      },
+      link: function($scope, el) {
+        function getFile(file) {
+          fileReader.readAsDataUrl(file, $scope)
+            .then(function(result) {
+              $timeout(function() {
+                $scope.ngModel = result;
+                selectedImg = result;
+              });
+            });
+        }
+
+        el.bind("change", function(e) {
+          var file = (e.srcElement || e.target).files[0];
+          getFile(file);
+        });
+      }
+    };
+  })
+.factory("fileReader", function($q, $log) {
+  var onLoad = function(reader, deferred, scope) {
+    return function() {
+      scope.$apply(function() {
+        deferred.resolve(reader.result);
+      });
+    };
+  };
+
+  var onError = function(reader, deferred, scope) {
+    return function() {
+      scope.$apply(function() {
+        deferred.reject(reader.result);
+      });
+    };
+  };
+
+  var onProgress = function(reader, scope) {
+    return function(event) {
+      scope.$broadcast("fileProgress", {
+        total: event.total,
+        loaded: event.loaded
+      });
+    };
+  };
+
+  var getReader = function(deferred, scope) {
+    var reader = new FileReader();
+    reader.onload = onLoad(reader, deferred, scope);
+    reader.onerror = onError(reader, deferred, scope);
+    reader.onprogress = onProgress(reader, scope);
+    return reader;
+  };
+
+  var readAsDataURL = function(file, scope) {
+    var deferred = $q.defer();
+
+    var reader = getReader(deferred, scope);
+    reader.readAsDataURL(file);
+
+    return deferred.promise;
+  };
+
+  return {
+    readAsDataUrl: readAsDataURL
+  };
+});

smartphoneApp/www/templates/main.html

@@ -1,6 +1,6 @@
 <ion-view view-title="Hotdog - No Hotdog App">
   <ion-content>
-    <div class="row">
+    <!--<div class="row">
       <div class="col">
         <div ng-click="takePhoto()" class="button button-full">
           <i class="icon ion-camera"></i> Take Photo
@@ -11,21 +11,28 @@
           <i class="icon ion-image"></i> From Gallery
         </div>
       </div>
-    </div>
+  </div>-->
-    <input type='file' file-model='img_file'>
+  <br>
+    <input type="file" ng-file-select="onFileSelect($files)" ng-model="imageSrc">
 
     <div class="list card">
       <div class="item item-image">
-        <img ng-src="{{img_file}}">
+        <img ng-src="{{imageSrc}}" />
       </div>
+
       <div ng-click="uploadFile()" class="button button-royal" href="#">
         Send
       </div>
     </div>
-    <a ng-show="response!=''" class="item item-icon-left balanced" href="#">
+    <a ng-show="response=='object'" class="item item-icon-left balanced" href="#">
         <i class="icon ion-checkmark"></i>
         Is a {{response}}
-        </a>
+    </a>
+
+    <a ng-show="response=='noobject'" class="item item-icon-left assertive" href="#">
+        <i class="icon ion-close"></i>
+        Is a {{response}}
+    </a>
     </div>
   </ion-content>
 </ion-view>