Laravel AJAX Image Upload error: Image source not readable

Question

Trying to upload an image via AJAX but having issues...

The form:

{{ Form::open(array('class' => 'update-insertimage-form', "files" => true,)) }}
    {{ Form::file('image', array('class' => 'update-insertimage-btn', 'name' => 'update-insertimage-btn')) }}
{{ Form::close() }}

And the PHP:

$createImage = Image::make(Input::file('update-insertimage-btn'))->orientate();
$createImage->resize(600, null, function ($constraint) {
$constraint->aspectRatio();
});
$createImage->save("user_uploads/cover_images/TEST.jpeg");

jQuery:

$('.update-insertimage-form').submit(function() {
  $(".submit-newupdate-btn").addClass('disabled');
  var rootAsset = $('.rootAsset').html();
  $.ajax({
    url: rootAsset+'saveUploadedImage',
    type: 'post',
    cache: false,
    dataType: 'json',
    data: $('.update-insertimage-form').serialize(),
    beforeSend: function() {
    },
    success: function(data) {
      if(data.errors) {
        $('.modal-body').append('<div class="alert alert-danger centre-text modal-error-message" role="alert"><strong>Error!</strong> '+ data.errors +'</div>');
      } else if (data.success) {
        $(".form-control-addupdate").append(data.name);
      }
    },
    error: function(xhr, textStatus, thrownError) {
        alert('Something went to wrong.Please Try again later...');
    }
  });
return false;
});

I use this same exact code else where which works fine but not with AJAX (not sure if that has anything to do with it)

The error is this:

{"error":{"type":"Intervention\\Image\\Exception\\NotReadableException","message":"Image source not readable","file":"\/Applications\/MAMP\/htdocs\/buildsanctuary\/vendor\/intervention\/image\/src\/Intervention\/Image\/AbstractDecoder.php","line":257}}

Any help?

What does your javascript code look like? True AJAX file upload has limited cross browser support.. — Jonathan Crowe
– Jonathan Crowe, Commented Dec 20, 2014 at 20:48

Ohgodwhy · Accepted Answer · 2014-12-20 21:57:29Z

2

You can't serialize the image and pass it over, you need to construct a FormData object and use it to send over the image.

var formData = new FormData();
formData.append('update-insertimage-btn[]', $('.update-insertimage-btn')[0].files[0], $('.update-insertimage-btn')[0].files[0].name);

Then you just need to pass it over to the server as the data along with some other options:

data: formData,
processData: false,
contentType: false

Now you can do:

Image::make(Input::file('update-insertimage-btn'))->orientate()

From the page here https://github.com/Intervention/image/blob/master/src/Intervention/Image/AbstractDecoder.php it is passing this following check:

case $this->isDataUrl():
     return $this->initFromBinary($this->decodeDataUrl($this->data));

Which is returning true from that function:

public function isDataUrl()
{
    $data = $this->decodeDataUrl($this->data);
    return is_null($data) ? false : true;
}

which is firing the abstract function initFromBinary that is passing decodeDataUrl's result as an argument, and the decodeDataUrl looks like:

private function decodeDataUrl($data_url)
{
    $pattern = "/^data:(?:image\/[a-zA-Z\-\.]+)(?:charset=\".+\")?;base64,(?P<data>.+)$/";
    preg_match($pattern, $data_url, $matches);
    if (is_array($matches) && array_key_exists('data', $matches)) {
        return base64_decode($matches['data']);
    }
    return null;
}

So it seems it expects that element to be a base64 encoded image as opposed to a raw binary image; therefore, base64encode the image when you pass it along instead of passing along .files[0]

edited Dec 20, 2014 at 21:57

answered Dec 20, 2014 at 21:32

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lovelock Over a year ago

Thanks, however that throws this: {"error":{"type":"ErrorException","message":"preg_match() expects parameter 2 to be string, array given","file":"\/Applications\/MAMP\/htdocs\/buildsanctuary\/vendor\/intervention\/image\/src\/Intervention\/Image\/AbstractDecoder.php","line":208}}

Jonathan Crowe Over a year ago

Also note that uploading this images this way will not work in IE versions < 10

Collectives™ on Stack Overflow

Laravel AJAX Image Upload error: Image source not readable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related