ASP.Net Core: Upload Image and saving path in Database is not working

jsaneela...

SOLVED CLOSED ACTIVE ANSWERED
User: jsaneelachowdary
Posted: on Nov 07, 2023 12:10 AM
Forum: ASP.Net Core MVC
Replies: 4
Views: 1209

Write a code to Develop a feature for an ASP.NET MVC 6 web application. Create an upload image where users can upload images. Once an image is uploaded, it should be saved in a folder named 'Images.' Additionally, the path to the uploaded image should be stored in the 'ImagePath' column in the 'dbo.SolutionImage' table, associating it with a specific 'SolutionId.'

Please provide the necessary code and instructions to implement this feature, ensuring that the uploaded images are stored and associated correctly.

It is showing no error and running fine, but it is not saving in Images folder, no path is saved in ImagePath in SolutionImages and also no content is saved in Solutions.

SolutionsController.cs:

public async Task<IActionResult> Add(AddSolutionViewModel addSolutionRequest)
{

    if (addSolutionRequest.Image != null && addSolutionRequest.Image.Length > 0)
    {
        var fileName = Guid.NewGuid().ToString() + Path.GetExtension(addSolutionRequest.Image.FileName);
        var filePath = Path.Combine("Images", fileName);
        using (var fileStream = new FileStream(filePath, FileMode.Create))
        {
            await addSolutionRequest.Image.CopyToAsync(fileStream);
        }
        var solutionImage = new SolutionImage()
        {
            SolutionId = addSolutionRequest.Id,
            ImagePath = "/Images/" + fileName
        };
        mvcDemoDbContext.SolutionImages.Add(solutionImage);
        await mvcDemoDbContext.SaveChangesAsync();

        var solution = new Solutions()
        {
            ProblemStatement = addSolutionRequest.ProblemStatement,
            Module = addSolutionRequest.Module,
            RootCause = addSolutionRequest.RootCause,
            Proposedsolutions = addSolutionRequest.Proposedsolutions,
            SolutionImages = new List<SolutionImage> { solutionImage }
        };
        await mvcDemoDbContext.Solutions.AddAsync(solution);
        await mvcDemoDbContext.SaveChangesAsync();
        return RedirectToAction("Index");
    }
    return View(addSolutionRequest);
}

AddSolutionViewModel.cs:

using demo.Models.Domain;
using System.ComponentModel.DataAnnotations.Schema;

namespace demo.Models
{
    public class AddSolutionViewModel
    {
        public int Id { get; set; }

        [Column("Problem Statement")]
        public string? ProblemStatement { get; set; }

        [Column("Problem Description")]
        public string? ProblemDescription { get; set; }

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

        [Column("Root Cause")]
        public string? RootCause { get; set; }

        [Column("Proposed solutions")]
        public string? Proposedsolutions { get; set; }

        [NotMapped]
        public List<SolutionImage>? SolutionImages { get; set; }

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

Solutions.cs:

using System.ComponentModel.DataAnnotations.Schema;

namespace demo.Models.Domain
{
    public class Solutions
    {
        public int Id { get; set; }

        [Column("Problem Statement")]
        public string? ProblemStatement { get; set; }

        [Column("Problem Description")]
        public string? ProblemDescription { get; set; }

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

        [Column("Root Cause")]
        public string? RootCause { get; set; }

        [Column("Proposed solutions")]
        public string? Proposedsolutions { get; set; }

        [NotMapped]
        public List<SolutionImage> SolutionImages { get; set; }
    }
}

SolutionImages.cs:

using System.ComponentModel.DataAnnotations.Schema;

namespace demo.Models.Domain
{
    public class SolutionImage
    {

        [Column("ImageID")]
        public int Id { get; set; }
        public int SolutionId { get; set; }

        [ForeignKey("SolutionId")]
        public Solutions Solution { get; set; }

