Image not stored on server in php when it is submitted through a registration form

Question

I am creating a registration system where there will be a folder made from the user's input and an image will be put into that folder for that person. The folder is created, but the image is just an empty jpg file.

register.php:

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Register</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    
    <style type="text/css">
        #results { 
            padding:20px; 
            border:1px solid; 
            background:#ccc; 
        }

        #my_camera {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div >
        <form method="POST" action="saveimage.php">
            <div>
                <h1>Register</h1>
                <p>Please fill in this form to register yourself.</p>
                <hr>

                <label for="username"><b>Name</b></label>
                <input type="text" placeholder="Enter Name" name="username" required>
                <hr>

                <div >
                    <div id="my_camera"></div>
                    <br/>
                    <input type=button value="Take Snapshot" onClick="take_snapshot()">
                    <input type="hidden" name="image" >
                </div>

                <div>
                    <div id="results">Captured Image</div>
                </div>

                <div class="col-md-12 text-center">
                    <br/>
                    <button class="btn btn-success">Submit</button>
                </div>
            </div>
        </form>
    </div>
    
<!-- Configure a few settings and attach camera -->

<script language="JavaScript">

    Webcam.set({

        width: 490,

        height: 390,

        image_format: 'jpeg',

        jpeg_quality: 90

    });

    Webcam.attach( '#my_camera' );

    function take_snapshot() {

        Webcam.snap( function(data_uri) {

            $(".image-tag").val(data_uri);

            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';

            console.log(data_uri);

        } );

    }

</script>


</body>
</html>

saveimage.php:

  $theName = $_POST['username'];

  $theDestinationPath = "images/".$theName;

    if (!file_exists($theDestinationPath)){
        mkdir($theDestinationPath,0755,true); // make the folder
    }
    else{
        echo "<h1> You are already registered! Head back to previous page to login </h1>";
    }

    $img = $_POST['image'];

    $folderPath = $theDestinationPath."/";
   
    $image_parts = explode(";base64,", $img);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];

    $image_base64 = base64_decode($image_parts[1]);
    $imgName = 1;
    $fileName = $imgName.'.jpg';

    $file = $folderPath . $fileName;
    file_put_contents($file, $image_base64);

When I console log the data_uri and it showed a base64 encoded format. It seems that there is a problem when posting the image.

Does this answer your question? [PHP - get base64 img string decode and save as jpg (resulting empty image )](https://stackoverflow.com/questions/17810501/php-get-base64-img-string-decode-and-save-as-jpg-resulting-empty-image) — Techuila, Apr 06 '21 at 03:03
I can save the image by itself but when I do it together with a register form to submit the username and the captured image, the image is empty. — mmm, Apr 06 '21 at 03:11
You have no element with class `image-tag`. Perhaps you meant `$("input[name='image']").val(data_uri)` — Phil, Apr 06 '21 at 03:19
I changed the code but the folder will not be created. I want to store the image in the corresponding folder. — mmm, Apr 06 '21 at 03:33
The code in your question doesn't look any different. Make sure you're using your browser's dev-tools (particularly the _Network_ console) to debug issues in your code — Phil, Apr 06 '21 at 03:35
I added it into my own code, but I cant seem to edit the code in the question. After I added it, I cannot create a folder from the user input. — mmm, Apr 06 '21 at 03:58

Techuila · Accepted Answer · 2021-04-06T04:27:39.647

0

I think you're passing an empty $_POST['image'];

Because when the take_snapshot() is called, you're passing the value of the base64 encoded value to the wrong element.

function take_snapshot() {

        Webcam.snap( function(data_uri) {

            $("input[name='image']").val(data_uri);  // Do this change

            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';

            console.log(data_uri);

        } );

    }

edited Apr 06 '21 at 04:27

answered Apr 06 '21 at 03:24

Techuila

1,237
8
12

I added it into my own code. After I added it, I cannot create a folder from the user input. – mmm Apr 06 '21 at 04:00
How come @mmm? please update again your code. I tried using your code and only changed the this part, `$("input[name='image']").val(data_uri);`. It works fine on my end. – Techuila Apr 06 '21 at 04:30
I updated my code and it works now. Thank you – mmm Apr 06 '21 at 04:58

Image not stored on server in php when it is submitted through a registration form

1 Answers1