Uploading File and Employee Model in POST Web API

Question

I have an Employee Model and Profile Picture. I need to Upload Profile Picture and Model Date both in one POST method. I just need to save Image File Name in Database and Uploading image in a WebRoot Directory.

Here is my Model: public partial class Employers

{
    public int EmployerId { get; set; }
    public string Companyname { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string Mobile { get; set; }
    public string Password { get; set; }
    public string DisplayImage { get; set; }
    public bool? IsActive { get; set; }
    public DateTime StateDate { get; set; }
}

Here is my Controller Code:

    [HttpPost]
    public async Task<ActionResult<Employees>> PostEmployees([FromForm] FileUploadAPI Image, [FromBody]Employees employees)
    {
        try
        {
            _context.Employees.Add(employees);
            await _context.SaveChangesAsync();
            await UploadImage(Image, 2, employees.EmployeeId);
            var returnInfo = CreatedAtAction("GetEmployees", new { id = employees.EmployeeId }, employees);
            return returnInfo;
        }
        catch(Exception ex)
        {
            return NoContent();
        }
    }

    public class FileUploadAPI
    {
        public IFormFile files { get; set; }
    }

    public async Task<string> UploadImage(FileUploadAPI files, int UserType, int UserId)
    {
        if (files.files.Length > 0)
        {
            try
            {
                if (!Directory.Exists(_hostingEnvironment.WebRootPath + "\\Employees\\"))
                {
                    Directory.CreateDirectory(_hostingEnvironment.WebRootPath + "\\Employees\\");
                }
                Guid guid = Guid.NewGuid();
                string filename = _hostingEnvironment.WebRootPath + "\\Employees\\" + $"EM-{UserType}-UserId-{guid}";
                using (FileStream filestream = System.IO.File.Create(filename))
                {
                    await files.files.CopyToAsync(filestream);
                    filestream.Flush();
                    return filename;
                }
            }
            catch (Exception ex)
            {
                return ex.ToString();
            }
        }
        else
        {
            return "Not Found";
        }
    }

If i just upload File in POSTMAN without Employee Model, its working fine. But when i pass both File EMployee Data both then FILE is returning null.

Any Suggestion, Solution ?

Thanks

score 0 · Answer 1 · answered Jul 10 '20 at 20:12

0

It's impossible to use [FromForm] and [FromBody] simultaneously as is mentioned here. But I think You have 2 choices:

You can either put your JSON body into a form and send Employee data besides the File or use 2 separate endpoints for form upload. An endpoint for uploading user picture using [FromFile] and obtaining a pictureId and another for sending Employee in the body with populated pictureId key.

answered Jul 10 '20 at 20:12

Hadi Samadzad

1,480
2
13
22

Can you please help me advising how to take this FILE uploaded in POSTMAN (form-data). Actually I am not able to reach that file from my POST action. – Jugnu Khan Jul 11 '20 at 05:56
See this link: https://stackoverflow.com/a/50531746/10818730 – Hadi Samadzad Jul 11 '20 at 06:15

score 0 · Answer 2 · answered Jul 13 '20 at 08:01

Firstly change FromBody to FromForm.Then,because you want to save filename to the database,change your code like below:

[HttpPost]
public async Task<ActionResult<Employers>> PostEmployees([FromForm] FileUploadAPI Image, [FromForm]Employers employees)
{
    try
    {                
        var filename = await UploadImage(Image, 2, employees.EmployerId);
        employees.DisplayImage = filename;
        _context.Employers.Add(employees);
        await _context.SaveChangesAsync();
        var returnInfo = CreatedAtAction("GetEmployees", new { id = employees.EmployerId }, employees);
        return returnInfo;
    }
    catch (Exception ex)
    {
        return NoContent();
    }
}

Your postman should be like below:

Result:

Uploading File and Employee Model in POST Web API

2 Answers2