0

I have a working modal window that saves an entity to the database, my question is how to send files from the modal?

Here as my current JavaScript function:

$('#btn-save').on('click', function () {
    $.ajax({
        url: '@Url.Action("CreateModal", "Suggestions")',
        type: 'POST',
        data: $('#modal-form').serialize(),
        success: function (data) {
            if (data.success == true) {
                $('#suggestion-modal').modal('hide');
                location.reload(true);
            } else {
                $('.modal-content').html(data);
                $('#suggestion-modal').modal('show');
            }
        }
    });
});

This part does not send data, but works fine when not using modal and using standard MVC Create template:

<form id="modal-form" method="post" enctype="multipart/form-data">
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.UserId)

    <div>
        @Html.LabelFor(model => model.Title)
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title, "")
    </div>
    <div>
        @Html.LabelFor(model => model.Images, "Images")
        <input type="file" name="upload" multiple />
    </div>
    <div>
        <input id="btn-save" type="button" value="" />
    </div>

</form>

I've left the rest of the partial view out as that all works correctly.

EDIT: Just added where my button was in the form. It was there, I just removed much of the code not relevant to the question - should have left the button in. Also added extra model properties - These must be sent with the file, including validation token.

EDIT: Many thanks to Jasen. I've included the JavaScript below for anyone else struggling with this.

$('#btn-save').on('click', function () {

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

    $.ajax({
        url: '@Url.Action("CreateModal", "Suggestions")',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formData,
        success: function (data) {
            if (data.success == true) {
                $('#suggestion-modal').modal('hide');
                location.reload(true);
            } else {
                $('.modal-content').html(data);
                $('#suggestion-modal').modal('show');
            }
        }
    });
});
Dom
  • 83
  • 7
  • You can't send files through AJAX like that. See https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload. – Jasen Jul 19 '17 at 19:46
  • I have tried the FormData approach and had real problems with: @Html.AntiForgeryToken() – Dom Jul 19 '17 at 20:26
  • You'll need to pass the hidden AntiForgeryToken value manually, as with all AJAX request using that feature. – Jasen Jul 19 '17 at 20:30
  • I have seen many examples of how to send a file but nothing that explains how to send a file + form.serialize() - how do you combine these parts? – Dom Jul 19 '17 at 20:31
  • How do I send this manually? This is basically my question - how to send files plus other form data. – Dom Jul 19 '17 at 20:36
  • Here's an example of data + file https://stackoverflow.com/a/29293681/2030565 – Jasen Jul 19 '17 at 20:45
  • THANK YOU!! - The key part was `var formData = new FormData($('form').get(0));` - This sends everything. I wish I'd found that several hours ago! One line of code! Thanks again. – Dom Jul 19 '17 at 21:02
  • Possible duplicate of [how to append whole set of model to formdata and obtain it in MVC](https://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc) (As OP said that solved their problem in above comments.) – River Jul 23 '17 at 16:18

0 Answers0