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.

<link href="~/Content/bootstrap-fileupload.css" rel="stylesheet" />
<link href="~/Content/Photobooth.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-fileupload.js"></script>
<script src="~/Scripts/photowebcam.js"></script>
<style type="text/css">
#example
{
height:300px;
}
</style>
<div class="pageheader">
<div class="media">
<div class="pageicon pull-left">
<i class="glyphicon glyphicon-cog"></i>
</div>
<div class="media-body">
<ul class="breadcrumb">
<li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
<li>Employee</li>
</ul>
<h4 id="lblSellertitle">Add Employee</h4>
</div>
</div>
</div>
<div class="contentpanel">
<form method="post" enctype="multipart/form-data" id="AddEmployeeForm">
<div class="col-md-12 form_align">
<div class="form-group last">
<label class="control-label col-md-4" id="lblAvtar" style="text-align: start">Profile Picture</label>
<div class="col-md-8">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" id="imgcamera">
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i>Select image</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i>Change</span>
<input type="file" name="file" class="default" id="txtAvtar" />
</span>
<a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i>Remove</a>
</div>
</div>
<button type="button" class="btn btn-primary btn-sm" id="btnbtncameraupload" style="width:150px;">Upload from camera</button>
</div>
</div>
</div>
</div>
<script>
$("#btnbtncameraupload").click(function () {
if ($("#example").css('display') == 'none') {
$("#example").show();
$('#example').photobooth().on("image", function (event, dataUrl) {
$("#imgcamera").attr('src', dataUrl);
$("#pp").val(dataUrl);
});
$('#example').data("photobooth").resize(400, 300);
}
});
</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.

<script src="~/Scripts/bootstrap-fileupload.js"></script>
<script src="~/Scripts/photowebcam.js"></script>

Step 6: Write the following code in controller. For the post method.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddEmployee(usr_User UserNewAdd, HttpPostedFileBase file, FormCollection fc)
{
Random objrandom = new Random();
string Password = Convert.ToString(objrandom.Next());
//For Store Image in Database...!!!
if (UserNewAdd.ProfilePicture != null && file == null)
{
UserNewAdd.ProfilePicture = UserNewAdd.ProfilePicture.Replace("data:image/png;base64,", ""); //The converted base64 string data have "data:image/png;base64," as additional data
string base64 = UserNewAdd.ProfilePicture.Substring(UserNewAdd.ProfilePicture.IndexOf(',') + 1);
base64 = base64.Trim('\0');
byte[] chartData = Convert.FromBase64String(base64);
CreateImage(chartData, UserNewAdd.EmailID.ToString() + ".png");
UserNewAdd.ProfilePicture = UserNewAdd.EmailID.ToString() + ".png";
}
if (file != null)
{
var ProfPicName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/ProfilePicture/"), ProfPicName);
file.SaveAs(path);
UserNewAdd.ProfilePicture = file.FileName;
}
//For Store language Known...!!!
if (fc["languge"] != null)
{
String languageKnownList = fc["languge"].ToString();
UserNewAdd.LanguageKnown = languageKnownList;
}
//Create new Guid For user...!!!
UserNewAdd.UserID = Guid.NewGuid();
UserNewAdd.Password = Password;
DateTime UserDOB = new DateTime();
DateTime UserJoinDate = new DateTime();
DateTime UserReleaveDate = new DateTime();
if (fc["DOB"] != null)
{
UserDOB = DateTime.ParseExact(fc["DOB"], "MM/dd/yyyy", CultureInfo.InvariantCulture);
}
if (fc["JoiningDate"] != null)
{
UserJoinDate = DateTime.ParseExact(fc["JoiningDate"], "MM/dd/yyyy", CultureInfo.InvariantCulture);
}
if (fc["ReleavingDate"] == null || fc["ReleavingDate"] == "")
{
UserReleaveDate = Convert.ToDateTime(null);
}
else
{
UserReleaveDate = DateTime.ParseExact(fc["ReleavingDate"], "MM/dd/yyyy", CultureInfo.InvariantCulture);
}
UserNewAdd.DOB = UserDOB;
UserNewAdd.JoiningDate = UserJoinDate;
UserNewAdd.IsActive = false;
UserNewAdd.RoleName = _dataContext.usr_Roles.Where(s = > s.RoleID == UserNewAdd.RoleID).SingleOrDefault().RoleName;
//For Add and Save record in database...!!!
_dataContext.usr_Users.InsertOnSubmit(UserNewAdd);
usr_Address AddAddressDetail = new usr_Address();
AddAddressDetail.AddressID = Guid.NewGuid();
AddAddressDetail.StreetOne = UserNewAdd.usrAddressList.StreetOne;
AddAddressDetail.StreetTwo = UserNewAdd.usrAddressList.StreetTwo;
AddAddressDetail.Landmark = UserNewAdd.usrAddressList.Landmark;
AddAddressDetail.City = UserNewAdd.usrAddressList.City;
AddAddressDetail.State = UserNewAdd.usrAddressList.State;
AddAddressDetail.Country = UserNewAdd.usrAddressList.Country;
AddAddressDetail.UserID = UserNewAdd.UserID;
AddAddressDetail.AddressType = "Primary Address";
_dataContext.usr_Address.InsertOnSubmit(AddAddressDetail);
_dataContext.SubmitChanges();
if (UserNewAdd.usrAddressList.isper == true)
{
usr_Address PerAdress = new usr_Address();
PerAdress.AddressID = Guid.NewGuid();
PerAdress.StreetOne = UserNewAdd.usrAddressList.streatone1;
PerAdress.StreetTwo = UserNewAdd.usrAddressList.steattwo1;
PerAdress.Landmark = UserNewAdd.usrAddressList.landmark1;
PerAdress.City = UserNewAdd.usrAddressList.city1;
PerAdress.State = UserNewAdd.usrAddressList.state1;
PerAdress.Country = UserNewAdd.usrAddressList.country1;
PerAdress.UserID = UserNewAdd.UserID;
PerAdress.AddressType = "Permanent Address";
_dataContext.usr_Address.InsertOnSubmit(PerAdress);
_dataContext.SubmitChanges();
}
string strLink = Convert.ToString(ConfigurationSettings.AppSettings["ApplicationPath"]) + "/Login/Login?UserID=" + EncryptionedString(UserNewAdd.UserID.ToString());
String msg = SendEmailWithPasswordKey(UserNewAdd.FirstName + " " + UserNewAdd.LastName, UserNewAdd.EmailID, Password, strLink);
return RedirectToAction("EmployeeList");
}

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)

Step 9: Ask for Shared selected device.

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.

8 Comments

Join the conversation! Your thoughts help the community grow.

Foram Radadiya8y ago
Here I can't find bootstrap-fileupload.js From link.Can you please drop on [email protected]
Foram Radadiya8y ago
Hello,can you please Share JS With me?
- Kartik Vaghasiya8y ago
  Http://wolframhempel.github.io/photobooth-js you can download from left hand side.
saleem usmani8y ago
Plz send i need code source ,this is my email [email protected]
sana yaya8y ago
Plz ser i need code source ,this is my email [email protected]
vineet kumar8y ago
Sir please send the database of this project
Santhakumar Munuswamy11y ago
Nice Article. Thanks for sharing
chintan gajera11y ago
Awesome kartik Sir .... Its really helpfull to me....