I am working on a social media application with a UseregistrationController that needs to upload a user profile image of each user in the application. I want to retain the File input on the same Create/Edit view as the other fields i.e Name, Display Name, Email Address, Phone Number, etc.
So basically I need a registration page where the user must enter several database fields, including an image file. i.e post File Upload and other form fields to one action in ASP.NET MVC.
I have completed my task successfully so I thought let’s share the idea with other developers also so that they can get help.
In this post, we will cover the following points
- File Upload input as Part of Form with Other Fields
- How to pass other form data field along with MVC File Upload?
- MVC 5 Uploading file with one additional parameter
- MVC File Upload with more than one property
In the below articles I have explained about Uploading both data and files in FormData using Ajax MVC. Now I think you are clear about uploading the image file with form data in ASP.Net MVC applications. if you want do this task using the ajax call then read below article.
Let’s understand with an example, I have created an MVC view that has Name, Display Name, Email Address, Phone Number input fields inside a form.
and that form control has one file upload control for uploading the user profile picture. and we have specified the standard form elements with a file upload “multipart/form-data“. So multipart type handle for all form elements on the page.
@using (Html.BeginForm("RegisterUserProfile", "UserDashboard", FormMethod.Post, new { @class = "log-form", area = "user", enctype = "multipart/form-data" })) { <div class="form-group row"> <label class="col-form-label col-md-2">Full Name * </label> <div class="col-md-10"> <input type="text" class="form-control" value="@ApplicationSession.UserSession.name" required name="fullname" id="fullname" placeholder="Enter Here"> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Display Name* </label> <div class="col-md-10"> <input type="text" class="form-control" value="@ApplicationSession.UserSession.displayname" required name="displayname" id="displayname" placeholder="Enter Here"> <p style="color: #9a9999;padding-top: 5px;">This will be how your name will be displayed in the account section.</p> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Email Address * </label> <div class="col-md-10"> <input type="email" required name="emailaddress" value="@ApplicationSession.UserSession.email" id="emailaddress" class="form-control" placeholder="Enter Here"> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Phone Number * </label> <div class="col-md-10"> <input type="tel" name="PhoneNumber" placeholder="Enter Here" value="@ApplicationSession.UserSession.phone" id="PhoneNumber" class="form-control" pattern="^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$" required> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Upload Photo * </label> <div class="col-md-10"> <input class="form-control" type="file" name="file" id="file"> </div> </div> <div class="text-left"> <button type="submit" class="btn btn-primary">Save Changes</button> </div> }
Action Method Code
In action using the FormCollection object I’m getting form data value inside the controller and In Request.Files we can read our files.Using the entity framework and I’m performing insert in a database table.
// Post:RegisterUserProfile [HttpPost] public ActionResult RegisterUserProfile(FormCollection collection) { //getting form data string fullname = collection["fullname"]; string displayname = collection["displayname"]; string emailaddress = collection["emailaddress"]; string phonenumber = collection["PhoneNumber"]; try { StudentDbEntities db1 = new StudentDbEntities(); var countuser = db1.Users.Where(a => a.Email == emailaddress.Trim()).Count(); if (countuser == 0) { using (StudentDbEntities db = new StudentDbEntities()) { User userobj = new User(); // Checking if Request object has file if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) { HttpPostedFileBase file = Request.Files[0]; string fname = file.FileName; // Get the complete folder path and store the file inside it. fname = Path.Combine(Server.MapPath("~/Content/Images"), fname); file.SaveAs(fname); userobj.ProfilePicture = "/Content/Images/" + file.FileName; } userobj.Name = fullname; userobj.DisplayName = displayname; userobj.Email = emailaddress; userobj.ContactNo = phonenumber; db.Users.Add(userobj); db.SaveChanges(); TempData["ModelError"] = "registered successfully"; return View("Index"); } } else { ViewData["error"] = "email already exist please try with diffrent one!"; return View("Index"); } } catch (Exception ex) { TempData["ModelError"] = ex.Message; return View("Index"); } }
If you have any questions related to the post let me know, I will respond.
Please also share this article to Facebook, Twitter, Reddit, and other social media platform to help developers who face the same issue.
Please like our Facebook and follow us on Twitter for the latest update of technology or for any support.
MVC is a way in which we divide our database, logic, and visual part. The full form of MVC is Model-View-Controller, which means that we call the database the model, the logic part is known as the controller and the visual part is known as the view.
Talking about the technical language, it is such an architectural pattern, with the help of which project management, security, and productivity can be increased by dividing any project into 3 components.
We are not talking about anyone special programming language here because you can use it in any project, whether it is in PHP, ASP.NET, Nodejs, Python, you can use this method in all.
The post How to post File Upload and other form fields to one action Asp .Net MVC C# appeared first on Software Development | Programming Tutorials.
Read More Articles
- Write a value which contain comma to a CSV file in c#?
- Reading CSV File with cells containing commas c#
- Split CSV with columns may contain ‘,’ Comma C#
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- [Simple Way]-ASP.NET Core Upload Multiple File Web API model
- [Simple Way]- Image Upload in .NET Core Web API
- [Easy Way]-Receive File and other form data together in ASP.NET Core Web API
- Replace image in word document using C#
- How to add new rows to an existing word document table in C#
- Simple Way Find and replace text in Word document using C#
- Implementing “Remember Me” Feature in ASP.NET MVC
- [Solved]-Cookie loses value when page is changed in MVC
- How to post File Upload and other form fields to one action Asp .Net MVC C#
- How To Post File and Data to API using HttpClient C#
- Create ASP.NET Core Web API Without Entity Framework
- .NET Core Web API Using Code First Entity Framework Approach
- Create Asp.Net Core Web Api Using Entity Framework Database First
- Registration form with image upload in MVC using jquery Ajax
- How to make an Inline editable table in MVC using jquery?
- CRUD operation using partial view in MVC with modal popup
- Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc
- Crud Operations in MVC Without Entity Framework
- Create Login,Signout and Registration in Asp .Net Mvc Using Entity
- Export Gridview to Excel and Csv in Asp .Net With Formatting Using c#
- How to Display Binary Image in Gridview from Database in Asp .Net c#
- [Solved]-How to Upload pdf file using jquery MVC?
- [Solved]-Uploading both data and files in FormData using Ajax MVC
- C# -Saving a base64 string as an image into a folder on server in Web Api
- [Solved]-Download pdf file from link and save in local file folder in Asp .Net
- [Solved]-Delete Files older than X Months,Days,Minute in a Directory- C# .NET
- [Solved]-LEFT OUTER JOIN in LINQ With Where clause in C#
- INNER JOIN,RIGHT JOIN,LEFT JOIN USING LINQ IN Multiple Table C#
- [Solved]-Convert Base64 To Image And Save in folder and Display it- C#
- [Solved]-How to Overlay Two Images in .NET-C#
- How to Create Multilingual Website in Asp .Net
- C# – How to add double quotes to a string that is inside a variable
- Update an Image with Upload Button For Each Row in Gridview-Asp .Net
- How to Bind Data in DataList Control in Asp.Net – C#
- Upload and Display an Image in Gridview From Image Path in Database -C#