No file is uploaded when I try to upload a photo in MVC4

Question

In fact, I'm new in MVC and I've started to make a news page. In this page title, body and its photo route of news are stored in the DB, but photos will be saved in a server folder. So I've created a model for DB:

public class NewsEntry
    {
        public int Id { get; set; }

        [Required(ErrorMessage = "Please enter a suitable title for your news")]
        public string title { get; set; }

        [Required(ErrorMessage = "Please enter the body news")]
        public string body { get; set; }

        public string image { get; set; }
        public DateTime dateAdded { get; set; }
    }

And another model for photo:

 public class UploadImageViewModel
    {
        public string Photo { get; set; }
        public HttpPostedFileBase PhotoUpload { get; set; }
    }

After that, I made an action in my controller like this:

private UploadImageViewModel model = new UploadImageViewModel();

[HttpPost]
        public ActionResult Create(NewsEntry entry)
        {
            string uploadPath = "~/images/NewsImages";

            var file = model.PhotoUpload;

            if (model.PhotoUpload.ContentLength > 0)
            {
                var fileName = Path.GetFileName(model.PhotoUpload.FileName);
                var path = Path.Combine(Server.MapPath(uploadPath), fileName);
                model.PhotoUpload.SaveAs(path);
                model.Photo = uploadPath + fileName;
                entry.image = model.Photo;
            }

            var profile = AutoMapper.Mapper.Map<NewsEntry>(model);

            var validTypes = new[] { "image/jpeg", "image/pjpeg", "image/png", "image/gif" };
            if (!validTypes.Contains(model.PhotoUpload.ContentType))
            {
                ModelState.AddModelError("Photo Upload", "Please Upload either a JPG, GIF, or PNG image.");
            }

            if (ModelState.IsValid)
            {
                entry.dateAdded = DateTime.Now;
                _db.Entries.Add(entry);
                _db.SaveChanges();
            }

            return RedirectToAction("Index");
        }

and finally added a view for this action:

@Html.ValidationSummary()

        @using(Html.BeginForm()) {
            <p>Please enter your news title: </p>
            @Html.TextBox("title")

        <br /><br />

        <p>Please enter your news body: </p>
            @Html.TextArea("body",new{rows=10,cols=45})

        <br /><br />

        <p>Please enter the source of your news: </p>
            @Html.TextBox("Source")

        <br /><br />

            <div class="editor-field">
                <label for="PhotoUpload">Upload an image for your news </label>
                @Html.TextBox("PhotoUpload", null, new { type="file" })
            </div>

        <br /><br />

        <input type="submit" value="Submit the news" >
        }

However, there is no replied photo and also there is a problem with AutoMapper. What should I do? I will be grateful if anyone can solve my problem.

This looks like a similar solution. http://stackoverflow.com/questions/16255882/how-to-upload-image-display-image-in-asp-net-mvc-4 — Jason Foglia, Nov 05 '13 at 19:55

score 1 · Accepted Answer · edited May 23 '17 at 12:07

i think ur problem is

  @using(Html.BeginForm())

which is a common mistake in guys whom are new in uploading file(photo or image) in MVC applications so just simply replace the mentioned line with this one:

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, 
                        new { enctype = "multipart/form-data" }))

and , here is some references ,that I'm sure will be help for you:

No file is uploaded when I try to upload a photo in MVC4

1 Answers1