asp.net-mvcrazorfile-uploadhttppostedfilebase

Uploading Image in Asp.net mvc Controller


I have a Upload form and I want to pass my information such as an Image and some other field but I don't know how can I upload Image ..

This is My model class

public partial class NewProductCategory
    {   
        public string ProductName { get; set; }
        public string ProductDescription { get; set; }
        public string ProductPrice { get; set; }
        public string ProductImage { get; set; }
        public string ProductQuantity { get; set; }
        public Nullable<bool> ProductStatus { get; set; }
        public Nullable<int> CategoryId { get; set; }

        public HttpPostedFileBase user_image_data { get; set; }
        public virtual Category Category { get; set; }

    }

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(NewProductCategory productcategory, HttpPostedFileBase file)
        {
            if (ModelState.IsValid)
            {
                ProductCategory newproductCategory = new ProductCategory();
                string path = Path.Combine(Server.MapPath("~/Content/files"), Path.GetFileName(file.FileName));
                file.SaveAs(path);
                newproductCategory.ProductDescription = productcategory.ProductDescription;
                newproductCategory.ProductQuantity = productcategory.ProductQuantity;
                newproductCategory.ProductStatus = productcategory.ProductStatus;

                newproductCategory.CategoryId = productcategory.CategoryId;

                db.ProductCategories.Add(newproductCategory);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.CategoryId = new SelectList(db.Categories, "CategoryId", "Name", productcategory.CategoryId);
            return View(productcategory);
        }

And this is My View Code

@model MvcApplication1.Models.NewProductCategory
@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>ProductCategory</legend>
        @using (Html.BeginForm("Create", "Temp", FormMethod.Post, new { enctype = "multipart/form-data" }))

        {
        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductName)
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductDescription)
            @Html.ValidationMessageFor(model => model.ProductDescription)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductPrice)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductPrice)
            @Html.ValidationMessageFor(model => model.ProductPrice)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.user_image_data)
        </div>
        <div class="editor-label">
               @Html.Label("Upload your image")
            </div>


            <div class="editor-field">
                @Html.TextBoxFor(model => model.user_image_data, new { Type = "File" })
                @Html.ValidationMessageFor(model => model.user_image_data)
            </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductQuantity)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductQuantity)
            @Html.ValidationMessageFor(model => model.ProductQuantity)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductStatus)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductStatus)
            @Html.ValidationMessageFor(model => model.ProductStatus)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CategoryId, "Category")
        </div>
        <div class="editor-field">
            @Html.DropDownList("CategoryId", String.Empty)
            @Html.ValidationMessageFor(model => model.CategoryId)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
        }
    </fieldset>
}

please help me in controller i am getting Null value for File upload


Solution

  • Update Ansawer

    @model MvcApplication1.Models.NewProductCategory
    @{
        ViewBag.Title = "Create";
    }
    
       @using (Html.BeginForm("Create", "Temp", FormMethod.Post, new { enctype = "multipart/form-data" }))
    
        {    @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
    
    <fieldset>
        <legend>ProductCategory</legend>
            <div class="editor-label">
                @Html.LabelFor(model => model.ProductName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ProductName)
                @Html.ValidationMessageFor(model => model.ProductName)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.ProductDescription)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ProductDescription)
                @Html.ValidationMessageFor(model => model.ProductDescription)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.ProductPrice)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ProductPrice)
                @Html.ValidationMessageFor(model => model.ProductPrice)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.user_image_data)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.user_image_data, new { Type = "File" })
                @Html.ValidationMessageFor(model => model.user_image_data)
            </div>
            <div class="editor-label">
                @Html.Label("Upload your image")
            </div>
            <div class="editor-label">
                @Html.TextBox("file",null,htmlAttributes: new { Type = "file" })
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.ProductQuantity)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ProductQuantity)
                @Html.ValidationMessageFor(model => model.ProductQuantity)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.ProductStatus)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ProductStatus)
                @Html.ValidationMessageFor(model => model.ProductStatus)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.CategoryId, "Category")
            </div>
            <div class="editor-field">
                @Html.DropDownList("CategoryId", String.Empty)
                @Html.ValidationMessageFor(model => model.CategoryId)
            </div>
            <p>
                <input type="submit" value="Create" />
            </p>  
          </fieldset>
        }