Uploading multiple images with captions (and other attributes if necessary) using AJAX in MVC 5

Question

I am trying to create my own light CMS to use in my site but I am having trouble with AJAX uploading multiple images and values associated with them to a controller. Here is my code. I have a newsitem:

public class NewsItem
{
        public NewsItem()
        ...
        public List<NewsItemImage> Images { get; set; }
        ...
}

And an image item:

public class NewsItemImage
{
    public int ID { get; set; }
    [Required]
    public string ImageName { get; set; }
    [Required]
    public byte[] Image { get; set; }
    public string Caption { get; set; }
    [Required]
    public string ImageMimeType { get; set; }
    public NewsItem NewsItem { get; set; }
    public int NewsItemID { get; set; }        
    public bool IsDefaultImage { get; set; }
}

Now, I want to be able to upload images, captions, etc, and associate them to a news item. The association part is fine (I tried it when I was just uploading images without any extra information. But my model is not working). This is the HTML:

<form id="uploader">
                <label>Choose images to upload</label>
                <table class="table table-striped">
                    <tr><th>File</th><th>Caption</th><th>Is Default</th></tr>
                    <tr>
                        <td>
                            <input id="fileInput" type="file" name="image" style="margin:10px">
                        </td>
                        <td>
                            <input type="text" name="caption" class="form-control" />
                        </td>
                        <td>
                            <input type="radio" name="isDefault" />
                        </td>
                    </tr>
                </table>
                <div style="text-align:center">
                    <button type="submit" class="btn btn-primary" style="margin:10px">Upload</button>
                </div>
</form>

(I have only included one table row, but would like to possibly have multiple)

This is the AJAX bit:

$("#uploader").submit(function (e) {
            e.preventDefault();

            $.ajax(
                {
                    url: "/Admin/News/UploadImages",
                    type: 'POST',
                    data: $("#uploader").serialize(),
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        $('#ajaxUpdate').html(data);
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                }
            );

And here is my controller:

[HttpPost]
public PartialViewResult UploadImages(ImageViewModel[] images)
{
   ...
}

And finally here is my ViewModel for that controller:

public class ImageViewModel
{
        public byte[] Image { get; set; }
        public string Caption { get; set; }
        public bool IsDefault { get; set; }
}

Apologies for the long code - as is, I am having two problems: ImageViewModel[] images get a null entry in the controller. File is not being sent over at all with ajax.serialize.

Any idea on how to fix this or tell me of a better alternate approach would be very helpful. Thanks !

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

You are missing enctype attribute on your form. So the form will like below:

<form id="uploader" enctype='multipart/form-data' >
            ...
            // your code 
</form>

You can read more about the enctype here.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 01 '14 at 21:59

Yogiraj

1,952
17
29

It was way more than that, but thank you for pointing that out as well :). I have solved my problem and I will post the full answer when I manage to fully debug it. Thanks though. – Evangelos Aktoudianakis Jun 01 '14 at 22:37
@EvangelosAktoudianakis can you post your answer – Chhatrapati Sharma Oct 03 '15 at 06:16

Uploading multiple images with captions (and other attributes if necessary) using AJAX in MVC 5

1 Answers1