CODEWITHSUNDEEP
phpmysqlformscanvas
inkslinger
inkslinger

Reputation: 93

Clerification needed re: INSERT base64 to BLOB in mySQL database

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.

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:

data:image/jpeg;base64,/9j/4AAQSkZJ......RgABAQAAS

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.

My PHP that is INSERT-ing this form into my database currently looks like:

<?php 
include ('header.php');
include ('connect.php');
// prepare and bind
$stmt = $conn->prepare("INSERT INTO deposit (type, amount, created, agreement, signature, project_id) VALUES (?,?,?,?,?,?)");
$stmt->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->execute();
$deposit_id = ($stmt->insert_id);
echo "$amount - created successfully";
$stmt->close();
?>
<form action="project.php" method="post">
    <div class="wrapper">   
        <input name="project_id" value="<?php echo $project_id; ?>" type="hidden">
        <input type="submit" value="Go back to project">
    </div>  
</form>
<?php 
include ('disconnect.php');
include ('footer.php');
?>

If I am understanding the process correctly, I need to:

1) strip the "data:image/jpeg;base64," from the beginning of the string

2) convert or decode or encode the remaining data

3) save the data to the BLOB with an INSERT

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?

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:

$data = $conn->real_escape_string(file_get_contents($_FILES  ['uploaded_file']['tmp_name']));

I tried just changing $_FILES to $_POST but that just broke everything.

Thank you in advance for your time.

EDIT 1:

Here is the form that collects the data used here:

<?php 
include ('header.php');
include ('legal_deposit_agreement_display.php');
?>
<form action="legal_deposit_agreement_create.php" method="post" enctype="multipart/form-data" id="form" name="form">

    <input name="hidden_data" id='hidden_data' type="hidden"/>
    <input name="project_id" value="<?php echo $project_id; ?>" type="hidden">

    <h1>Deposit</h1>

    <div class="wrapper">
        <label>Ammount of Deposit</label><br>
        <input name="amount" value="<?php echo $amount; ?>" placeholder="Enter Ammount of deposit here" type="text" tabindex="1" required>
    </div>

    <div class="wrapper">   
        <label>Payment Type</label><br>
        <select name="type" tabindex="3">
            <option value="Cash/Credit"<?php if ($type == 'Cash/Credit') echo ' selected="selected"'; ?>>Cash/Credit</option>
            <option value="Gift Certificate"<?php if ($type == 'Gift Certificate') echo ' selected="selected"'; ?>>Gift Certificate</option>
        </select>
    </div>

    <div class="wrapper">
        <label>Deposit Agreement</label><br>
        <textarea id="agreement" name="agreement" style="overflow:hidden" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');" tabindex="4" value="<?php include 'text/depositAgreement.txt';?>"><?php include 'text/depositAgreement.txt';?></textarea>
        <script type="text/javascript">
            function setHeight(fieldId){
                document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
            }
            setHeight('agreement');
        </script>
    </div>

    <div id="signature-pad" class="signature-pad">
        <div class="signature-pad--body">
          <canvas id="canvas" name="canvas"></canvas>
        </div>
        <div class="signature-pad--footer">
          <div class="description">Sign above</div>

          <div class="signature-pad--actions">
            <div>
              <button type="button" class="button clear" data-action="clear">Clear</button>
            </div>
          </div>

        </div>
    </div>

    <script src="js/signature_pad.js"></script>
    <script src="js/app.js"></script>

    <div class="wrapper">
    <input type="button" onclick="convert()" value="I AGREE TO ALL OF THE TERMS DESCRIBED ABOVE">
    </div>

</form>

<script>
    function convert() {
        document.getElementById('hidden_data').value = canvas.toDataURL('image/jpeg', 0.5);
        document.forms["form"].submit();
    };
</script>

<?php include ('footer.php');?>

Upvotes: 1

Views: 1898

Answers (1)

Funk Forty Niner
Funk Forty Niner

Reputation: 74217

Files / $_FILES require a valid enctype in <form>, being enctype="multipart/form-data" and that isn't part of what you posted.

There should be an input type of file in there and using the named attribute for it, then passing that variable assigned to the $_FILES superglobal. You can then use the b as you did in your bind_param().

This line doesn't contain the file input for it in your post:

$data = $conn->real_escape_string(file_get_contents($_FILES  ['uploaded_file']['tmp_name']));

If you want to upload a BLOB to your database, then use what I posted here and read the manual on handling files.

This line failed because you didn't pass the connection argument for it:

$escaped = mysqli_real_escape_string ($hidden_data);

which should read as:

$escaped = mysqli_real_escape_string ($conn, $hidden_data);

Upvotes: 1

Related Questions