[Easy Way]-Receive File and other form data together in ASP.NET Core Web API

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

We will create a simple ASP core web API that accepts the model and image file both.

Recently, I’m working on an ASP CORE web API project, in which we need to receive the multi-part form data within a user model. Basically, my app developer wants to update the user profile that screen also has a user profile picture. That’s why we need to create a POST API that accepts both images and JSON at the same time in a single POST using multipart.

So the first question which comes to my mind is Is it possible to POST JSON and the image at the same time in a single POST request? and How to do 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);
        }
    }

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.

The post [Easy Way]-Receive File and other form data together in ASP.NET Core Web API appeared first on Software Development | Programming Tutorials.