[SOLVED] IFormFile Upload Image ASP.NET core MVC Is showing null value always

Issue

So i am building a website where i want to implement a add banner form when the User can Upload his banner image as banner Profile.

And here is where the problem i raise, when i run the code, it return always as null.

Here is my controller:

[HttpPost]
        public async Task<ActionResult> AddBannerDataAsync(BannerViewModels abd)
        {
            if (ModelState.IsValid)
            {


                string uniqueFileName = null;
                if (abd.BannerImg1 != null)
                {
                    string uploadsFolder = Path.Combine(WebHostEnvironment.WebRootPath, "Images");
                    uniqueFileName = Guid.NewGuid().ToString() + "_" + abd.BannerImg1.FileName;
                    using (var fs = new FileStream(Path.Combine(uploadsFolder, uniqueFileName), FileMode.Create))
                    {
                        await abd.BannerImg1.CopyToAsync(fs);
                    }


                }
                Banner bnr = new Banner
                {
                    BannerTitle = abd.BannerTitle,
                    BannerDescription = abd.BannerDescription,
                    //BannerImg = abd.BannerImg,
                    //BannerImg = uniqueFileName,
                    BannerUrl = abd.BannerUrl,
                    BannerIndex = abd.BannerIndex
                };
                _db.Banner.Add(bnr);
                _db.SaveChanges();

                
            }
            return Redirect("addbanner");

        } 

Here is my viewmodel:

using Microsoft.AspNetCore.Http;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using SZGMC.Web.Models;

namespace SZGMC.Web.Areas.Admin.ViewModels
{
    public class BannerViewModels
    {
        public int BannerId { get; set; }
        public string BannerTitle { get; set; }
        public string BannerDescription { get; set; }
        public string BannerImg { get; set; }
        public IFormFile BannerImg1 { get; set; }
        public string BannerUrl { get; set; }
        public string BannerIndex { get; set; }
        public int? BMasterId { get; set; }
        public byte? IsDeleted { get; set; }

        public virtual BannerMaster BMaster { get; set; }
    }
}

Here is my view file:

<form asp-controller="Home" asp-action="AddBannerData" method="post" autocomplete="off">

    <div id="main-content">
        <div class="container-fluid">
            <!-- Page header section  -->
            <div class="block-header">
                <div class="row clearfix">
                    <div class="col-lg-6 col-md-5 col-sm-12">
                        <h1>Hi, Welcomeback!</h1>
                        <span>You can add banner here</span>
                    </div>
                    <div class="col-xl-6 col-md-7 col-sm-12 text-md-right">
                        <div class="d-flex align-items-center justify-content-md-end mt-4 mt-md-0 flex-wrap vivify pullUp delay-550">
                            <div class="mb-3 mb-xl-0 ">
                                @*<a href="setting.html" class="btn btn-default">Settings</a>*@
                                <a asp-action="BannerDetails" class="btn btn-dark">Banner List</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-12">
                    <div class="card">
                        <div class="body">

                            <div class="header">
                                <h2><strong>Enter Banner Details</strong></h2>
                            </div>
                            <br />

                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group c_form_group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"></span>
                                            </div>
                                            <input type="text" class="form-control" asp-for="BannerTitle" placeholder="Banner Title" aria-label="bannertitle" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group c_form_group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"></span>
                                            </div>
                                            <input type="text" class="form-control" asp-for="BannerUrl" placeholder="Banner Url" aria-label="bannerurl" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group c_form_group">
                                        <label>Banner Description</label>
                                        <div class="input-group">
                                            <textarea class="form-control" asp-for="BannerDescription" aria-label="Banner Description" rows="6"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="drop-zone">
                                        <span class="drop-zone__prompt">Drop file here or click to upload</span>
                                        <input type="file" asp-for="BannerImg1" name="BannerImg1" class="drop-zone__input" accept="image/*" data-allowed-file-extensions='["jpg", "png" , "jpeg"]' required>
                                    </div>
                                </div>
                              </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group c_form_group">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"></span>
                                                </div>
                                                <input type="text" class="form-control" asp-for="BannerIndex" placeholder="Banner Index" aria-label="bannerindex" aria-describedby="basic-addon1">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group c_form_group">
                                            @Html.DropDownListFor(x => x.BMasterId, ViewBag.MasterBanner as SelectList, "Choose Banner Type", new { @class = "form-control" })
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-2" align="center">
                                    <button type="submit" class="btn btn-success btn-round">Add Banner</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
</form>

When i try To upload the img in the browser it doesn’t Throw any exception, it just doesn’t Upload the image to the database and the column is NULL.

thank you in advance to everybody for any help or advice.

Solution

you must use enctype="multipart/form-data" attribute on form tag.

<form asp-controller="Home" asp-action="AddBannerData" method="post" autocomplete="off" enctype="multipart/form-data">

    <div id="main-content">
 ....

Answered By – foad abdollahi

Answer Checked By – Robin (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *