.NET 6 API - Upload image from frontend to database

Question

I am working on my first project as a junior developer, but i also got the task of creating the backend API. This is therefore my first time touching any backend so i almost dont know any c# or .NET.

Frontend: Nextjs, typescript Backend: .NET 6, c#

The problem: The users need to be able to upload an image to an artist object. As of now i am only using a string that represents the path where the image is stored in the frontend.

I will figure out how i will recieve the image in the frontend, and i will create an endpoint in the API where i can PUT the image.

The question im trying to ask is how do i do the recieving and storing of the image in the .NET?

Artist entity:

namespace BookingAPI.Entities
{
    public class Artist
    {
        public string Id { get; set; }
        public string Name { get; set; } = null!;
        public string Description { get; set; }
        public string? Image { get; set; }
    }
}

CreateArtist in Controller

// POST /events/{eventId}/program/artists
        // Create new artist in Program -> Artists
        [HttpPost]
        [Route("/events/{eventId}/program/artists")]
        public async Task<ActionResult<EventArtistDto>> CreateEventArtistAsync(string eventId, CreateEventArtistDto createEventArtistDto)
        {
            Artist artist = new()
            {
                Id = Guid.NewGuid().ToString(),
                Name = createEventArtistDto.Name,
                Description = createEventArtistDto.Description,
                Image = createEventArtistDto.Image,
            };

            await repository.CreateEventArtistAsync(eventId, artist);

            return artist.AsDto(); // add return body?
        }

CreateArtost in inMemRepository

        public async Task CreateEventArtistAsync(string eventId, Artist artist)
        {
            var eventIndex = events.FindIndex(existingEvent => existingEvent.Id == eventId);

            var existingEvent = events[eventIndex];

            var artists = existingEvent.EventProgram.Artists;

            artists.Add(artist);

            await Task.CompletedTask;
        }

Please let me know if i should upload more of the code.

Im really not sure even how to start this code, i am of course googling this at the same time, but though i would make my own question as well so that maybe i could learn this the proper way.

UPDATE:

After reading @EminNiftiyev answer i tried this, but i get errors:

Controller: "Implicitly-typed variables must be initialized"

InMemRepository: "Cannot implicitly convert type 'Microsoft.AspNetCore.Http.IFormFile' to 'string'"

I dont fully understand what i am doing here.

UpdateImageInEventArtistAsync in Controller

//PUT /events/{eventId}/program/artists/{artistId}/image
    // Update the Image in the Artist
    [HttpPost]
    [Route("/events/{eventId}/program/artists/{artistId}/image")]
    public async Task<ActionResult<UpdateImageInEventArtistDto>> 
    UpdateImageInEventArtistAsync(string eventId, string artistId, 
    UpdateImageInEventArtistDto updateImageInEventArtistDto, 
    [FromForm] IFormFile file)
    {
        // Get Program from Event
            var program = await repository.GetEventProgramAsync(eventId);

            var existingArtist = program.Artists.Where(artist => artist.Id == artistId).SingleOrDefault();

            if (existingArtist is null)
            {
                return NotFound();
            }

            var byteArrayImage;
            using (var stream = new MemoryStream())
            {
                await file.CopyToAsync(stream);
                byteArrayImage = stream.ToArray();
            }
            existingArtist.Image = Convert.ToBase64String(byteArrayImage);



            /* await repository.UpdateEventArtistAsync(eventId, artistId, existingArtist); */
            await repository.UpdateImageInEventArtistAsync(eventId, artistId, byteArrayImage);

            return NoContent();
    }

UpdateImageInEventArtistAsync in InMemRepository

public async Task UpdateImageInEventArtistAsync(string eventId, string artistId, IFormFile file)
        {
            var eventIndex = events.FindIndex(existingEvent => existingEvent.Id == eventId);

            var existingEvent = events[eventIndex];

            var artists = existingEvent.EventProgram.Artists;

            var existingArtist = artists.Where(artist => artist.Id == artistId).SingleOrDefault();

            
            
            existingArtist.Image = file;

            await Task.CompletedTask;
        }

Answer 1

First you create endPoint for Upload Image. That time perfectly choice is use IFormFile. Code like this

[HttpPost]
[Route("api/image/upload")]
public async Task<IActionResult> UploadImage([FromForm] IFormFile file)
{
}

Then you get image like byteArray format. For this you should use Stream

var byteArrayImage;
using (var stream = new MemoryStream())
{
   await file.CopyToAsync(stream);
   byteArrayimage = stream.ToArray();
}

Here we go. Now yo can get Image like ByteArray format. And Finally you can insert to Database or another source.

That's perfect practice from another way.