Crop the image and upload using ajax php and simpleCropper.js

Question

Using simpleCropper.js to crop the image and using ajax upload the image in PHP in simpleCropper the image file is converted to base64. But try to upload the large image file, it shows errors like Image corrupt or truncated. URI in this note truncated due to length.

In ajax response it shows error like Request Entity Too Large

The small cropped image is not uploaded properly and it is stored in a 10-byte size.

in the ajax upload file it returns the null value.

if (file.type.match(imageType)) {
                var reader = new FileReader();
                image_filename = file.name;                    
                reader.onload = function (e) {
                var base64data = reader.result;
                    $.ajax({
                        url: "upload.php",
                        method: "POST",
                        data: {imagefile: base64data},
                        dataType:"text",
                        success: function(data){
                            console.log(data);                          
                        }
                    });
                 
Upload.php 

if(isset($_POST["imagefile"]))
{
    $data = $_POST["imagefile"];
    
    $image_array_1 = explode(";", $data);

    $image_array_2 = explode(",", $image_array_1[1]);

    $data = base64_decode($image_array_2[1]); 
    
    $filename = time() . '.png';
    if(stripos($data, 'image/png') !== false) {
        $filename = time() . '.png';
    } elseif(stripos($data, 'image/jpg') !== false || stripos($data, 'image/jpeg') !== false) {
        $filename = time() . '.jpg';
    }
    
    $imageName = 'assets/uploads/' . $filename;

    file_put_contents($imageName, $data);

    echo $filename;

}

cetver · Accepted Answer · 2022-07-11 08:48:09Z

1

The Request Entity Too Large is a server limitation.

You did not specify the server used, so using Nginx as an example:

Syntax:  client_max_body_size size;
Default: client_max_body_size 1m;
Context: http, server, location

Sets the maximum allowed size of the client request body. If the size in a request exceeds the configured value, the 413 (Request Entity Too Large) error is returned to the client. Please be aware that browsers cannot correctly display this error. Setting size to 0 disables checking of client request body size.

answered Jul 11, 2022 at 8:48

cetver

11.9k6 gold badges42 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Crop the image and upload using ajax php and simpleCropper.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related