Post
Ask Question

Upload or Take Photo from Camera in MVC

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">  
  27.   
  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;">  
  34.   
  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>  
  51.               
  52.    </div>  
  53.   
  54. <script>  
  55.     $("#btnbtncameraupload").click(function () {  
  56.         if ($("#example").css('display') == 'none') {  
  57.             $("#example").show();  
  58.   
  59.             $('#example').photobooth().on("image", function (event, dataUrl) {  
  60.   
  61.                 $("#imgcamera").attr('src', dataUrl);  
  62.                 $("#pp").val(dataUrl);  
  63.             });  
  64.             $('#example').data("photobooth").resize(400, 300);  
  65.         }  
  66.         
  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());  
  6.   
  7.     //For Store Image in Database...!!!    
  8.   
  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.     }  
  18.   
  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.     }  
  26.   
  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.     }  
  43.   
  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);  
  62.   
  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.     }  
  90.   
  91.     string strLink = Convert.ToString(ConfigurationSettings.AppSettings["ApplicationPath"]) + "/Login/Login?UserID=" + EncryptionedString(UserNewAdd.UserID.ToString());  
  92.   
  93.     String msg = SendEmailWithPasswordKey(UserNewAdd.FirstName + " " + UserNewAdd.LastName, UserNewAdd.EmailID, Password, strLink);  
  94.   
  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
Next Recommended Reading Upload and Read Excel File in MVC