How can I save Image file to SQL database with .NET Core and EF

Question

There is a problem here, the title and description are saving correctly in the SQL database, but it is sending the image file as null. I made some attempts in this way, but I did not get the result I wanted.

How can I print this?

My class:

public class Workplace
{
        [Key]
        [Column("WorkplaceId")]
        public int WorkplaceId { get; set; }

        [NotMapped]
        [Column("WorkplaceThumbnailImage")]
        public byte[]? WorkpaceThumbnailImage { get; set; }

        [Column("WorkplaceTitle")]
        public string? WorkplaceTite { get; set; }

        [Column("WorkplaceExpanation")]
        public string? WorkplaceExplanation { get; set; }
}

Controller post method:

WorkplaceManager workplaceManager = new WorkplaceManager(new EfWorkplaceRepository());

[AllowAnonymous]
[HttpPost]
public IActionResult Index(Workplace p)
{
    Workplace workPlace = new Workplace();
    MemoryStream memoryStream = new MemoryStream();

    foreach (var file in Request.Form.Files)
    {
        p.WorkplaceTite = file.FileName;
        file.CopyTo(memoryStream);

        p.WorkpaceThumbnailImage = memoryStream.ToArray();
    }

    p.WorkpaceThumbnailImage = p.WorkpaceThumbnailImage;
    p.WorkplaceTite = p.WorkplaceTite;
    p.WorkplaceExplanation = p.WorkplaceExplanation;

    workplaceManager.AddWorkplace(p);

    _logger.LogWarning("Success");

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

HTML:

@model EntityLayer.Concrete.Workplace;
@using (Html.BeginForm("Workplaces", "Home", FormMethod.Post, new { enctype = "multipart / form - data"}))
{
    <div class="form-group col-md-12">
                        <label for="inputText">Add</label>
                        <input type="File" class="form-control" id="file" name="file1" multiple="multiple"
                               asp-controller="Home" @Html.DisplayFor(model => model.WorkpaceThumbnailImage) method="post"/>
                    </div>
}

We need to see the markup code for the View or Page that calls the controller method. — Steve
– Steve, Commented Sep 11, 2022 at 15:22
@Steve I updated the question, I think this is the piece of code you mentioned — jr.Dev
– jr.Dev, Commented Sep 11, 2022 at 15:32
i know this is not the solution you are looking for.. but the foreach loop that you have written will overwrite the property values and will always have the last file data irrespective of the number of files you receive. — pankaj
– pankaj, Commented Sep 11, 2022 at 15:35
To have a Html.BeginForm know that it should post a file you need to add enctype = ‘multipart/form-data’ attribute — Steve
– Steve, Commented Sep 11, 2022 at 15:37
remove the spaces from this: "multipart / form - data" inside the form tag — riffnl
– riffnl, Commented Sep 20, 2022 at 13:09

jr.Dev · Accepted Answer · 2022-09-22 10:31:30Z

My class:

public class Workplace
    {
            [Key]
            [Column("WorkplaceId")]
            public int WorkplaceId { get; set; }
    
            [NotMapped]
            [Column("WorkplaceThumbnailImage")]
            public byte[]? WorkpaceThumbnailImage { get; set; }
    
            [Column("WorkplaceTitle")]
            public string? WorkplaceTite { get; set; }
    
            [Column("WorkplaceExpanation")]
            public string? WorkplaceExplanation { get; set; }
    }

Controler post method:

WorkplaceManager workplaceManager = new WorkplaceManager(new EfWorkplaceRepository());
[AllowAnonymous]
    [HttpPost]
    public async Task<IActionResult> Index(Workplace p)
    {

        Workplace workPlace = new Workplace();
        MemoryStream memoryStream = new MemoryStream();

        foreach (IFormFile file in Request.Form.Files)
        {
            workPlace.WorkplaceTite = file.Name;
            file.CopyToAsync(memoryStream);

            p.WorkplaceThumbnailImage = memoryStream.ToArray();


            workPlace.WorkplaceThumbnailImage = workPlace.WorkplaceThumbnailImage;
            p.WorkplaceTite = p.WorkplaceTite;
            p.WorkplaceExplanation = p.WorkplaceExplanation;
        }
        workplaceManager.AddWorkplace(p);
                
        _logger.LogWarning("Success");

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

Html:

@model EntityLayer.Concrete.Workplace;
@using (Html.BeginForm("Workplaces", "Home", FormMethod.Post, new { enctype = "multipart/form-data"}))
{
    <div class="col-lg-5">
                    <div class="card text-white rounded-3 sm-3">
                        <button class="btn card text-white rounded-3" type="submit" asp-area="" id="create" asp-controller="Home" asp-action="Hairdresser" style="background-color: #5B2480;">Add</button>
                    </div>
                </div>
}

This is how I edited the codes with your suggestions. It works flawlessly. Thanks to those who contributed. I realized that the problem is caused by missing resources and spaces in "BeginForm".

you should have given the correct answer to @Ergis (marked as correct answer) with a possible comment about the incorrect BeginForm tag

Ergis · Accepted Answer · 2022-09-12 10:11:13Z

0

...you are using [NotMapped] on the WorkpaceThumbnailImage property, which exludes it from database mapping.
Try removing it.

Edit
Try this other way:

public class Workplace
{
    [Key]
    [Column("WorkplaceId")]
    public int WorkplaceId { get; set; }

    [Column("WorkplaceThumbnailImage")]
    public byte[]? WorkpaceThumbnailImage { get {
        if(this.MyFile is null) 
            return null;
        using var ms = new MemoryStream();
        this.MyFile.CopyTo(ms);
        return ms.ToArray();
    } }

    [NotMapped]
    public IFormFile MyFile { get; set; }

    [Column("WorkplaceTitle")]
    public string? WorkplaceTite { get; set; }

    [Column("WorkplaceExpanation")]
    public string? WorkplaceExplanation { get; set; }
}

Controller:

WorkplaceManager workplaceManager = new WorkplaceManager(new EfWorkplaceRepository());

[AllowAnonymous]
[HttpPost]
public IActionResult Index([FromForm] Workplace p)
{
    workplaceManager.AddWorkplace(p);

    _logger.LogWarning("Success");

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

View:
(Renamed the id and name attributes to MyFile because it should match the property name of the class)

@model EntityLayer.Concrete.Workplace;
@using (Html.BeginForm("Workplaces", "Index", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="form-group col-md-12">
        <label for="MyFile">Add</label>
        <input type="file" class="form-control" id="MyFile" name="MyFile" />
    </div>
}

edited Sep 12, 2022 at 10:11

answered Sep 12, 2022 at 7:42

Ergis

1,2591 gold badge11 silver badges20 bronze badges

10 Comments

jr.Dev Over a year ago

Yes thanks for the fix, I removed the [NotMapped] attribute from the property

jr.Dev Over a year ago

sorry, the problem persists. I missed these lines while debugging. p.WorkpaceThumbnailImage = memoryStream.ToArray(); p.WorkpaceThumbnailImage = p.WorkpaceThumbnailImage; These lines are returning blank.

Ergis Over a year ago

You select file(s) and Request.Form.Files is still empty? Is that what you are saying?

jr.Dev Over a year ago

yes that's what i wanted to say

Ergis Over a year ago

Also, can you confirm, what database are you using (SQL or MySQL), and what is the type of the column of WorkpaceThumbnailImage in db?

|

Collectives™ on Stack Overflow

How can I save Image file to SQL database with .NET Core and EF

2 Answers 2

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related