Upload base64 image to php server

1

Hi,

I am taking a picture with ngcordova and convert it to base64. This works perfectly and can be displayed on my phone app just after it.

Now, I am trying to send the base64 string to my PHP server with the $http from angularjs, but for some reason, it does not receive it. Here is the code.

var request = $http({
  method: "post",
  url: mainUrl + "spus.php",
  params: {
    action: "saveLocationPicture",
    locationPicture: spuInfo.locationPicture  <-- "data:image/png;base64,/9j/44AQSk..."
  }
});

I said that the php server does not receive it, but I think it is not true. Why? Because if I send a shorter string (less than 835 characters), the php server receives it and I can save it to the MySql database. For test, I created 2 columns in the MYSql table. One is of type LongBlob and the other one LongText. It should have plenty of room. :wink:

First of all, is there any limitation to the string that can be sent to the $http “params”?

If so, what is the limit?

Maybe it is my PHP server setup that cannot handle the long base64 string? What do you think?

Thanks

2

Check your “post_max_size” in your php.ini. Maybe you have set this value higher.

http://php.net/manual/en/ini.core.php#ini.post-max-size

3

Hi bwasnie1,

I did not have the “post_max_size” included in my php.ini file. I read about it in the link you gave me and the default is 8M. This should be plenty enough for the string.

Anyway, I added the field and put “12M” because it needs to be higher than “upload_max_filesize” that is already set to 10M.

Unfortunately, it did not work. :frowning:

Any other suggestions?

4

Here is a thread where someone asks a similar question:

http://stackoverflow.com/questions/15640518/unable-to-send-base64-600kb-via-php-post

Give it a try.

5

Hi bwasnie1,

It seems the guy did not find a solution, but it gave me an idea when reading the post.

I looked into the error from the web server (I am using BOA) and found this:

10.74.17.134 - - [14/Jan/2015:18:06:58 +0000] request “(null)” ("(null)"): Header too long at 1028 bytes: "POST /cgi-bin/php/spus.php?action=saveLocationPict…

I also noticed all the forward slash became “%2F” from my base64 string. I don’t think it is the issue though.

I said to myself that maybe it is a configuration in my web server that is not correct.

One field is called “SinglePostLimit: The maximum allowable number of bytes in a single POST.”. This one is already set to 10MB.

Do you have other suggestions that come into your mind?

Thanks

6

Ah, now I know what the problem was :smiley:

In your $http request you set “params” to send your data. In this case, the object data will be append to your url like you posted:

cgi-bin/php/spus.php?action=saveLocationPict…

That’s why your server returns that error.

As you want to post all your data, you have to change your code like this:

var request = $http({
  method: "post",
  url: mainUrl + "spus.php",
  data: {
    action: "saveLocationPicture",
    locationPicture: spuInfo.locationPicture
  }
});
7

I just went to the angularjs site to understand what is the difference between “params” and “data”. I think I understand, but not sure how I will handle the data in my PHP code.

In my present PHP code, I do “$data = $_POST” where “$data = array()”. Then I was getting the “params” like this “$data[‘action’]”.

Now will it be “$data[‘data’][‘action’]” ?

8

You can print out the $_POST var and see how the send data is structed. I haven’t done php for a while, sry.

9

Hi all,

I found a partial solution so far and wanted to share with you.

I can now send my big base64 image to my php server by doing that:

    var request = $http({
      method: "post",
      url: mainUrl + "spus.php",
      data: {
        action: "saveLocationPicture",
        hw_id: spuInfo.hw_id,
        locationPicture: spuInfo.locationPicture
      }
    });

And, in my php code:

	$postdata = file_get_contents("php://input");
	$request = json_decode($postdata);
	
	$action2 = $request->action;
	$hw_id2 = $request->hw_id;
	$locationPicture = $request->locationPicture;

Now, the only problem that I see is this in the Chrome debug console view:

GET data:image/png;base64,/9j/4AAQSkZJRgABAgAAAQABAADFQWERTYUIOPHGJTIYKHMBFHTYF…kZJRgABAgAAAQABAAD//gAEKgD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQFFFFFFFFFFF net::ERR_INVALID_URL

Does somebody know why I am having that?

Thanks

10

I found why I got that error! The base64 image that I was using was just random character and this cause the issue.