Error in uploading file to server through ionic cordova mobile app.

Question

Hi i am trying to send the image clicked through mobile camera to server. My code is this:

                $scope.sendImage = function () {
                alert($scope.capturedImage);

                $ionicLoading.show({template: 'Sending Image please wait!!!'});
                var imageData = $scope.capturedImage;
                var queryString = base_url + "put/cameraData.php";

                var options = new FileUploadOptions();
                options.fileKey = "file";
                options.fileName = imageData.substr(imageData.lastIndexOf('/') + 1);
                options.mimeType = "image/jpeg";
                options.params = {userid:window.localStorage.userid, token:window.localStorage.token, formid:'1234'}; 
                var ft = new FileTransfer();
                ft.upload(imageData, encodeURI(queryString), win, fail, options);
                function win(r) {
                    JSON.stringify(r);
                    $ionicLoading.hide();
                    alert('Success: '+JSON.stringify(r));
                }

                function fail(error) {
                    $ionicLoading.hide();
                    alert("An error has occurred: Code = " + error.code);
                }
            }

when i checked at server side whether the file is present or not it shows me not present i.e. file size is 0. PHP:

if($_FILES['file']['size'] != 0){
    echo 'present';
}else{
    echo 'not present';
}

ANd on the device actully in the win function it shows me the bytesSent to 4555655 that means near about 4MB file is uploaded.

I am not getting what is happening is there something i am missing?

Answer 1

What we did for our company app is once we grabbed the base64 image string we simply did a http post with the string to the server and then store the images. We had issues with the file transfer method. On android it is also possible to compress the string using LZString.js

Some Code:

$scope.UploadDoc = function () {
            if (ionic.Platform.isAndroid() === true) {
                $scope.Data.Image = LZString.compressToUTF16($scope.image.cropped);
                $scope.Data.isCompressed = 1;
            } else {
                $scope.Data.Image = $scope.image.cropped;
                $scope.Data.isCompressed = 0;
            }
            var req = {
                method: 'POST',
                url: ffService.baseUrlAuth + 'cc/upload',
                headers: {
                    'x-access-token': ffService.token
                },
                data: $scope.Data
            };
            if ($scope.Data.Image === null || $scope.Data.Value === '') {
                $scope.showAlert("Uh Oh!", '<div class="center">Please take a photo of your document before attempting an upload.</div>');
            } else if ($scope.Data.DocType === 0) {
                $scope.showAlert("Uh Oh!", '<div class="center">Please select a doc type for your document before uploading.');
            } else {
                $http(req).success(function (data, status, headers, config) {
                    localStorage.setItem('tutorial', false);
                    $scope.tutorial = false;
                    $scope.getUploads($scope.PODOrder.OrderNo);
                    $scope.showAlert("Success!", '<div class="center">Your Document has been successfully uploaded!</div>');
                    $scope.uploadList = true;
                }).error(function (data, status, headers, config) {
                    $rootScope.$broadcast('loading:hide');
                    $scope.showAlert("Something went wrong!", '<div class="center">Please make sure you have an internet connection and try again.</div>');
                }).then(function (data, status, headers, config) {
                    $scope.Data.Image = null;
                });
            }
        };