unable to send base64 image code to database

Question

i am trying to send registration details to mysql database from ionic application. i am sure about my web service is working well but when i send base64 image code it gives XMLHttpRequest cannot load http://nightfoxtechnologies.in/locationbasedreminder/index.php. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. error.

i have checked this using postman also but same issue but without base64 data is successfully inserted to database problem occurs when i send base64 image code.

i have checked my base64 code it is correct.

tab-signup.html

<div class="tabs-striped  tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item " href="#/app/login"><i class="icon ion-unlocked"></i> Login </a>
      <a class="tab-item active" href="#/app/signup"> <i class="icon ion-person"></i> Sing Up </a>
    </div>
  </div>

<ion-view view-title="Sign Up" class="loginBg" hide-nav-bar="true" >
  <ion-content class="padding">

  <div class="row responsive-sm padding remvoeBP">
      <div class="col">
           <div class="app-logo"><img src="img/logo.png"></div>

            <div class="list list-inset removePM">
              <label class="item item-input"><input type="text" ng-model="user.username" placeholder="User Name"> </label>
              <label class="item item-input"><input type="text" ng-model="user.password" placeholder="Password"> </label>
                  <script>
                function readImage() {
                    if (this.files && this.files[0]) {
                        var FR = new FileReader();
                        FR.onload = function (e) {
                            $('#myimg').attr("src", e.target.result);
                            localStorage.base64String=e.target.result;
                            $('#base').text(e.target.result);
                        };
                        FR.readAsDataURL(this.files[0]);
                    }
                }
                $(document).ready(function(){
                    $("#myid").change(readImage);
                });
            </script>    
            <img id="myimg" src="" height="100px" width="100px" />
            <div id="base" style="display:none"></div>

              <label class="item item-input"><input type="file" ng-model="user.photo" id="myid" placeholder="Choose Image File"> </label>
              <label class="item item-input"><input type="password" ng-model="user.contactno" placeholder="Contact Number"> </label>
            </div>

            <div class="loginButton"><button class="button ion-person button-block button-balanced" ng-click="register(user);"> Register </button>  </div>
      </div>
  </div>



  </ion-content>
</ion-view>

Controller.js

angular.module('starter.controllers', [])
.controller('doRegistrationCtrl', function($scope,$http, $stateParams , Profiles) {

        $scope.register = function(user) {

        if(typeof(user)=='undefined'){
            $scope.showAlert('Please fill username and password to proceed.');  
            return false;
        }
        var jsonString={};
        jsonString.uname=user.username;
        jsonString.pass=user.password;

        jsonString.photo=localStorage.base64String; //here my base64 image code will be there 
        jsonString.contact=user.contactno;

        $http.post("http://nightfoxtechnologies.in/locationbasedreminder/index.php", {
        action: "doRegister",
        data: JSON.stringify(jsonString)
    })
        .then(function(response) {
            //First function handles success
            console.log("suucess:::"+JSON.stringify(response.data));

            $location.path('/app/dashboard');
        }, function(response) {
            //Second function handles error
            $scope.showAlert('Invalid username or password.');  
        });


    };
    $scope.profile = Profiles.get($stateParams.profileId);
})

obe · Accepted Answer · 2016-03-12T10:00:29.647

0

Even though you're using $http.post(), you are sending the entire thing inside a querystring parameter in the URL itself. Move it out of the GET and into the POST:

$http.post("http://nightfoxtechnologies.in/locationbasedreminder/index.php" {
    action: "doRegister",
    data: jsonString
})
.then();

edited Mar 12 '16 at 10:00

answered Mar 12 '16 at 09:50

obe

7,378
5
31
40

still it gives error "XMLHttpRequest cannot load http://nightfoxtechnologies.in/locationbasedreminder/index.php. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response." – Juned Ansari Mar 12 '16 at 10:32
That's probably a different issue. Maybe this will help? http://stackoverflow.com/questions/25727306/request-header-field-access-control-allow-headers-is-not-allowed-by-access-contr – obe Mar 12 '16 at 10:40

score -1 · Answer 2 · answered Mar 12 '16 at 15:19

-1

Or you can use Cordova file transfer for you ionic app

answered Mar 12 '16 at 15:19

Andrey Komisarenko

1
2

unable to send base64 image code to database

2 Answers2