Question

Im trying to store an category object in my db and upload an image that i can refer to this category,

The category is stored perfectly but the image is not being uploaded for some reason. When i debug i can see that my application never enters the method that stores the file on the server because my file is “Null”.

model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace SkyLearn.Areas.Categories.Models
{
    public class Category
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public string Icon { get; set; }
        public string Description { get; set; }
    }

    public class CategoryDBContext : DbContext
    {
        public DbSet<Category> categories { get; set; }
    }
}

controller:

//
// POST: /Categories/Category/Create
[Authorize(Roles = "administrator")]
[HttpPost]
public ActionResult Create(Category category, HttpPostedFileBase Icon)
{
    if (Icon != null && Icon.ContentLength > 0)
    {
        // extract only the filename
        var fileName = Path.GetFileName(Icon.FileName);
        // store the file inside ~/App_Data/uploads folder
        var path = Path.Combine(Server.MapPath("../Content/icons/"), fileName);
        Icon.SaveAs(path);
        category.Icon = fileName;
    }

    if (ModelState.IsValid)
    {
        db.categories.Add(category);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }

    return View(category);
}

view:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.master" Inherits="System.Web.Mvc.ViewPage<SkyLearn.Areas.Categories.Models.Category>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Create</h2>

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>

<% using (Html.BeginForm()) { %>
<form action="" method="post" enctype="multipart/form-data">
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>Category</legend>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Title) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Title) %>
            <%: Html.ValidationMessageFor(model => model.Title) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Icon) %>
        </div>
        <div class="editor-field">
            <input type="file" name="icon" id="icon"/>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Description) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Description) %>
            <%: Html.ValidationMessageFor(model => model.Description) %>
        </div>

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

<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>

</asp:Content>

anybody who can tell me why it wont enter the method that saves the file id be grateful.

i tried looking through the other answers here on stackoverflow and even though some of them had the same problem as me their solutions didnt solve mine.

i also tried changing the upload size etc in my config.web.

please help me 🙂

Answer 1

I don’t know how browsers would treat a nested form, but there’s no point in using Html.BeginForm() and then writing out a form tag manually. Html.BeginForm() has an overload to output Html attributes:

Html.BeginForm(action, controller, 
    FormMethod.Post, new { enctype="multipart/form-data" })