Upload and save Image based on id in HTML Table in ASP.Net MVC

nabilabo...

SOLVED CLOSED ACTIVE ANSWERED
User: nabilabolo
Posted: on Apr 07, 2020 07:42 AM
Forum: ASP.Net MVC
Answer: 1
Views: 8873

Hi,

i want to uplaod image and save it into database according to their id.

i tried my code but unfortunately, it didn't work. When I click Upload, nothing happen.

Model class

    public class ItemModel
    {
        public int item_id { get; set; }
        public string Form_Id { get; set; }
        public Nullable<int> id { get; set; }
        public string auditeeAttach { get; set; }
        public HttpPostedFileBase file1 { get; set; }
  
    }

Controller

        [HttpGet]
        public ActionResult ImageProven(ItemModel imageIn)
        {
            string id = imageIn.Form_Id;
            ViewBag.formId = id;
            return View();
        }
        
        public ActionResult ImageProven(HttpPostedFileBase file1, ItemModel imageIn)
        {
            string id = imageIn.Form_Id.ToString();
            
                if (imageIn != null)
                {
                    var addImage = db.tbl_detailItem.Where(z => z.item_id == imageIn.item_id).FirstOrDefault();
                    if (file1 != null)
                    {
                        var allowedExtensions = new[]
                        {
                        ".Jpg", ".png", ".jpg", "jpeg",".pptx"
                        };

                        var fileName = Path.GetFileName(imageIn.file1.FileName); //getting only file name
                        var ext = Path.GetExtension(imageIn.file1.FileName); //getting the extension(ex-.jpg)
                        if (allowedExtensions.Contains(ext)) //check what type of extension 
                        {
                            string name = Path.GetFileNameWithoutExtension(fileName); //getting file name without extension  
                            string myfile = name +/* "Inn_" + count.ToString().PadLeft(3, '0') +*/ ext;

                            // store the file inside ~/project folder(Img)
                            var path = Path.Combine(Server.MapPath("~/ImageStore/form/"), myfile);
                            addImage.auditeeAttach = "~/ImageStore/form/" + myfile;

                            file1.SaveAs(path);
                            if (String.IsNullOrEmpty(addImage.auditeeAttach))
                            {
                                addImage.auditeeAttach = "~/ImageStore/form/";
                            }
                        }

                        else
                        {
                            ViewBag.message = "Please choose only Image file or Email File";
                            return View();
                        }
                    }
                   
                    db.SaveChanges();
                    ViewBag.formId = id;
                   
                }
                return RedirectToAction("AuditeeListItemDetail", "Auditee", new { id });
          
        }

View

                                @using (Html.BeginForm("ImageProven", "Auditee", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data", id = "file1", name = "file1" }))
                                {
                                    <td data-name="attachment" id="auditeeAttach">
                                        <!-- file upload start-->
                                        <div>
                                            <label class="custom-file-upload form-control">
                                                <i class="fa fa-cloud-upload"></i>

                                                <input  name="file1" type="file" id="file1" required>
                                            </label>
                                        </div>
                                        <!-- file upload ends-->
                                        <input class="form-control " id="item_id" name="item_id" type="hidden" value="@item.item_id">
                                        <input class="form-control " id="Form_Id" name="Form_Id" type="hidden" value="@item.Form_Id">
                                        
                                        <button type="submit" style="float:right" class="btn btn-success" >Upload</button>
                                        
                                    </td>
                                }

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

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Apr 10, 2020 06:40 AM
Report

Hi nabilabolo,

I have created a sample. Refer the sample and modify your code acordingly.

Database

For this example i have use a table named Files whose schema is defined as follows.

You can download the database table SQL by clicking the download link below.

Download SQL file

Model

public class ItemModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Path { get; set; }
    public HttpPostedFileBase file { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        using (FileEntities db = new FileEntities())
        {
            var query1 = (from a in db.Files
                            select new ItemModel
                            {
                                Id = a.FileId,
                                Name = a.Name,
                                Path = a.Path
                            }).ToList();
            ViewBag.listInfo = query1;
            ViewBag.displayCountA = query1.Count();
            return View(new ItemModel());
        }
    }

    public ActionResult ImageProven(ItemModel model)
    {
        FileEntities db = new FileEntities();
        if (model != null)
        {
            var addImage = db.Files.Where(z => z.FileId == model.Id).FirstOrDefault();
            if (model.file != null)
            {
                var allowedExtensions = new[] { ".Jpg", ".png", ".jpg", "jpeg", ".pptx" };

                var fileName = Path.GetFileName(model.file.FileName); //getting only file name
                var ext = Path.GetExtension(model.file.FileName); //getting the extension(ex-.jpg)
                if (allowedExtensions.Contains(ext)) //check what type of extension
                {
                    string name = Path.GetFileNameWithoutExtension(fileName); //getting file name without extension 
                    string myfile = name + ext;
                    // store the file inside ~/project folder(Img)
                    var path = Path.Combine(Server.MapPath("~/Uploads/"), myfile);
                    model.file.SaveAs(path);
                    addImage.Path = "~/Uploads/" + myfile;
                    if (String.IsNullOrEmpty(addImage.Path))
                    {
                        addImage.Path = "~/Uploads/";
                    }
                }
                else
                {
                    ViewBag.message = "Please choose only Image file or Email File";
                    return View();
                }
            }

            db.SaveChanges();
        }
        return RedirectToAction("Index", "Home");
    }
}

View

@model Upload_Image_Table_Row_MVC.Models.ItemModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <table id="datatable" class="table table-striped table-bordered dataTable" cellspacing="0" role="grid" aria-describedby="datatable_info" style="width: 100%; float:left">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Path</th>
                <th>Action Taken</th>
            </tr>
        </thead>
        <tbody>
            @if (ViewBag.listInfo != null)
            {
                foreach (var item in ViewBag.listInfo)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.Name</td>
                        <td>
                            @if (item.Path != null)
                            {
                                if (item.Path.EndsWith("."))
                                {
                                    <a href="@Url.Content(item.Path)" target="_blank"><img src="~/logo_email.jpg" height="50" width="53" /></a>
                                }
                                else
                                {
                                    <img src="@Url.Content(item.Path)" height="100" width="100" />
                                }
                            }
                        </td>
                        <td data-name="attachment" id="auditeeAttach">
                            @using (Html.BeginForm("ImageProven", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data", id = "file1", name = "file1" }))
                            {
                                <!-- file upload start-->
                                <div>
                                    <label class="custom-file-upload form-control">
                                        <i class="fa fa-cloud-upload"></i>
                                        <input name="file" type="file" id="file" required>
                                    </label>
                                </div>
                                <!-- file upload ends-->
                                <input class="form-control " id="hfId" name="id" type="hidden" value="@item.Id">
                                <button type="submit" style="float:right" class="btn btn-success">Upload</button>
                            }
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
</body>
</html>

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

Upload and save Image based on id in HTML Table in ASP.Net MVC

Company

Explore

Follow us

Contact Us