CODEWITHSUNDEEP
phpjqueryajax
Mukhila Asokan
Mukhila Asokan

Reputation: 643

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

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;

}

Upvotes: 0

Views: 244

Answers (1)

cetver
cetver

Reputation: 11829

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.

Upvotes: 1

Related Questions