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

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.



<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <script src=""></script>

   <script src=""></script>

   <link rel="stylesheet" href="" />

  <style type="text/css">

       #results { padding:20px; border:1px solid; background:#ccc; }

       #my_camera {transform: rotateY(180deg);}

  <div >

    <form method="POST" action="saveimage.php">

        <div >
          <p>Please fill in this form to register yourself.</p>

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


            <div >

                <div id="my_camera"></div>


                <input type=button value="Take Snapshot" onClick="take_snapshot()">

                <input type="hidden" name="image" >


            <div >

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


            <div class="col-md-12 text-center">
                <button class="btn btn-success">Submit</button>



<!-- Configure a few settings and attach camera -->

<script language="JavaScript">


        width: 490,

        height: 390,

        image_format: 'jpeg',

        jpeg_quality: 90


    Webcam.attach( '#my_camera' );

    function take_snapshot() {

        Webcam.snap( function(data_uri) {


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


        } );





$theName = $_POST['username'];

  $theDestinationPath = "images/".$theName;

  if (!file_exists($theDestinationPath))
      mkdir($theDestinationPath,0755,true); // make the folder
      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.

The jquery class selector you are using to put the image data into the hidden form field doesn’t exist in the markup (I’m wondering if that space after the name attribute is where it was.) I recommend using an id selector anyway, since it needs to be unique to a specific form field. See this link to the readme docs on adding the image data to an existing form - webcamjs/ at master · jhuckaby/webcamjs · GitHub

Sponsor our Newsletter | Privacy Policy | Terms of Service