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

ionic-v1
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 !

1 Like
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'
    },
1 Like
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ā€¦