Как получать с формы изображения через поле типа List (сейчас всегда имеет значение null)?

Question

[Vladimir301]

Пытаюсь сохранить изображение из поля в базу данных в виде Base64String (знаю, что так лучше не делать, но всё же задача такая), но при отправке формы IFormFile всегда null. В базе есть таблицы Image и FeedBack. Нужно прикреплять к отзывам изображения. Ещё есть модель в самом приложении.
Метод в контроллере:

/// <summary>
/// Редактирование отзыва
/// </summary>
/// <returns></returns>
[HttpPut("feedback")]
public async Task<Result<int>> EditFeedBackAsync([FromBody] Models.FeedBack.FeedBack feedBack)
{
    return await _feedBackProvider.EditFeedBackAsync(feedBack);
}

Метод в провайдере:

public async Task<Result<int>> EditFeedBackAsync(Models.FeedBack.FeedBack feedBack)
{
    if (feedBack.SelectedTypeList != null)
    {
        feedBack.TypeFlags = (TypeFlags)feedBack.SelectedTypeList?.Sum();
    }
    if (feedBack.BrandsSelected != null)
    {
        feedBack.Brand = (Brand)feedBack.BrandsSelected?.Sum();
    }
    var mapResult = _mapperProvider.CreateMap<Models.FeedBack.FeedBack, FusionDatabase.Models.FeedBack>(feedBack);
    if (mapResult.HasError)
    {
        return new ErrorResult<int>(mapResult);
    }
    var mappedFeedBack = mapResult.ResponseObject;
    if (feedBack.Images != null)
    {
        foreach (var image in feedBack.Images)
        {
            //Stream stream = image.OpenReadStream();
            //using (var memoryStream = new MemoryStream())
            //{
            //    stream.CopyTo(memoryStream);
            //    byte[] content = memoryStream.ToArray();
            //}
            string base64Content = Convert.ToBase64String(File.ReadAllBytes(image.Name));
            Image imageTmp = new Image(feedBack.Id.ToString(), base64Content);
            mappedFeedBack.Images.Add(imageTmp); 
        }
    }
    return await _feedBackRepository.SaveItemAsync(mappedFeedBack);
}

Поле в которое должны (по идее) передавться изображения с формы в классе FeedBack, который передаётся в метод:

/// <summary>
/// Фото
/// </summary>
[Display(Name = "Фото")]
public List<IFormFile>? Images { get; set; }

Поле для загрузки на View:

<div class="mb-3">
    <label class="form-label">Фото</label>
    <input class="form-control" type="file" multiple id="images" name="images" />
</div>

Класс Image в БД:

public class Image
{
    public Image(string name, string content) 
    {
        Name = name;
        Content = content;
    }
 
    /// <summary>
    /// ID
    /// </summary>
    public int ImageId { get; set; }
 
    /// <summary>
    /// Название
    /// </summary>
    public string? Name { get; set; }
 
    /// <summary>
    /// Файл
    /// </summary>
    public string Content { get; set; }
}

Поле класса FeedBack из БД для связи с Image:

/// <summary>
/// Фото
/// </summary>
public List<Image>? Images { get; set; }

Answer 1

[Роман]

на самой форме прописан атрибут enctype='multipart/form-data'?

Comments

[Vladimir301]

Да

@using (Html.BeginForm("View", "FeedBack", FormMethod.Post, new { enctype = "multipart/form-data", role = "form", @class = "was-validated  col-lg-7" }))

[Vladimir301]

Обновил вопрос. Добавил метод контроллера. Ранее там был только метод провайдера

[Роман]

1. метод у вас помечен HttpPut, а форма передает Post.
2.

[Display(Name = "Фото")]
public IFormFileCollection Images { get; set; }


public async Task<Result<int>> EditFeedBackAsync([FromForm] Models.FeedBack.FeedBack feedBack)

или

public async Task<Result<int>> EditFeedBackAsync(IFormFileCollection Images)

[Vladimir301]

Роман, попытался так сделать, всё равно не работает.

[Роман]

