Ionic app image upload from camera / photo library

After some digging around and lot's of trying I finally got it working.

This is the code I came up with:

// open PhotoLibrary    $scope.openPhotoLibrary = function() {        var options = {            quality: 50,            destinationType: Camera.DestinationType.FILE_URI,            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,            allowEdit: true,            encodingType: Camera.EncodingType.JPEG,            popoverOptions: CameraPopoverOptions,            saveToPhotoAlbum: false        };        $cordovaCamera.getPicture(options).then(function(imageData) {            //console.log(imageData);            //console.log(options);               var image = document.getElementById('tempImage');            image.src = imageData;              var server = "http://yourdomain.com/upload.php",                filePath = imageData;            var date = new Date();            var options = {                fileKey: "file",                fileName: imageData.substr(imageData.lastIndexOf('/') + 1),                chunkedMode: false,                mimeType: "image/jpg"            };            $cordovaFileTransfer.upload(server, filePath, options).then(function(result) {                console.log("SUCCESS: " + JSON.stringify(result.response));                console.log('Result_' + result.response[0] + '_ending');                alert("success");                alert(JSON.stringify(result.response));            }, function(err) {                console.log("ERROR: " + JSON.stringify(err));                //alert(JSON.stringify(err));            }, function (progress) {                // constant progress updates            });        }, function(err) {            // error            console.log(err);        });    }

And the code in upload.php on the domain server:

<?php// if you want to find the root path of a folder use the line of code below://echo $_SERVER['DOCUMENT_ROOT']if ($_FILES["file"]["error"] > 0){echo "Error Code: " . $_FILES["file"]["error"] . "<br />";}else{echo "Uploaded file: " . $_FILES["file"]["name"] . "<br />";echo "Type: " . $_FILES["file"]["type"] . "<br />";echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kilobytes<br />";if (file_exists("/files/".$_FILES["file"]["name"]))  {  echo $_FILES["file"]["name"] . " already exists. No joke-- this error is almost <i><b>impossible</b></i> to get. Try again, I bet 1 million dollars it won't ever happen again.";  }else  {  move_uploaded_file($_FILES["file"]["tmp_name"],"/var/www/vhosts/yourdomain.com/subdomains/domainname/httpdocs/foldername/images/".$_FILES["file"]["name"]);  echo "Done";  }}?>

the app I am building for a company had the same issue, what we did is we just posted the image to our server as a base64 string. Then you can simple pull the string from the database and display it in a div. We used the NgCordova camera and then just pass in the data from the takePhoto function.

$scope.takePhoto = function () {            $ionicScrollDelegate.scrollTop();            console.log('fired camera');            $scope.uploadList = false;            $ionicPlatform.ready(function() {                var options = {                    quality: 100,                    destinationType: Camera.DestinationType.DATA_URL,                    sourceType: Camera.PictureSourceType.CAMERA,                    allowEdit: false,                    encodingType: Camera.EncodingType.PNG,                    targetWidth: 800,                    targetHeight: 1100,                    popoverOptions: CameraPopoverOptions,                    saveToPhotoAlbum: false                };                $cordovaCamera.getPicture(options).then(function (imageData) {                    $ionicLoading.show({                        template: 'Processing Image',                        duration: 2000                    });                    $scope.image = "data:image/png;base64," + imageData;                    if (ionic.Platform.isAndroid() === true) {                        $scope.Data.Image = LZString.compressToUTF16($scope.image);                        $scope.Data.isCompressed = 1;                    } else {                        $scope.Data.Image = $scope.image;                        $scope.Data.isCompressed = 0;                    }                    if ($scope.tutorial) {                        $scope.showAlert("Instructions: Step 3", '<div class="center">Now that you have taken a photo of the POD form, you must upload it to the server. Press the upload doc button in the bottom right of the screen.</div>');                    }                    $scope.on('')                }, function (err) {                    console.log(err);                });            }, false);        }; $scope.UploadDoc = function () {            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 {                $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;                });            }        };