How to save base64 image and save it in database in yii2

Question

Thanks in Advance. I'm new to yii2 and I want to Upload signature and for that I have used signature pad(Used Reference:-https://codepen.io/BigLeeBrink/pen/ZdvLLE) for submit Signature. _form Code:-

<?php
/* @var $this yii\web\View */

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
?>
<script src="//cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<script src ="//code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="additionl_left_clm">
                                    <?php $form = ActiveForm::begin(['options' => ['id' => 'directory-form-section', 'method' => 'post', 'enctype' => 'multipart/form-data']]); ?>

                                    <div class=" col-xl-10 col-lg-10 col-md-12 col-sm-12 col-12 addition_colum">
                                        <ul>
                                                  ?>
                                            <?php if($model->case_status == 4)
                                            {
                                                ?>
                                            <li>
                                       <p class="SigCenter"><?= \Yii::t("frontend", 'Signature'); ?></p>
                                                        <div id="builder">
                                                            <canvas id="signature" width="450"  style="border: 1px solid #ddd;align:left;"></canvas><br>
                                                            <input type="hidden" id='image' name="image" value=""> 
                                                            <center><button id="Save-signature" class="SaveBtn">Save</button>
                                                            <button id="clear-signature" class="ClearBtn">Clear</button></center>
                                                        </div>
                                                </li>
                                            <?php } ?>
                                        </ul>
                                    </div>
                                    <?php ActiveForm::end(); ?>
                                </div>
$this->registerJs("
   jQuery(document).ready(function($){        
        var canvas = document.getElementById('signature');
        var signaturePad = new SignaturePad(canvas);
        
        $('#Save-signature').on('click', function(e){
            e.preventDefault();
            var Sigimage=signaturePad.toDataURL();
            // console.log(image);
            document.getElementsByName('image')[0].setAttribute('value', Sigimage);
            getSignaturePad(); // call this function here, sets the imageData right before submitting the form.
            return true; // returning true submits the form. 
             
            signaturePad.clear();
        });

        $('#clear-signature').on('click', function(e){
            e.preventDefault();
            signaturePad.clear();
        });
        
    });
");

Now,here When i draw image and click on save button it's value is displaying in hidden input

Now, from the here I'm not getting exact Idea what I do next to upload and save Image.

How to save base64 image and save it in database in yii2

0 Answers0