如何使用 .NET Core API 将图像文件上传到数据库？

Question

I am creating an application where a user can post, something like a forum. I am trying to load an image and text into the database, for that, I have two tables and they are both related through an id. I figured out how to load text content, but I really don't know how to do the same with image content. I'm using an MVC view with it respective controller to consume the API.

The model I'm using:

public class ForumThemeModel
{
    public ForumThemeModel()
    {
        Themes = new HashSet<Theme>();
    }

    //forum table
    [Key]
    public int IdForum { get; set; }
    public string PostTittle { get; set; }

    //theme table
    public int? Idtheme { get; set; }
    public string TextContent { get; set; }
    public int? IdForum { get; set; }
    public IFormFile ContentFile { get; set; } //where the image will be stored
    public string FileNameA { get; set; }
    public string FileType { get; set; }
}

The API controller where the post creation is made:

    [HttpPost]
    [Consumes("multipart/form-data")]
    [Route("createPost")]
    public async Task<IActionResult> createPost([FromBody]ForumThemeModel model)
    {
        Forum forum = new Forum();

        Theme theme = new Theme();

        var fileName = Path.GetFileName(model.FileNameA);
        var fileExt = Path.GetExtension(fileName);
        var newFileName = String.Concat(Convert.ToString(Guid.NewGuid()), fileExt);

        using(var target = new MemoryStream())
        {
            await model.ContentFile.CopyToAsync(target);
            theme.ContentFile = target.ToArray();
        }

        forum.PostTittle = model.PostTittle;
        theme.FileNameA = newFileName;
        theme.FileType = fileExt;

        var postTittle = new SqlParameter("@postTittle", forum.PostTittle);
        var textContent = new SqlParameter("@textContent", theme.TextContent);
        var content_file = new SqlParameter("@content_file", theme.ContentFile);
        var file_name_a = new SqlParameter("@file_name_a", theme.FileNameA);
        var FileType = new SqlParameter("@FileType", theme.FileType);

        //saves everything to database

        return Ok();
    }

The MVC controller where the API is used:

    [HttpPost]
    public IActionResult createPost(ForumThemeModel model)
    {
        HttpClient hc = new HttpClient();
        hc.BaseAddress = new Uri("https://localhost:44325/api/Users");

        var userPost = hc.PostAsJsonAsync<ForumThemeModel>("Users/createPost", model);

        userPost.Wait();
        
        //do something when the resquest result is successful
    }

The view of the MVC controller:

@model Huerbog.Models.Request.ForumThemeModel

@{
     ViewData["Title"] = "CreatePost";
 }
 <hr />
 <div class="row">
    <div class="col-12 col-md-9">
        <form enctype="multipart/form-data" asp-action="createPost">
           <div asp-validation-summary="ModelOnly" class="text-danger"></div>

           <div class="form-group h4">
              <label asp-for="PostTittle" class="control-label">Tittle</label>
              <input asp-for="PostTittle" class="form-control" />
              <span asp-validation-for="PostTittle" class="text-danger"></span>
           </div>
           <div class="form-group h4">
              <label asp-for="Content" class="control-label">Content of the post</label>
              <textarea rows="5" asp-for="Content" class="form-control"></textarea>
              <span asp-validation-for="Content" class="text-danger"></span>
           </div>
           <div class="form-group h4">
              <label asp-for="ContentFile" class="control-label">Imagen:</label><br />
              <input class="form-control-file" multiple asp-for="ContentFile" type="file" />
           </div>
           <div class="form-group h4">
              <input type="submit" value="Create post" class="btn btn-primary" />
           </div>
         </form>
    </div>
 </div>

So I have read about uploading images or files and it indicates that the attribute enctype = "multipart / form-data" should be present in the view when uploading images or different types of files in a database, due to that attribute two things happen: the first is that when I leave the attribute in the view the MVC controller does not use the API controller, but the model receives the information from the file or image such as the name, the file type, etc. The second is when I remove the attribute from the view, in this case the MVC controller makes use of the API controller, but the model does not contain anything regarding the file or the image. In both cases the text content is received by the model, but it is also not saved by the database due to the lack of information regarding the image.

I'm not very sure if the enctype = "multipart / form-data" atribute is the main reason, but as I said before, the text content, before the image upload, was working well and the enctype = "multipart / form-data" was not present.

I've stuck on the img upload for a while and really I don't know how to do it, any help is appreciated.

Answer 1

public IFormFile ContentFile { get; set; }

Firstly, please note that PostAsJsonAsync method would serialize the model data as JSON then send in the request body, which does not make sense to serialize a FormFile , it would cause an error.

To achieve the requirement of consuming an API from MVC controller action to upload file(s) with other data, you can refer to the following example code.

[HttpPost]
public async Task<IActionResult> CreatePost(ForumThemeModel model)
{
    var formContent = new MultipartFormDataContent();

    formContent.Add(new StringContent(model.PostTittle), "PostTittle");

    //...
    //for other properties, such as FileNameA, FileType etc
    //...

    formContent.Add(new StreamContent(model.ContentFile.OpenReadStream()), "ContentFile", Path.GetFileName(model.ContentFile.FileName));


    HttpClient hc = new HttpClient();
    hc.BaseAddress = new Uri("https://localhost:44325/api/Users/");

    var userPost = await hc.PostAsync("createPost", formContent);

    //...

API action

public async Task<IActionResult> createPost([FromForm]ForumThemeModel model) 
{
    //...