Step 1: Create database and table your need.

Step 2: Create project in vs2012.

Step 3: Create Entity Data Model. For more information read my previous blog.

Step 4: Create controller and view. Write code following code in vie.

  1. <link href="~/Content/bootstrap-fileupload.css" rel="stylesheet" />
  2. <link href="~/Content/Photobooth.css" rel="stylesheet" />
  3. <script src="~/Scripts/bootstrap-fileupload.js"></script>
  4. <script src="~/Scripts/photowebcam.js"></script>
  5. <style type="text/css">
  6. #example
  7. {
  8. height:300px;
  9. }
  10. </style>
  11. <div class="pageheader">
  12. <div class="media">
  13. <div class="pageicon pull-left">
  14. <i class="glyphicon glyphicon-cog"></i>
  15. </div>
  16. <div class="media-body">
  17. <ul class="breadcrumb">
  18. <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
  19. <li>Employee</li>
  20. </ul>
  21. <h4 id="lblSellertitle">Add Employee</h4>
  22. </div>
  23. </div><!-- media -->
  24. </div>
  25. <div class="contentpanel">
  26. <form method="post" enctype="multipart/form-data" id="AddEmployeeForm">
  28. <div class="col-md-12 form_align">
  29. <div class="form-group last">
  30. <label class="control-label col-md-4" id="lblAvtar" style="text-align: start">Profile Picture</label>
  31. <div class="col-md-8">
  32. <div class="fileupload fileupload-new" data-provides="fileupload">
  33. <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
  35. <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" id="imgcamera">
  36. </div>
  37. <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
  38. <div>
  39. <span class="btn btn-white btn-file">
  40. <span class="fileupload-new"><i class="fa fa-paper-clip"></i>Select image</span>
  41. <span class="fileupload-exists"><i class="fa fa-undo"></i>Change</span>
  42. <input type="file" name="file" class="default" id="txtAvtar" />
  43. </span>
  44. <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i>Remove</a>
  45. </div>
  46. </div>
  47. <button type="button" class="btn btn-primary btn-sm" id="btnbtncameraupload" style="width:150px;">Upload from camera</button>
  48. </div>
  49. </div>
  50. </div>
  52. </div>
  54. <script>
  55. $("#btnbtncameraupload").click(function () {
  56. if ($("#example").css('display') == 'none') {
  57. $("#example").show();
  59. $('#example').photobooth().on("image", function (event, dataUrl) {
  61. $("#imgcamera").attr('src', dataUrl);
  62. $("#pp").val(dataUrl);
  63. });
  64. $('#example').data("photobooth").resize(400, 300);
  65. }
  67. });
  68. </script>
Step 5: Please insert the following js file in project. For js you can go to. http://wolframhempel.github.io/photobooth-js and download. Js file. And for bootstrap-fileupload.js you can go this link.
  1. <script src="~/Scripts/bootstrap-fileupload.js"></script>
  2. <script src="~/Scripts/photowebcam.js"></script>
