MVC Save captured webcam image to database

Question

Good day!

I have a code where a user clicks on a button, the modal pops up with a webcam.js in it. User will take a snapshot photo from webcam that will then be saved to database. The problem is I don't know how to save it to database. From what I have seen from most of the forums, they save the Image path to the database but what I want is to save the Image itself to the database.

MODEL

public partial class tbl_Picture
{
    public string picture_id { get; set; }
    public string operator_id { get; set; }
    public byte[] picture { get; set; }
}

CONTROLLER

    [HttpPost]
    public ActionResult Franchise()
    {

        return View();
    }

VIEW

<td>
  <a class="btn btn-warning open-camera" data-toggle="modal" data-id="@item.franchise_id" href="#myModal3">
   Open Camera<span class="glyphicon  glyphicon-plus-sign"></span>
   </a>
 </td>

MODAL

@using (Html.BeginForm("Franchise", "Application", FormMethod.Post))
  {
   @Html.AntiForgeryToken()
     <div class="modal-body">
      <div class="row">
        <input type="text" name="franid" id="franid" value="" class="hidden" />
       <div id="my_camera" class="col-lg-6"></div>
       <div id="results" class="col-lg-6">Your captured image will appear here...</div>
       </div>
       <form>
         <input type=button value="Take Snapshot" onClick="take_snapshot()">
       </form>
       </div>
       <div class="modal-footer">
         <center>
         <button class="btn btn-success" type="submit">Submit</button>
          <button class="btn" type="button" data-dismiss="modal">Close</button>
          </center>
        </div>
}
</div>

SCRIPT

<script language="JavaScript">
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    Webcam.attach( '#my_camera' );
</script>

<script language="JavaScript">
   function take_snapshot() {
   Webcam.snap( function(data_uri) {
    document.getElementById('results').innerHTML =
    '<img id="base64image" src="' + data_uri + '"/>';
   } );
   }
</script>

I tried doing what was in this forum but I can't understand how it will save to my database. So I tried reverting back to this code and search for more ideas online.

Thanks in advance!

Tomato32 · Accepted Answer · 2018-08-30T08:48:05.023

You can use ajax for this. Hope to help, my friend!

@using (Html.BeginForm("Franchise", "Application", FormMethod.Post))
  {
   @Html.AntiForgeryToken()
     <div class="modal-body">
      <div class="row">
        <input type="text" name="franid" id="franid" value="" class="hidden" />
       <div id="my_camera" class="col-lg-6"></div>
       <div id="results" class="col-lg-6">Your captured image will appear here...</div>
       </div>
       <form>
         <input type=button value="Take Snapshot" onClick="take_snapshot()">
       </form>
       </div>
       <div class="modal-footer">
         <center>
         <button class="btn btn-success" type="button" id="btnCapture">Submit</button>
          <button class="btn" type="button" data-dismiss="modal">Close</button>
          </center>
        </div>
}
</div>

<script>
    $(function(){
         $('#btnCapture').on('click', function(){
             var file = document.getElementById("base64image").src;
             $.ajax({  
                type: "POST",  
                url: '@Url.Action("Franchise")',  
                data: { base64image: file },  
                dataType: "json",  
                contentType: "application/json; charset=utf-8",  
                success: function (result) {                     
                      $('#myModal3').modal('hide'); //hide the modal
                },  
                error: function () {  
                    alert("Error while inserting data");  
                }  
            });  
         });
    });
</script>

//In Controller
 [HttpPost]
    public ActionResult Franchise(string base64image)
    {
        if(!String.IsNullorEmpty(base64image))
        {
         //Maybe we should  remove unnecessary string input in front of the value
            string pictureObj = base64image.Replace("data:image/png;base64,", String.Empty);

            var model = new tbl_Picture();
            model.picture = System.Convert.FromBase64String(pictureObj );

            //And then you can insert the model into db. 
        }
        return Json(new {result = 1});
    }

The code works perfectly but the saving to db gives me this error "The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters." — John Clarence Castro, Aug 30 '18 at 08:33
@JohnClarenceCastro: I updated my answer. Please try again :)) — Tomato32, Aug 30 '18 at 08:48
I was about to change it to this as suggested from another post. Thanks sr, it works perfectly. :D — John Clarence Castro, Aug 30 '18 at 08:51
@JohnClarenceCastro: Sorry for late response. You are a goddamn hero :d — Tomato32, Aug 30 '18 at 09:00

MVC Save captured webcam image to database

1 Answers1