Serialize file input for AJAX call to controller

Question

I'm having some issues serializing file inputs to pass via ajax to a MVC controller. I have a form that a user can upload one or more images. I want to then pass those image to a controller via ajax. The issue seems to be with the data value. I'm getting the following error in the console window:

Uncaught ReferenceError: ImageUploads is not defined

Here is my code:

@using (Html.BeginForm("CreateGallery", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="ImageUploads"  id="upload-button" multiple="multiple" />
    <button type="button" class="btn btn-default" id="create-thumbnails">Submit</button>
}


<script>
    $(document).ready(function () {
        $("#create-thumbnails").click(function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("DisplayThumbnails", "User")',
                dataType: 'json',
                data: ImageUploads,
                success: function (data) {
                    alert(data);
                },
                error: function (ex) {
                    alert("error!");
                }
            });
        })
    });
</script>

Where is `ImageUploads` defined? See [Upload multiple image using AJAX, PHP and jQuery](http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/29109577) — guest271314, Feb 09 '17 at 01:24
You have not declared `ImageUploads` anywhere. But this will never work anyway - in order to upload files using ajax, you need to use `FormData` and set the correct ajax options. Refer [how to append whole set of model to formdata and obtain it in MVC](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Feb 09 '17 at 01:35

Serialize file input for AJAX call to controller

0 Answers0