title: Clerification needed re: INSERT base64 to BLOB in mySQL database
body: <p>I am collecting a signature on an agreement form with a canvas element. Before the form is submitted the canvas element is converted to a base64 string that is then stored in a HIDDEN form field.</p>
  
  <p>When the base64 string hits the PHP page that is processing and INSERT-ing the form elements into my database it looks like the following:</p>
  
  <pre><code>data:image/jpeg;base64,/9j/4AAQSkZJ......RgABAQAAS
  </code></pre>
  
  <p>I have tried many different combos of ENCODE and DECODE... ESCAPE_STRING ... GET FILE CONTENTS... to get this base64 string saved into my database, but the data never makes it to the database. </p>
  
  <p>My PHP that is INSERT-ing this form into my database currently looks like:</p>
  
  <pre><code>&lt;?php 
  include ('header.php');
  include ('connect.php');
  // prepare and bind
  $stmt = $conn-&gt;prepare("INSERT INTO deposit (type, amount, created, agreement, signature, project_id) VALUES (?,?,?,?,?,?)");
  $stmt-&gt;bind_param("ssssbs", $type, $amount, $created, $agreement, $signature, $project_id);
  // set parameters
  $created = date("Y-m-d H:i:s");
  $amount = htmlspecialchars($_POST['amount']);
  $type = htmlspecialchars($_POST['type']);
  $agreement = $_POST['agreement'];
  
  
  $hidden_data = $_POST['hidden_data'];
  $escaped = mysqli_real_escape_string ($hidden_data);
  $signature = base64_decode($escaped);
  
  
  $project_id = $_POST['project_id'];
  // execute 
  $stmt-&gt;execute();
  $deposit_id = ($stmt-&gt;insert_id);
  echo "$amount - created successfully";
  $stmt-&gt;close();
  ?&gt;
  &lt;form action="project.php" method="post"&gt;
      &lt;div class="wrapper"&gt;   
          &lt;input name="project_id" value="&lt;?php echo $project_id; ?&gt;" type="hidden"&gt;
          &lt;input type="submit" value="Go back to project"&gt;
      &lt;/div&gt;  
  &lt;/form&gt;
  &lt;?php 
  include ('disconnect.php');
  include ('footer.php');
  ?&gt;
  </code></pre>
  
  <p>If I am understanding the process correctly,  I need to:</p>
  
  <p>1) strip the "data:image/jpeg;base64," from the beginning of the string</p>
  
  <p>2) convert or decode or encode the remaining data</p>
  
  <p>3) save the data to the BLOB with an INSERT</p>
  
  <p>Much of what I have found for information on this process looks so much different from how my code here is set up that I am not understanding how to re-organize it to fit within what I have here. Can someone please clarify for me how this process works within the type of CODE structure I am using here? </p>
  
  <p>I have do have another place in this app that collects an image from a camera, stores it in a file and is handled using $_FILE instead of $_POST. This process works, the image is stored in the database BLOB and I am able to GET the info later for display. That code looks like:</p>
  
  <pre><code>$data = $conn-&gt;real_escape_string(file_get_contents($_FILES  ['uploaded_file']['tmp_name']));
  </code></pre>
  
  <p>I tried just changing $_FILES to $_POST but that just broke everything.</p>
  
  <p>Thank you in advance for your time. </p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>Here is the form that collects the data used here:</p>
  
  <pre><code>&lt;?php 
  include ('header.php');
  include ('legal_deposit_agreement_display.php');
  ?&gt;
  &lt;form action="legal_deposit_agreement_create.php" method="post" enctype="multipart/form-data" id="form" name="form"&gt;
  
      &lt;input name="hidden_data" id='hidden_data' type="hidden"/&gt;
      &lt;input name="project_id" value="&lt;?php echo $project_id; ?&gt;" type="hidden"&gt;
  
      &lt;h1&gt;Deposit&lt;/h1&gt;
  
      &lt;div class="wrapper"&gt;
          &lt;label&gt;Ammount of Deposit&lt;/label&gt;&lt;br&gt;
          &lt;input name="amount" value="&lt;?php echo $amount; ?&gt;" placeholder="Enter Ammount of deposit here" type="text" tabindex="1" required&gt;
      &lt;/div&gt;
  
      &lt;div class="wrapper"&gt;   
          &lt;label&gt;Payment Type&lt;/label&gt;&lt;br&gt;
          &lt;select name="type" tabindex="3"&gt;
              &lt;option value="Cash/Credit"&lt;?php if ($type == 'Cash/Credit') echo ' selected="selected"'; ?&gt;&gt;Cash/Credit&lt;/option&gt;
              &lt;option value="Gift Certificate"&lt;?php if ($type == 'Gift Certificate') echo ' selected="selected"'; ?&gt;&gt;Gift Certificate&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="wrapper"&gt;
          &lt;label&gt;Deposit Agreement&lt;/label&gt;&lt;br&gt;
          &lt;textarea id="agreement" name="agreement" style="overflow:hidden" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');" tabindex="4" value="&lt;?php include 'text/depositAgreement.txt';?&gt;"&gt;&lt;?php include 'text/depositAgreement.txt';?&gt;&lt;/textarea&gt;
          &lt;script type="text/javascript"&gt;
              function setHeight(fieldId){
                  document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
              }
              setHeight('agreement');
          &lt;/script&gt;
      &lt;/div&gt;
  
      &lt;div id="signature-pad" class="signature-pad"&gt;
          &lt;div class="signature-pad--body"&gt;
            &lt;canvas id="canvas" name="canvas"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="signature-pad--footer"&gt;
            &lt;div class="description"&gt;Sign above&lt;/div&gt;
  
            &lt;div class="signature-pad--actions"&gt;
              &lt;div&gt;
                &lt;button type="button" class="button clear" data-action="clear"&gt;Clear&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="js/signature_pad.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;div class="wrapper"&gt;
      &lt;input type="button" onclick="convert()" value="I AGREE TO ALL OF THE TERMS DESCRIBED ABOVE"&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;script&gt;
      function convert() {
          document.getElementById('hidden_data').value = canvas.toDataURL('image/jpeg', 0.5);
          document.forms["form"].submit();
      };
  &lt;/script&gt;
  
  &lt;?php include ('footer.php');?&gt;
  </code></pre>