        [Column("ImagePath")]
        public string ImagePath { get; set; }
    }
}

Add.cshtml:

@model demo.Models.AddSolutionViewModel

<!DOCTYPE html>
<html>
<head>
    <title>My Form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <form method="post" class="form">
            <div class="form-group">
                <label asp-for="ProblemStatement" class="control-label"></label>
                <input asp-for="ProblemStatement" class="form-control" />
                <span asp-validation-for="ProblemStatement" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ProblemDescription" class="control-label"></label>
                <input asp-for="ProblemDescription" class="form-control" />
                <span asp-validation-for="ProblemDescription" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Module" class="control-label"></label>
                <input asp-for="Module" class="form-control" />
                <span asp-validation-for="Module" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="RootCause" class="control-label"></label>
                <input asp-for="RootCause" class="form-control" />
                <span asp-validation-for="RootCause" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Proposedsolutions" class="control-label"></label>
                <input asp-for="Proposedsolutions" class="form-control" />
                <span asp-validation-for="Proposedsolutions" class="text-danger"></span>
            </div>

            <div class="mb-3">
                <label for="image" class="form-label" style="font-family: Alstom; color: #1d3245; font-size: 20px;">Image</label>
                <input type="file" class="form-control" name="image" id="image" accept="image/*">
            </div>


            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
User: dharmendr
Replied: on Nov 07, 2023 07:15 AM
Report

You need to set the enctype to multipart/form-data.

It is required to upload the file which is missing in your code.

jsaneelachowdary says:
 <form method="post" class="form">

Replace with below.

<form method="post" class="form" enctype="multipart/form-data">

jsaneela...

0 3

Reply
User: jsaneelachowdary
Replied: on Nov 12, 2023 08:54 PM
Report

in this code snippet, even i dont upload images, and fill all the fields and click submit, data should be saved and redirect to index because images upload is optional

[HttpPost] 
[ValidateAntiForgeryToken] 
public async Task<IActionResult> Add(AddSolutionViewModel model, List<IFormFile> images) 
{
 if (ModelState.IsValid) 
 {
     var solution = new Solutions { 
	    ProblemStatement = model.ProblemStatement, 
		ProblemDescription = model.ProblemDescription, 
		Module = model.Module, 
		RootCause = model.RootCause, 
		Proposedsolutions = model.Proposedsolutions
		};

    mvcDemoDbContext.Add(solution);
    await mvcDemoDbContext.SaveChangesAsync(); // Save solution first

    foreach (var image in images)
    {
        if (image != null)
        {
            var fileName = Path.GetFileName(image.FileName);
            var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Images", fileName);

            using (var fileStream = new FileStream(filePath, FileMode.Create))
            {
                await image.CopyToAsync(fileStream);
            }

            var solutionImage = new SolutionImage
            {
                SolutionId = solution.Id,
                ImagePath = $"/Images/{fileName}"
            };

            mvcDemoDbContext.Add(solutionImage);
        }
    }

    // Save changes after processing all images
    await mvcDemoDbContext.SaveChangesAsync();

    return RedirectToAction(nameof(Index));
}

return View(model);
}

jsaneela...

0 4

Reply
User: jsaneelachowdary
Replied: on Nov 12, 2023 09:21 PM
Report

complete code:

AddSolutionViewModel.cs:

using one.Models.Domain;
using System.ComponentModel.DataAnnotations.Schema;

namespace one.Models
{
    public class AddSolutionViewModel
    {
        public int Id { get; set; }

        [Column("Problem Statement")]
        public string ProblemStatement { get; set; }
        
        [Column("Module")]
        public string Module { get; set; }

        [Column("Root Cause")]
        public string RootCause { get; set; }

        [Column("Proposed solutions")]
        public string Proposedsolutions { get; set; }

        [NotMapped]
        public List<SolutionImages>? SolutionImages { get; set; }

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

SolutionController.cs:

using one.Data;
using one.Models;
using one.Models.Domain;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.CodeAnalysis;
using Microsoft.EntityFrameworkCore;
using static System.Net.Mime.MediaTypeNames;
using System.Reflection.Metadata.Ecma335;

namespace one.Controllers
{
    public class SolutionsController : Controller
    {
        private readonly MVCDemoDbContext mvcDemoDbContext;

        public SolutionsController(MVCDemoDbContext mvcDemoDbContext)
        {
            this.mvcDemoDbContext = mvcDemoDbContext;
        }

        [HttpGet]
        public async Task<IActionResult> Index()
        {
            var solutions = await mvcDemoDbContext.Solutions.ToListAsync();
            return View(solutions);
        }
        [HttpGet]
        public IActionResult Add()
        {
            return View();
        }