Step 6: Write the following code in controller. For the post method.

  1. [AcceptVerbs(HttpVerbs.Post)]
  2. public ActionResult AddEmployee(usr_User UserNewAdd, HttpPostedFileBase file, FormCollection fc)
  3. {
  4. Random objrandom = new Random();
  5. string Password = Convert.ToString(objrandom.Next());
  7. //For Store Image in Database...!!!
  9. if (UserNewAdd.ProfilePicture != null && file == null)
  10. {
  11. UserNewAdd.ProfilePicture = UserNewAdd.ProfilePicture.Replace("data:image/png;base64,", ""); //The converted base64 string data have "data:image/png;base64," as additional data
  12. string base64 = UserNewAdd.ProfilePicture.Substring(UserNewAdd.ProfilePicture.IndexOf(',') + 1);
  13. base64 = base64.Trim('\0');
  14. byte[] chartData = Convert.FromBase64String(base64);
  15. CreateImage(chartData, UserNewAdd.EmailID.ToString() + ".png");
  16. UserNewAdd.ProfilePicture = UserNewAdd.EmailID.ToString() + ".png";
  17. }
  19. if (file != null)
  20. {
  21. var ProfPicName = Path.GetFileName(file.FileName);
  22. var path = Path.Combine(Server.MapPath("~/ProfilePicture/"), ProfPicName);
  23. file.SaveAs(path);
  24. UserNewAdd.ProfilePicture = file.FileName;
  25. }
  27. //For Store language Known...!!!
  28. if (fc["languge"] != null)
  29. {
  30. String languageKnownList = fc["languge"].ToString();
  31. UserNewAdd.LanguageKnown = languageKnownList;
  32. }
  33. //Create new Guid For user...!!!
  34. UserNewAdd.UserID = Guid.NewGuid();
  35. UserNewAdd.Password = Password;
  36. DateTime UserDOB = new DateTime();
  37. DateTime UserJoinDate = new DateTime();
  38. DateTime UserReleaveDate = new DateTime();
  39. if (fc["DOB"] != null)
  40. {
  41. UserDOB = DateTime.ParseExact(fc["DOB"], "MM/dd/yyyy", CultureInfo.InvariantCulture);
  42. }
  44. if (fc["JoiningDate"] != null)
  45. {
  46. UserJoinDate = DateTime.ParseExact(fc["JoiningDate"], "MM/dd/yyyy", CultureInfo.InvariantCulture);
  47. }
  48. if (fc["ReleavingDate"] == null || fc["ReleavingDate"] == "")
  49. {
  50. UserReleaveDate = Convert.ToDateTime(null);
  51. }
  52. else
  53. {
  54. UserReleaveDate = DateTime.ParseExact(fc["ReleavingDate"], "MM/dd/yyyy", CultureInfo.InvariantCulture);
  55. }
  56. UserNewAdd.DOB = UserDOB;
  57. UserNewAdd.JoiningDate = UserJoinDate;
  58. UserNewAdd.IsActive = false;
  59. UserNewAdd.RoleName = _dataContext.usr_Roles.Where(s = > s.RoleID == UserNewAdd.RoleID).SingleOrDefault().RoleName;
  60. //For Add and Save record in database...!!!
  61. _dataContext.usr_Users.InsertOnSubmit(UserNewAdd);
  63. usr_Address AddAddressDetail = new usr_Address();
  64. AddAddressDetail.AddressID = Guid.NewGuid();
  65. AddAddressDetail.StreetOne = UserNewAdd.usrAddressList.StreetOne;
  66. AddAddressDetail.StreetTwo = UserNewAdd.usrAddressList.StreetTwo;
  67. AddAddressDetail.Landmark = UserNewAdd.usrAddressList.Landmark;
  68. AddAddressDetail.City = UserNewAdd.usrAddressList.City;
  69. AddAddressDetail.State = UserNewAdd.usrAddressList.State;
  70. AddAddressDetail.Country = UserNewAdd.usrAddressList.Country;
  71. AddAddressDetail.UserID = UserNewAdd.UserID;
  72. AddAddressDetail.AddressType = "Primary Address";
  73. _dataContext.usr_Address.InsertOnSubmit(AddAddressDetail);
  74. _dataContext.SubmitChanges();
  75. if (UserNewAdd.usrAddressList.isper == true)
  76. {
  77. usr_Address PerAdress = new usr_Address();
  78. PerAdress.AddressID = Guid.NewGuid();
  79. PerAdress.StreetOne = UserNewAdd.usrAddressList.streatone1;
  80. PerAdress.StreetTwo = UserNewAdd.usrAddressList.steattwo1;
  81. PerAdress.Landmark = UserNewAdd.usrAddressList.landmark1;
  82. PerAdress.City = UserNewAdd.usrAddressList.city1;
  83. PerAdress.State = UserNewAdd.usrAddressList.state1;
  84. PerAdress.Country = UserNewAdd.usrAddressList.country1;
  85. PerAdress.UserID = UserNewAdd.UserID;
  86. PerAdress.AddressType = "Permanent Address";
  87. _dataContext.usr_Address.InsertOnSubmit(PerAdress);
  88. _dataContext.SubmitChanges();
  89. }
  91. string strLink = Convert.ToString(ConfigurationSettings.AppSettings["ApplicationPath"]) + "/Login/Login?UserID=" + EncryptionedString(UserNewAdd.UserID.ToString());
  93. String msg = SendEmailWithPasswordKey(UserNewAdd.FirstName + " " + UserNewAdd.LastName, UserNewAdd.EmailID, Password, strLink);
  95. return RedirectToAction("EmployeeList");
  96. }
Step 7: Now you can run project. And Select profile picture field. Select Image button. So you can select it into our Drive only.

Step 8: If you can take new photo from camera then you can select Upload from camera button.(for this work only if camera supported devise like laptop and mobile)

click uoload image
Step 9: Ask for Shared selected device.

upload image
Step 10: So camera start and Take picture to push last button on right side.

upload image
Step 11: If you can take picture it display in profile picture image in form.

profile image