uploading image with ajax MVC

Question

I'm having issue creating new object into my database when I'm trying to include image within it.

My model:

    public Dog()

    {

    public int Id { get; set; }
    public string Name { get; set; }
    public string DogImageUrl { get; set; }

    }

my HTML code:

 @if (User.Identity.IsAuthenticated)
    {
          <h7>New Dog</h7>
            <input id="dogName" type="text" placeholder="dog name" />

                <input type="file" name="file" style="width: 100%;" />

                <input id="createNewDog" type="button" value="Go" />


            </div>
        </div>
    }

My Ajax post code: $('#addNewDog').click(function (e) {

         var imgToUpload = $("input[name=file]").get(0).files[0];
         var data = {
                "Name": $('#dogName').val(),
                "DogImageUrl ": "nullForNow",


            };
            var url = "@Url.Action("NewDog", "Home")";
            $.ajax({
                url: url,
                data: { model: data, file: Request.File[imgToUpload] },
                cache: false,
                type: "POST",
                contentType: "multipart/form-data",
                processData: false,
                success: function (respone) {
                    alert(respone);
                    location.reload();
                },
                error: function (reponse) {
                    alert(reponse);
                }
            });
            e.stopPropagation();
        });

my controller:

 public ActionResult NewDog(Dog model, HttpPostedFileBase file)
    {


        using (var contex = new DogContext())
        {
            if (User.Identity.IsAuthenticated)
            {

                if (file != null)
                {
                    try
                    {
                        if (file.ContentType == "image/jpeg")
                        {
                            if (file.ContentLength < 500000)
                            {
                                string pic = System.IO.Path.GetFileName(file.FileName);
                                string path = System.IO.Path.Combine(
                                                       Server.MapPath("~/Content/GroupImages"), pic);
                                // file is uploaded
                                file.SaveAs(path);
                                model.DogImageUrl = path;
                            }
                        }
                    }
                    catch (Exception ex)
                    {
                        return Content(ex.ToString());
                    }
                }

                contex.Dogs.Add(model);
                contex.SaveChanges();
            }
        }

My img always comes null.. I searched all over the internet and didn't figure it out. the goal is to save the PATH to my image in my database.

Answer 1

First you define your model

public class DogUpload
{
    public int Id { get; set; }
    public string Name { get; set; }
    public HttpPostedFileBase Image { get; set; }
}

Then your action

[HttpPost]
public ActionResult Upload(DogUpload model)
{
    var image = model.Image;
    var name = model.Name;
    var fileName = image.FileName;

    var path = Server.MapPath("~/Content/GroupImages" + fileName);
    image.SaveAs(path);

    // create valid url to dog image
    // create Dog and save to database
    var dog = dbContext.Dogs.FirstOrDefault(d => d.Id == model.Id);
    if (dog == null)
    {
       dog = new Dog
       {
           Name = model.Name,
           DogImageUrl = url
       };
       ...
    }

    return Json(new { message = "Created", id = dog.Id, name = dog.Name, url = dog.DogImageUrl });
}

Your view

@using(Html.BeginForm("Upload", "Dog", FormMethod.Post,
       new { id="dogForm", enctype="multipart/form-data" })
{
    <input type="file" name="Image" />
    <input type="text" name="Name" />
    <button type="submit">Submit</button>
}

The AJAX

$("#dogForm").on("submit", function(e) {
    e.preventDefault();

    var form = $(this);
    var formData = new FormData(form.get(0));

    $.ajax({
        url: form.attr("action"),
        method: form.attr("method"),
        data: formData,
        processData: false,
        contentType: false
    })
    .then(function(result) {
        console.log(result);
    });
});