[Easy Way]-Receive File And Other Form Data Together In ASP.NET Core Web API

Today, we will look into how to Receive files and other form data together in ASP.NET Core Web API.

Our objective is to create a straightforward ASP.NET Core Web API that can handle both a model and an image file.

I am currently engaged in a project involving an ASP.NET Core Web API, where the requirement is to accept multipart form data along with a user model. Essentially, our application's developers aim to update user profiles, and the profile update screen includes the option to upload a user profile picture. Hence, we need to develop a POST API capable of accepting both JSON data and images in a single POST request using multipart form data.

The primary question that arises is whether it's feasible to send JSON data and an image simultaneously in a single POST request, and if so, how to implement multipart form data file upload in ASP.NET Core Web API.

How can we upload image with other parameter in core API ?

so let’s create a Multipart/form-data images upload with JSON asp.net core API.

Step 1: Create an Asp core web API project in .Net 6 and add an API controller.

Step 1:Create a Model class for posting JSON data.

UserProfileModel.cs contains the four properties UserId, Name, Email_Id, and Image.

 public class UserProfileModel 
    {
        [Required]
public int UserId { get; set; }
        [Required]
public string Name { get; set; }
        [Required]
public string Email_Id { get; set; }
        [Required]
public IFormFile Image { get; set; }
    }

Step:3 Create POST API that accepts both images and JSON

Now in the controller, I have created a post API that accepts the “UserProfileModel.cs” model as a parameter.

 [Route("api/[controller]/[action]")]
    [ApiController]
public class UserProfileController : ControllerBase
    {
private readonly AdequateDbContext _context;
private IHostingEnvironment _hostingEnvironment;
public UserProfileController(AdequateDbContext context, IHostingEnvironment environment)
        {
            _context = context;
            _hostingEnvironment = environment ?? throw new ArgumentNullException(nameof(environment));
        }
// Post: api/UserProfile/UpdateUserProfile
        [HttpPost]
public async Task<IActionResult> UpdateUserProfile([FromForm] UserProfileModel userProfileModel)
        {
            Dictionary<string, string> resp = new Dictionary<string, string>();
if (!ModelState.IsValid)
            {
return BadRequest(ModelState);
            }
try
            {
//getting user from the database
var user = await _context.Users.FindAsync(userProfileModel.UserId);
if (user != null)
                {
//Get the complete folder path for storing the file inside it.  
var path = Path.Combine(_hostingEnvironment.WebRootPath, "images/");
                    
//checking if folder not exist then create it
if ((!Directory.Exists(path)))
                    {
                        Directory.CreateDirectory(path);
                    }
//getting file name and combine with path and save it
string filename = userProfileModel.Image.FileName;
using (var fileStream = new FileStream(Path.Combine(path, filename), FileMode.Create))
                    {
await userProfileModel.Image.CopyToAsync(fileStream);
                    }
                    user.ProfilePicture = "/images/"+ filename;
                    user.UpdatedAt = DateTime.UtcNow;
await _context.SaveChangesAsync();
//adding image url dictionery for returning in response
                    resp.Add("imageurl ", user.ProfilePicture);
                }

            }
catch (Exception ex)
            {
return BadRequest(ex.Message);
            }
return Ok(resp);
        }
    }

The UserProfileController class is a controller in an ASP.NET Core Web API. It's responsible for handling requests related to user profiles.

• Constructor Injection: The controller class receives an instance of AdequateDbContext and IHostingEnvironment through constructor injection. These dependencies are required for database operations and accessing the hosting environment, respectively.
• UpdateUserProfile Action: This action method is decorated with the [HttpPost] attribute, indicating that it handles HTTP POST requests. It's responsible for updating user profiles with the provided data.
• Method Parameters: The UpdateUserProfile method accepts a single parameter userProfileModel, which is annotated with the [FromForm] attribute. This indicates that the data for this parameter will be retrieved from the form data of the HTTP request.
• Model Validation: The method checks if the model state is valid. If not, it returns a BadRequest response with the ModelState errors.
• User Retrieval: It retrieves the user from the database using the provided userId from the userProfileModel.
• File Handling: The method handles the uploaded image file. It constructs the file path for storing the image in the webroot's images directory. If the directory doesn't exist, it creates it. Then, it saves the uploaded image file to the specified path.
• Update User Profile: It updates the user's profile picture path and the UpdatedAt property with the current timestamp.
• Response: If the operation is successful, it returns an OK response with a dictionary containing the image URL. If an exception occurs, it returns a BadRequest response with the error message.

In above code we shows you logic for how to handle multipart form data file uploads in an ASP.NET Core Web API, specifically for updating user profiles with an image upload feature.

In the controller constructor, I’m Injecting IHostingEnvironment and entity framework context class. using IHostingEnvironment we access the folder path in the Asp core.

private readonly DbContext _context;
private IHostingEnvironment _hostingEnvironment;
public UserProfileController(DbContext context, IHostingEnvironment environment)
        {
            _context = context;
            _hostingEnvironment = environment ?? throw new ArgumentNullException(nameof(environment));
        }

Now let’s perform testing the postman

let’s put debugger and see we are getting the files or not.

as you can in the above image ,we are getting the posted image file.

*Thank you so much if you have a question please comment

HTML multipart/form-data

HTML Forms are used to get information from users. This information may include feedback, personal information, messages, complaints, or other suggestions.

You will find HTML Forms on many Websites. You can see these as Sign Up Forms, Log in Forms, Payment Details Forms, Survey Forms, etc. Do you know that Google’s Search Box is also an HTML Form?.

In the forms, the necessary information is filled by the users. And this information is sent to the server. From where webmasters can access it.
Information about all Form Elements

HTML Forms are defined by Form Element. Form in HTML page works like a container tag. Within which Forms are created by defining other Form Elements. Apart from the Form Element, there are also many other important Form Elements. Which are being told below.

Input – Input Element is the second Required Element of HTML Form. Various types of Data Fields are defined in the Form by Input Element. Whose type Attribute determines.
Select – A drop-down list is defined in the form of the Select Element. More information than this is contained in one field itself.
textarea – By the way, Text Fields can be defined by Input Element. But, Multiline Data Fields can be defined only by the textarea element. Because only single-line data fields can be created from the input element.

When your application makes a POST request, we have to encode the data that are input informs that form the body of the request in some way.

HTML forms provide three methods of encoding.

• application/x-www-form-urlencoded (this is default)
• multipart/form-data
• text/plain

1. Avoid to user use text/plain if you are writing client-side code ,use multipart/form-data when your form contains form input file type that means you are trying to upload the file in HTML oage i.e elements.
2. if your form does not contain the file type input then you can use multipart/form-data , application/x-www-form-urlencoded.