CODEWITHSUNDEEP
angularjscordovafile-uploadionic-framework
Sebastian Lagua
Sebastian Lagua

Reputation: 390

How to upload image like a form-data with ionic

I need help with some part of my application! Im trying to upload avatar image with Http Post Request use CordovaFileTransfer and Cordova Camera. And when im trying to do that i have error on my ionic app code 414 url request too long! I use Wordpress Rest Api Json User Plus plugin!

When i send file with Postman it's working, but when i trying to that with code i have error!

That my Button 

    <button ng-click="uploadAvatar()"><i class="fa fa-camera"></i> Upload Avatar</button>

That my Controller 

 $scope.uploadAvatar =  function() {
  var user = AuthService.getUser();
    var options = {
         quality : 75,
         destinationType : Camera.DestinationType.DATA_URL,
         sourceType : Camera.PictureSourceType.CAMERA,
         allowEdit : true,
         encodingType: Camera.EncodingType.JPEG,
         popoverOptions: CameraPopoverOptions,
         targetWidth: 500,
         targetHeight: 500,
         saveToPhotoAlbum: false
     };
     $cordovaCamera.getPicture(options)
     .then(function(imageData) {
        $http.post('http://hannation.me/api/userplus/avatar_upload?cookie=' + user.cookie + '&key=57f211a0354d7' + '&avatar=data:image/png;base64,' + imageData)
        
     }, function(error) {
         console.error(error);
     });
    }

What i do wrong? I think my code is correct because code try to send the file to server right? Please help me i lose one week with this small part!

Im changing to this with 

 $scope.uploadAvatar =  function() {
  var user = AuthService.getUser();
var options = {
     quality : 75,
     destinationType : Camera.DestinationType.DATA_URL,
     sourceType : Camera.PictureSourceType.CAMERA,
     allowEdit : true,
     encodingType: Camera.EncodingType.JPEG,
     popoverOptions: CameraPopoverOptions,
     targetWidth: 500,
     targetHeight: 500,
     saveToPhotoAlbum: false
 };
 $cordovaCamera.getPicture(options)
 .then(function(imageData) {
    var req = {
      method: 'POST',
      url: 'http://hannation.me/api/userplus/avatar_upload',
      data: 'cookie=' + user.cookie + '&key=57f211a0354d7' + '&avatar=data:image/png;base64' + imageData
    }
    $http(req).then(function(response){
         console.log(req);
      }, 
      function(error) {
         console.error(error);
      })
})
  }

But it steel doesn't work! Right now i have 404 error!

First Image

Second Image

Upvotes: 0

Views: 1489

Answers (1)

Divyesh Savaliya
Divyesh Savaliya

Reputation: 2740

This is because you are mismatch with post and get, you are writing $http.post but you are passing data in url.

var req = {
    method: 'POST',
    url: 'http://hannation.me/api/userplus/avatar_upload',
    data: cookie=' + user.cookie + '&key=57f211a0354d7' + '&avatar=data:image/png;base64,' + imageData
}

$http(req).then(function(response){
     console.log(response);
}, function(error){
     console.log(error);
});

check docs of angularjs http

Upvotes: 1

Related Questions