How To Upload Image And Save Image In Project Folder In MVC

Debendra Dash

9y426.2k1025Blog

10 Comments

Join the conversation! Your thoughts help the community grow.

La Thanh6y ago
In this case, I want to save some image_url then how to do it ?
Sharique Ahmad7y ago
On server it doesn't work, like www.mydomain.com, what is issue?
Jasmine Merchant7y ago
Worked well. Thanks for sharing
Mohd Adil8y ago
Please describe in details
John Ademola8y ago
Worked for me..Thanks
jiji jiji10y ago
Tbl.Image_url = file.ToString(); //getting complete url this line generate excepyion because file is null i don't know why help plzz
kalu singh rao10y ago
Nice
Debendra Dash10y ago
Server.MapPath("~/Photo"). use this
Gulsherkhan Shams10y ago
{"The relative virtual path 'G:/NADWA/NADWA/NADWA/SMSAPP/Photo/IMG_2460_0.JPG' is not allowed here. i want to save only the path is ~/Photo/IMG_2460_0.JPG. that,s working for me how do this,how to Remove this ("'G:/NADWA/NADWA/NADWA/SMSAPP") using same your above code
Sanoj Yadav11y ago
good........

Today i am explaining how to upload image in mvc and save the image in project folder.

Create a new MVC project, and choose the following template.

Here is my solution explorer of the project.

Right click on the project and follow the following steps for adding Entity data model to it.

Click on add New Item-Data->ADO.NET Entity Data Model

Click-Next

Choose your connection string and choose the 'Yes' rodio button so that it will automatically update in your web.config.

Now specify the tables you want.

When you click finish it will add your table to the ORM designer as follow.Here your table is mapped as a class and all the fields inside the table act as property.

When you click finish it will add your table to the ORM designer pattern.here your table is mapped as a class and the colums as property.

So here we have 3 fields.

Now we are comming to our main requirement.

Add a img folder to the project so that our images can store here.

Go to the home controller and write the following code here i have described each line of code

public class HomeController: Controller
{
MVCEntities obj = new MVCEntities();
public ActionResult Index() {
return View();
}
[HttpPost]
public ActionResult Index(FormCollection fc, HttpPostedFileBase file)
{
tbl_details tbl = new tbl_details();
var allowedExtensions = new[] {
".Jpg", ".png", ".jpg", "jpeg"
};
tbl.Id = fc["Id"].ToString();
tbl.Image_url = file.ToString(); //getting complete url
tbl.Name = fc["Name"].ToString();
var fileName = Path.GetFileName(file.FileName); //getting only file name(ex-ganesh.jpg)
var ext = Path.GetExtension(file.FileName); //getting the extension(ex-.jpg)
if (allowedExtensions.Contains(ext)) //check what type of extension
{
string name = Path.GetFileNameWithoutExtension(fileName); //getting file name without extension
string myfile = name + "_" + tbl.Id + ext; //appending the name with id
// store the file inside ~/project folder(Img)
var path = Path.Combine(Server.MapPath("~/Img"), myfile);
tbl.Image_url = path;
obj.tbl_details.Add(tbl);
obj.SaveChanges();
file.SaveAs(path);
} else {
ViewBag.message = "Please choose only Image file";
}
return View();
}
}

Right click on Index action method and create a view like this.

The source code for the view is-

@using(Html.BeginForm("Index", "Home", FormMethod.Post, new {
enctype = "multipart/form-data"
})) { < div > < img id = "user_img"
height = "100"
width = "90"
style = "border:solid" / > < /div>
<div>
<input type="file" title="search image" id="file" name="file" onchange="show(this)" / > < /div>
<div>
UserId
</div > < div > < input type = "text"
id = "txt_id"
name = "id" / > < /div>
<div>
UserName
</div > < div > < input type = "text"
id = "txt_name"
name = "Name" / > < /div>
<div>
<input type="submit" title="save" / > < /div>
}

Now i want when i choose the image it should be dispalayed in the image control for this this is my Javascript.

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function show(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
$('#user_img').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>

Add this script just above the form tag.

Now run the project.

As it open start add any information.

Thus this will save our image in img folder and url in database.

And one more things if we are taking other extensions it will not save in database.

In this way we can perform our operation.

Thanks you.