0

I am using the code from https://github.com/BossBele/cropzee to crop and rotate pictures before submitting for upload. I am however struggeling with the upload it self as I get the PHP error in my uploader:

Notice: Undefined index: cropzee-input in C:\Users\admin\wamp64\www\cropzee_jquery_php\uploader.php on line 30

This is the line:

$name = stripslashes($_FILES["cropzee-input"]['name']);

So the image is never sent to my uploader. How can I send the form data with the image to my uploader?

Edit: By adding name="cropzee-input" into the input field I will only get the origial image, not the cropped/resized one.

Upload form:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cropzee jQuery PHP</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0;"/>

    <!-- jQuery + cropzee.js -->
        <script type="text/javascript" src="javascripts/jquery/jquery.min.js"></script>
        <script src="javascripts/cropzee/cropzee.js" defer></script>
    <!-- //jQuery + cropzee.js -->

    <!-- CSS -->
        <style>
        .image-previewer {
            height: 300px;
            width: 300px;
            display: flex;
            border-radius: 10px;
            border: 1px solid lightgrey;
        }
        </style>
    <!-- //CSS -->
</head>
<body>


<h1>Upload</h1>

<!-- cropzee upload form -->
    <form method="post" action="uploader.php" enctype="multipart/form-data">

                    
    <label for="cropzee-input" class="image-previewer" data-cropzee="cropzee-input"></label>
    <input id="cropzee-input" type="file" accept="image/*">
    <input type="submit" onclick="cropzeeGetImage('cropzee-input')" value="Get Image (as blob / data-url)" />
    <script>
    $(document).ready(function(){
        if (window.location.href.indexOf("#") > -1) {
            window.location = window.location.href.replace('#', '');
        }
        $("#cropzee-input").cropzee({startSize: [85, 85, '%'],});
    });
    </script>
    </form>
<!-- //cropzee upload form -->

</body>
</html>

Uploader.php:

<?php
/**
*
* File: uploader.php
* Version 1.0
* Date 11:11 06.04.2022
* Copyright (c) 2022 Ditlefsen
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/*- Functions ---------------------------------------------------------------------------------------------- */
// Get extention
function get_extension($str) {
    $i = strrpos($str,".");
    if (!$i) { return ""; } 
    $l = strlen($str) - $i;
    $ext = substr($str,$i+1,$l);
    return $ext;
}

/*- Create dir -------------------------------------------------------------------------------------------- */
// Directory for storing
if(!(is_dir("_uploads"))){
    mkdir("_uploads");
}


/*- Image upload ------------------------------------------------------------------------------------------ */
$name = stripslashes($_FILES["cropzee-input"]['name']);
$extension = get_extension($name);
$extension = strtolower($extension);

if($name){
    if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) {
        $ft_image = "warning";
        $fm_image = "unknown_file_extension";
    }
    else{

        // Give new unique name
        $datetime = date("ymdhis");
        $name_without_ext = str_replace("$name", "$extension", "");
        $new_name = $name_without_ext . "_" . $datetime . "." . $extension;
        
        $new_path = "_uploads/";
        $uploaded_file = $new_path . $new_name;

        // Upload file
        if (move_uploaded_file($_FILES["cropzee-input"]['tmp_name'], $uploaded_file)) {
    

            // Get image size
            $file_size = filesize($uploaded_file);
                        
            // Check with and height
            list($width,$height) = getimagesize($uploaded_file);
        
            if($width == "" OR $height == ""){
                $ft_image = "warning";
                $fm_image = "getimagesize_failed";
                unlink($uploaded_file);
            }
            else{
                // Resize to 847x847
                $uploaded_file_new = $uploaded_file;
                if($width > 847 OR $height > 847){
                    resize_crop_image($settings_image_width, $settings_image_height, $uploaded_file, $uploaded_file_new, $quality = 80);
                }
                
                // Give feedback starts
                
                // Image path
                $inp_image_path = "_uploads/$new_name";
            

                // Thumb
                $inp_thumb_name = str_replace(".$extension", "", $new_name);
                $inp_thumb  = $inp_thumb_name . "_thumb_200x200." . $extension;
                // resize_crop_image(200, 200, "_uploads/$new_name", "_uploads/$inp_thumb");
                            
                // Give feedback
                $ft_image = "success";
                $fm_image = "image_uploaded";
            }
        } // move_uploaded_file
        else{
            switch ($_FILES["$inp_names_array[$x]"]['error']) {
                case UPLOAD_ERR_OK:
                        $fm_image = "There is no error, the file uploaded with success.";
                    break;
                case UPLOAD_ERR_NO_FILE:
                        // $fm_image = "no_file_uploaded";
                    break;
                case UPLOAD_ERR_INI_SIZE:
                        $fm_image = "to_big_size_in_configuration";
                    break;
                case UPLOAD_ERR_FORM_SIZE:
                        $fm_image = "to_big_size_in_form";
                    break;
                default:
                        $fm_image = "unknown_error";
                    break;
                } // switch 
        }
    } // extension check
} // if($image){

?>

The javascript for cropzee is located here: https://cdn.jsdelivr.net/gh/BossBele/cropzee@latest/dist/cropzee.js

Europa
  • 974
  • 12
  • 40

0 Answers0