Simple take a picture and send the image by $http.post - HELP!


#1

:rotating_light: Hello! :rotating_light:

I read almost all topics in this forum but nothing to solve my problem.
So, I’m trying to take a picture and send it by $http.post to the server.
I have no error, but the picture don’t arrives in the server, nothing…
I think is something about the way my picture is created at it’s origin.
Also I need to send a title and a description on this image.
Follows my code, if someone can help me… Please!

` .controller(‘PhotoCtrl’,
function ( $scope, $http, $cordovaCamera, $cordovaFile, $timeout, $cordovaFileTransfer,
$ionicLoading, $ionicPopup, $state, ionicMaterialInk, ionicMaterialMotion, OAuthToken) {

    $scope.takePicture = function() {
        console.log('Camera acionada...');
        var options = {
            quality: 75,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 350,
            targetHeight: 250,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };
        $cordovaCamera.getPicture(options).then(function(sourcePath) {
            var sourceDirectory = sourcePath.substring(0, sourcePath.lastIndexOf('/') + 1);
            var sourceFileName = sourcePath.substring(sourcePath.lastIndexOf('/') + 1, sourcePath.length);
            console.log('Imagem gerada...');
            console.log("Copying from : " + sourceDirectory + sourceFileName);
            console.log("Copying to : " + cordova.file.dataDirectory + sourceFileName);
            $cordovaFile.copyFile(sourceDirectory, sourceFileName, cordova.file.dataDirectory, sourceFileName).then(function(success) {
                $scope.fileName = cordova.file.dataDirectory + sourceFileName;
            }, function(error) {
                console.dir(error);
                console.log('Erro ao copiar...');
            });

        }, function(err) {
            console.log(err);
            console.log('Erro gerar imagem...');
        });
    };

    $scope.upload = function(dataPhoto) {
        console.log('Upload acionado...');
        var targetPath = $scope.fileName; //"path to your image";
        $scope.targetPath = targetPath;
        if ($scope.targetPath === undefined || $scope.targetPath === null) {
            $ionicPopup.alert({
                title: 'Algo errado!',
                template: 'Opss... Primeiro tire uma foto!'
            });
            return false;
        } else {
            // File name only
            var filename = targetPath.split("/").pop();
            var client_id = $scope.clickedClient_id;
            var options = {
                tittle: dataPhoto.tittle,
                description: dataPhoto.description,
                clients_id: client_id,
                filename: filename,
                photo: targetPath
            };
            console.log('Tentativa de envio...');
            $http.defaults.headers.common.Authorization = 'Bearer ' + localStorage.user_token;
            $http.post("http://my-api.com/photos", options)
                .then(function (result) {
                    $ionicPopup.alert({
                        title: 'Foto Enviada!'
                    });
                    console.log('Foto Enviada!');
                }, function (err) {
                    $ionicPopup.alert({
                        title: 'Algo errado!',
                        template: err.msg
                    });
                });
        }
    }
})`

#2

Verify your http://my-api.com/photos has the right code to manipulate the image. And also, what does your success or error callback return ? Console.log them !


#3

Hello josnyS!
There are absolutely no error!
The API just accept file images…
Like, if i send by Postman application it goes.
What kind of manipulation i need to do?


#4

Did you try set the correct content type?

    headers: {
        'Content-Type': 'multipart/form-data'
    },

#5

[quote=“coreelements, post:4, topic:48373, full:true”][/quote]
Okay, I will try this, but I’m not sure how to…
Some tips? Thanks!


#6

read the docs on $http :slight_smile:


#7

@josnyS

The server console show something like this:

Array
(
   [tittle] => TesTe
   [description] => DescriTom
   [filename] => 1459542123710.jpg
   [photo] => file:///data/data/com.ionicframework.sample374926/files/1459542123710.jpg
)

Sends the path of the image, but empty, no image…