How to validate base64 image from cropper.js in larvael

I am using cropper.js to crop image using below code,

$("#crop").click(function(){
  canvas = cropper.getCroppedCanvas();

  canvas.toBlob(function(blob) {

    url = URL.createObjectURL(blob);

    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {

    var base64data = reader.result;

    var imageappend = '<div class="col-xs-6 col-sm-3 img-removableitem">';
        imageappend += '<div class="thumbnail"><div class="img-wrapper"><img src="'+base64data+'" style="height:200px;width:100%;" class="img-responsive"/><input type="hidden" name="chaptergalleryphotos[]" value="'+base64data+'" /></div><div class="caption text-center"><a href="#" class="deletebutton">Delete</a></div></div></div>';

    $('.img-review').append(imageappend);

    $modal.modal('hide');
    $('#galley').val('');
    }
  });
});

And in controller i am receiving data in base64 format. Normal image validation is not working for this format. how can i validate size and mime type base64 format image ? I am storing image like below,

foreach($galleryphotos as $photo)
        {
            $image_data = $photo;

          $image_array_1 = explode(";", $image_data);
          $image_array_2 = explode(",", $image_array_1[1]);
          $data = base64_decode($image_array_2[1]);
          $image_name = 'chaptergallery_'.time().rand() . '.png';
          $upload_path = Storage::disk('public')->path('chaptergalleryimages/'.$image_name);
          file_put_contents($upload_path, $data);
        }

Uploading is working fine. but i want to validate if uploading image is valid and has size within 2MB. Please help me with this. Thank you

md_imran

4 years ago

Level 1

$("#crop").click(function () { $('#pageloader').fadeIn(); canvas = cropper.getCroppedCanvas({ width: 640, height: 480, });

            canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "{{ route('profile.upload_image') }}",
                        data: {'_token': "{{ csrf_token() }}", 'image': base64data, 'cropped' : true},
                        success: function() {
                            updateProfileProgress();
                            $('#pageloader').fadeOut();
                            $('#interestModal').addClass('invisible');
                            cropper.destroy();
                            cropper = null;
                            location.reload();
                        },
                        error: function (errorResponse) {
                            $('#pageloader').fadeOut();
                            showAlert(errorResponse.responseJSON.error, 'danger');
                        }
                    });
                }
            });
        });

Deekshith

4 years ago

Level 5

@md_imran Hello, I dont find server end validation for this. i am already using client end code.

Snapey

4 years ago

Best Answer

Level 122

you will need to check the size after converting back to an image file.

No point in checking the mime type since you won't receive it, and then you are saving with .png extension irrespective of the original image format

Please or to participate in this conversation.