I have build a image cropper tool from there i wanted to store that base64 image to server. I have sent it through Ajax. Image got stored in jpg format.But the problem is it's got corrupted. Can anyone suggest me what could be the solution?

Here is my ajax call :

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$.ajax({
    method: 'post',
    url: 'updateProfilePicture',
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: {'image': encodeURIComponent(profileImageUrl)},
    success: function (data) {
        alert(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
});

Here is the controller for converting base64 to normal image and stored to server:

public function updateProfile(Request $request)
{
    $base64img = str_replace('data:image/jpeg;base64,', '', $request->Input(['image']));
    $data = base64_decode($base64img);
    $file = public_path() . '/users/' .'123123123.jpg';
    file_put_contents($file, $data);
    return \Response::json($data);
}     

I have build a image cropper tool from there i wanted to store that base64 image to server. I have sent it through Ajax. Image got stored in jpg format.But the problem is it's got corrupted. Can anyone suggest me what could be the solution?

Here is my ajax call :

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$.ajax({
    method: 'post',
    url: 'updateProfilePicture',
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: {'image': encodeURIComponent(profileImageUrl)},
    success: function (data) {
        alert(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {

    }
});

Here is the controller for converting base64 to normal image and stored to server:

public function updateProfile(Request $request)
{
    $base64img = str_replace('data:image/jpeg;base64,', '', $request->Input(['image']));
    $data = base64_decode($base64img);
    $file = public_path() . '/users/' .'123123123.jpg';
    file_put_contents($file, $data);
    return \Response::json($data);
}     

• javascript
• php
• ajax
• laravel
• base64

• What does "corrupted" mean? – BenRoob Commented Sep 19, 2017 at 8:53
• when i click on the image it says we can't open this file. – Hola Commented Sep 19, 2017 at 8:55
• Why are you using different content types in client and server? – jrook Commented Sep 19, 2017 at 8:55
• 1 Are you sure you have base64 encoded the image, I dont see anything that suggests that you have – RiggsFolly Commented Sep 19, 2017 at 8:55
• 2 I am pretty sure you dont need to encodeURIComponent() a base64encoded string. Base64 encoded should be ok to travel over the wire without fiddling with it. Thats what it was invented for – RiggsFolly Commented Sep 19, 2017 at 8:57

1 Answer 1

You aren't sending JSON so don't claim you are sending JSON. Remove this.

contentType: "application/json; charset=utf-8",

You are passing an object to data:

data: {'image': encodeURIComponent(profileImageUrl)}

When you pass an object, jQuery will encode it as form URL encoded data.

By running your code through encodeURIComponent you cause the data to be double encoded.

Don't do that.

data: {'image': profileImageUrl }