CODEWITHSUNDEEP
phphtmlcropimage-size
Naren Verma
Naren Verma

Reputation: 2327

Image size showing Zero byte after uploading on server using php

I am using croppie plugin for crop the image which is working perfectly. The image was stored in my folder and the image size is showing zero bytes.It is working perfectly on localhost but not working on the server. Would you help me in this?

<form action="process.php" id="form" method="post">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<input type="submit" name="submit" value="save" class="upload-result">
</form>
    if(isset($_POST['submit'])){
            $data = $_POST['imagebase64'];
            list($type, $data) = explode(';', $data);
            list(, $data)      = explode(',', $data);
            $data = base64_decode($data);
            $imageName = time().'.png';
            file_put_contents('images/profile/'.$imageName, $data);
           // echo $imageName;
        }

Upvotes: 0

Views: 1529

Answers (1)

acmsohail
acmsohail

Reputation: 1023

This is working file. This may help you.

<?php
if(isset($_POST['imagebase64'])){
    $data = $_POST['imagebase64'];

    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    file_put_contents('image64.png', $data);
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="croppie.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var $uploadCrop;

function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();          
        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            });
            $('.upload-demo').addClass('ready');
        }           
        reader.readAsDataURL(input.files[0]);
    }
}

$uploadCrop = $('#upload-demo').croppie({
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});

$('#upload').on('change', function () { readFile(this); });
$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'original'
    }).then(function (resp) {
        $('#imagebase64').val(resp);
        $('#form').submit();
    });
});

});
</script>
</head>
<body>
<form action="process.php" id="form" method="post">
<input type="file" id="upload" value="Choose a file">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
</body>
</html>

Upvotes: 1

Related Questions