Vladimir301, Смотрите в хроме в devtools запросы, включены файлы или нет, смотрите в контроллере ответ, есть есть ли там,

создал проект проверить

<form enctype="multipart/form-data" action="PostMultipleFile" method="post">
    <input type="file" name="files" multiple>
    <input class="btn" type="submit" value="Upload" />
</form>

[HttpPost("PostMultipleFile")]
 public async Task<ActionResult> PostMultipleFile([FromForm] IFormFileCollection files)
 {
     if (files == null)
     {
         return BadRequest();
     }
     try
     {
          return Ok();
     }
     catch (Exception)
     {
         throw;
     }
}

все работает.

[Vladimir301]

Роман, проблема в том, что я не могу передавать в метод IFormFileCollection или IFormFile на прямую (из-за уже имеющейся в проекте структуры), а также не могу использовать IFormFileCollection так как это "ломает" маппинг. Поэтому я пытаюсь сделать в классе поле типа
List<IFormFile>

[Роман]

А в запросе они есть, данные формы и файлы, под отладкой посмотрите запрос.

[Роман]

Vladimir301, ну кстати у ms пример как раз с List. Я бы попробовал бы с IFormFileCollection, для интереса, создав другой класс, например, просто под отладкой посмотреть. Походу мапинг не работает, как ещё вариант первый параметр контроллера IFormFileCollection, а второй модель ваша.

[Vladimir301]

Роман, А как должны файлы в запросе в браузере выглядеть?

[Роман]

[Vladimir301]

Роман, получилось решить проблему на стороне клиента. Файлы с формы приходят

public async Task<ActionResult> View(FeedBack feedBack, List<IFormFile> images)
{
    if (ModelState.IsValid)
    {
        if (images.Count() > 0)
        {
            feedBack.Images = images.ToList();
        }
        var editResult = await _feedBackProvider.EditFeedBackAsync(feedBack);
        if (editResult.HasError)
        {
            throw new Exception(editResult.Message);
        }

        var feedBackId = editResult.ResponseObject;
        if (feedBack.NpsId != 0)
        {
            await _npsProvider.LinkFeedBackAsync(feedBack.NpsId, feedBackId);
            return RedirectToAction("Index", "Nps");
        }

        return RedirectToAction("Index", "FeedBack");
    }

    var feedBackViewModel = await GetFeedBackViewModel(feedBack);
    return View(feedBackViewModel);
}

теперь проблема с отправкой запроса на сервер. На сервер объект всегда приходит null

public async Task<T?> SendHttpPutRequest<T>(string url, object data = null) where T : new()
{
    try
    {
        var httpClient = _httpClientFactory.CreateClient();
        httpClient.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", await GetTokenAsync());
        using HttpContent httpContent = new ObjectContent(typeof(object), data,
            new JsonMediaTypeFormatter());
        var response = await httpClient.PutAsync($"{AppSettings.WebApiVega}{url}", httpContent);
        var responseBody = await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new Exception(responseBody);
        }
        
        response.EnsureSuccessStatusCode();
        return JsonConvert.DeserializeObject<T>(responseBody);
    }
    catch (Exception exception)
    {
        Logger.LogError(exception, $"Ошибка при выполнении Update запроса {url}. {data}");
        throw new Exception(exception.Message);
    }
}

Через этот метод проходят все запросы, поэтому не желательно его переписывать

[Vladimir301]

Решил попробовать на клиенте переводить в объект Image. Создал точно такой же класс как на сервере. List<IFormFile> заменил на List<Image>. Пытаюсь делать вот так

foreach (var image in images)
{
    using (var ms = new MemoryStream())
    {
        image.CopyTo(ms);
        var fileBytes = ms.ToArray();
        string base64Content = Convert.ToBase64String(fileBytes);

        feedBack.Images.Add(new Image(image.FileName.Replace(" ", "_").Replace(".", "_").ToString(), base64Content));
    }
}

но происходит ошибка

Object reference not set to an instance of an object

[Роман]

ну так посмотрите приходящий запрос под отладкой, что вообще и в каком виде приходит.