MVC Capture webcam image, save file path of image to the database

Question

Here is the gist of what I am trying to achieve:

• Capture a webcam image from the Edit view. (working)
• Assign the image a file name and path. (working)
• Save the image to the images folder. (working)
• Store the path to the image in the database. (Not working)

Here is my Capture controller:

      public void Capture(String FileLocation)
    {
        //var FileLocation = Server.MapPath("~/Images/test.jpg");
        var stream = Request.InputStream;
        string dump;

        using (var reader = new StreamReader(stream))
            dump = reader.ReadToEnd();


        if (System.IO.File.Exists(FileLocation))
        {
            System.IO.File.Delete(FileLocation);
            System.IO.File.WriteAllBytes(FileLocation, String_To_Bytes2(dump));
        }
        else System.IO.File.WriteAllBytes(FileLocation, String_To_Bytes2(dump));


        return;

    }

And here is the Edit controller:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit(TrappingEvent trappingevent)
    {

        if (ModelState.IsValid)
        {


            db.Entry(trappingevent).State = EntityState.Modified;
            db.SaveChanges();

            return RedirectToAction("Index");
        }

        ViewBag.PersonId = new SelectList(db.People, "Id", "First_Name", trappingevent.PersonId);
        return View(trappingevent);
    }

From my limited understanding it would be nice to pass the file path as a variable from the Capture void to the controller for binding to the model.

Thanks for your help.

Marquez

Answer 1

Its working! Well I did it in a roundabout way and still happy to hear suggestions.

Heres the gist:

• when I click the capture button i run the function:

  function CaptureAndAssignText() {
  var Div = document.getElementById("ImagePath");//ImagePath is the field
  // I want to bind to the model.
  
  newText = "ID_" + @Model.Id + ".jpg";//Here I grab the Id of 
  //the current model to use as the file name
  
  Div.value = newText;//Assign the file name to the input 
  //field ready for submission.
  
  webcam.capture();//Run the capture function
  }
  

• Here is the Capture function(fairly standard - can someone tell me if I need document ready for this?)

  $(document).ready(function () {
                          $("#Camera").webcam({
                              width: 320,
                              height: 240,
                              mode: "save",
                              swffile: "@Url.Content("~/Scripts/jscam.swf")",
                              onTick: function () { },
                              onSave: function () {
                              },
                              onCapture: function () {
                                  webcam.save("@Url.Action("Capture", "TrapActivity", new { id = @Model.Id , pid = @Model.PersonId})");
                              },
                              debug: function () { },
                              onLoad: function () { }
                          });
                     });
  

Here is my controller, modified to accept the model ID as a string (have included the String to Bytes function for easy reference):

    public ActionResult Capture(string ID)
    {
        var path = Server.MapPath("~/Images/ID_" + ID + ".jpg" );

        //var path1 = "~/Images/test.jpg;";



        var stream = Request.InputStream;
        string dump;

        using (var reader = new StreamReader(stream))
            dump = reader.ReadToEnd();


        if (System.IO.File.Exists(path))
        {
            System.IO.File.Delete(path);
            System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));
        }
        else System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));


        return View(ID);

    }

    private byte[] String_To_Bytes2(string strInput)
    {
        int numBytes = (strInput.Length) / 2;
        byte[] bytes = new byte[numBytes];

        for (int x = 0; x < numBytes; ++x)
        {
            bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);
        }

        return bytes;
    }

Now once capture has been clicked. The form can be submitted just as if you were submitting a strongly typed form.

There is a potential issue with this method

• This way only allows one image to be stored.
• Im sort of storing the file path in a really strange way.

Im more than open to suggestions.

Marquez