        public async Task<IActionResult> Add(AddSolutionViewModel addSolutionRequest, IFormFile[] images)
		{
		if (ModelState.IsValid)
		{
		var solution = new Solutions
        {
            ProblemStatement = addSolutionRequest.ProblemStatement,
            Module = addSolutionRequest.Module,
            RootCause = addSolutionRequest.RootCause,
            Proposedsolutions = addSolutionRequest.Proposedsolutions
        };

        mvcDemoDbContext.Add(solution);
        await mvcDemoDbContext.SaveChangesAsync();

        if (images != null && images.Length > 0)
        {
            foreach (var image in images)
            {
                var fileName = Path.GetFileName(image.FileName);
                var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Images", fileName);

                using (var fileStream = new FileStream(filePath, FileMode.Create))
                {
                    await image.CopyToAsync(fileStream);
                }

                var solutionImage = new SolutionImages
                {
                    SolutionId = solution.Id,
                    ImagePath = $"/Images/{fileName}"
                };

                mvcDemoDbContext.Add(solutionImage);
            }

            await mvcDemoDbContext.SaveChangesAsync();
        }

        return RedirectToAction(nameof(Index));
    }

    return View(addSolutionRequest);
}

Add.cshtml:

@model one.Models.AddSolutionViewModel


<!DOCTYPE html>
<html>
<head>
    <title>My Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @* <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> *@
    <style>
        #addissue{
            padding-top:110px;
        }
    </style>
</head>
<body

    <div style="margin-top:110px;">
        <h1 style="font-family:Alstom;color:#1d3245">Add new data</h1>
        <form method="post" action="Add" class="mt-5" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="" class="form-label" style="font-family:Alstom;color:#1d3245;font-size:20px;">Problem Statement</label>
                <input type="text" class="form-control" asp-for="ProblemStatement" />
            </div>
            <div class="mb-3">
                <label for="" class="form-label" style="font-family:Alstom;color:#1d3245;font-size:20px;">Module</label>
                <input type="text" class="form-control" asp-for="Module" />
            </div>
            <div class="mb-3">
                <label for="" class="form-label" style="font-family:Alstom;color:#1d3245;font-size:20px;">Root Cause</label>
                <input type="text" class="form-control" asp-for="RootCause" />
            </div>
            <div class="mb-3">
                <label for="" class="form-label" style="font-family:Alstom;color:#1d3245;font-size:20px;">Proposed Solutions</label>
                <input type="text" class="form-control" asp-for="Proposedsolutions" />
            </div>
            <div class="mb-3">
                <label for="" class="form-label" style="font-family:Alstom;color:#1d3245;font-size:20px;">Upload Images</label>
                <input type="file" asp-for="Images" style="width:300px ; height:40px;" />
            </div>
            <button type="submit" class="btn btn-primary" style="margin-top:15px;background-color:#1d3245;">Submit</button>
        </form>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

in this code snippet , even i dont upload images , and fill all the fields and click submit , data should be saved and redirect to index because images upload is optional

Here it showing "The images are required" but it should be not like that, even we upload images or not, content should submit.

dharmend...

0 5

Reply
User: dharmendr
Replied: on Nov 13, 2023 12:48 AM
Report

jsaneelachowdary says:
[NotMapped]

public IFormFile[] Images { get; set; }

As you are passing the IFormFile as parameter to the Post Action Method, remove the property from the class AddSolutionViewModel.

namespace one.Models
{
    public class AddSolutionViewModel
    {
        public int Id { get; set; }
 
        [Column("Problem Statement")]
        public string ProblemStatement { get; set; }
         
        [Column("Module")]
        public string Module { get; set; }
 
        [Column("Root Cause")]
        public string RootCause { get; set; }
 
        [Column("Proposed solutions")]
        public string Proposedsolutions { get; set; }
 
        [NotMapped]
        public List<SolutionImages>? SolutionImages { get; set; }
    }
}

In the View set the name attribute for the Input FileUpload element instead of asp-for and set multiple attribute to allow multiple files.

HTML

<input type="file" name="Images" style="width:300px; height:40px;" multiple="multiple" />

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

ASP.Net Core: Upload Image and saving path in Database is not working

Company

Explore

Follow us

Contact Us