Unobtrusive AJAX, Uploading files and Modals not working - Modal is not getting closed when submited

Question

I am working on ASP.NET Core project and in modal I have a form where I need to upload a file. I am also using unobtrusive AJAX to submit the form. At first I was not able to upload the file, so I fave found this solution:

Upload is null after adding jquery.unobtrusive-ajax.js reference

I have added data-ext="true" in the form. My form is in modal and the modal is showing when I click a button:

<form asp-area="@Areas.ObserverArea" asp-controller="@WebControllers.BrandController" asp-action="@ObserverActions.SaveBrand" enctype="multipart/form-data" method="POST" data-ext="true" data-ajax-begin="ajaxValidation" data-ajax-method="POST" data-ajax-mode="replace-with" data-ajax-update="#brandList" id="submit-form">

And the file is being uploaded, brand is created, etc, everything on the back-end is working fine, however the modal is not closing even if I click the close button, so in order to "remove" the modal I need to refresh the page. I have a few other places where unobtrusive AJAX and modals are working just fine - this is happening only I'm uploading file.

EDIT 1:

Here is the whole code of the modal:

<div class="modal" id="addBrand">
<form asp-area="@Areas.ObserverArea" asp-controller="@WebControllers.BrandController" asp-action="@ObserverActions.SaveBrand" enctype="multipart/form-data" method="POST" data-ajax="true" data-ajax-begin="ajaxValidation" data-ajax-method="POST" data-ajax-mode="replace-with" data-ajax-update="#brandList" id="submit-form">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title float-left">Add New Brand</h4>
                <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close" onclick="$('#addBrand').hide()">
                    <span aria-hidden="true" class="float-right">×</span>
                </button>

            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="BrandName">Brand Name</label>
                    <input required class="form-control" placeholder="Enter Brand Name" name="BrandName" type="text">
                </div>
                <div class="form-group">
                    <label for="KPBrandId">Kinesis Brand Id</label>
                    <input required class="form-control" placeholder="Enter Kinesis Brand Id" name="KinesisBrandId" type="text">
                </div>
                <div class="form-group">
                    <label for="file">Brand Logo</label>
                    <input type="file" name="file">
                    <input type="hidden" name="test" value="33test" />
                </div>
            </div>
            <div class="modal-footer">
                @Html.HiddenFor(x => x.CategoryId)
                <button type="button" class="btn btn-default btn-flat pull-right btn-margin-5" onclick="$('#addBrand').hide()" data-dismiss="modal">Close</button>
                <button type="submit" id="saveButton" class="btn btn-primary btn-flat pull-right">Save</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</form>

EDIT 2: Here is the code for unobtrusive ajax, after I have modified it according to the post I have shared. In the modal right now I don't have data-ext="true", but I have tested with that as well. One thing I forgot to mention - the unobtrusive ajax library I'm using was included in the Admin LTE template I have downloaded.

(function ($) {
    var data_click = "unobtrusiveAjaxClick",
        data_target = "unobtrusiveAjaxClickTarget",
        data_validation = "unobtrusiveValidation";

    function getFunction(code, argNames) {
        var fn = window, parts = (code || "").split(".");
        while (fn && parts.length) {
            fn = fn[parts.shift()];
        }
        if (typeof (fn) === "function") {
            return fn;
        }
        argNames.push(code);
        return Function.constructor.apply(null, argNames);
    }

    function isMethodProxySafe(method) {
        return method === "GET" || method === "POST";
    }

    function asyncOnBeforeSend(xhr, method) {
        if (!isMethodProxySafe(method)) {
            xhr.setRequestHeader("X-HTTP-Method-Override", method);
        }
    }

    function asyncOnSuccess(element, data, contentType) {
        var mode;

        if (contentType.indexOf("application/x-javascript") !== -1) {  // jQuery already executes JavaScript for us
            return;
        }

        mode = (element.getAttribute("data-ajax-mode") || "").toUpperCase();
        $(element.getAttribute("data-ajax-update")).each(function (i, update) {
            var top;

            switch (mode) {
            case "BEFORE":
                top = update.firstChild;
                $("<div />").html(data).contents().each(function () {
                    update.insertBefore(this, top);
                });
                break;
            case "AFTER":
                $("<div />").html(data).contents().each(function () {
                    update.appendChild(this);
                });
                break;
            case "REPLACE-WITH":
                $(update).replaceWith(data);
                break;
            default:
                $(update).html(data);
                break;
            }
        });
    }

    function asyncRequest(element, options) {
        var confirm, loading, method, duration;

        confirm = element.getAttribute("data-ajax-confirm");
        if (confirm && !window.confirm(confirm)) {
            return;
        }

        loading = $(element.getAttribute("data-ajax-loading"));
        duration = parseInt(element.getAttribute("data-ajax-loading-duration"), 10) || 0;

        $.extend(options, {
            type: element.getAttribute("data-ajax-method") || undefined,
            url: element.getAttribute("data-ajax-url") || undefined,
            cache: !!element.getAttribute("data-ajax-cache"),
            beforeSend: function (xhr) {
                var result;
                asyncOnBeforeSend(xhr, method);
                result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments);
                if (result !== false) {
                    loading.show(duration);
                }
                return result;
            },
            complete: function () {
                loading.hide(duration);
                getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(element, arguments);
            },
            success: function (data, status, xhr) {
                asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
                getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(element, arguments);
            },
            error: function () {
                getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"]).apply(element, arguments);
            }
        });

        options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

        method = options.type.toUpperCase();
        if (options.data instanceof FormData) {
            options.processData = false;
            options.contentType = false;
            options.data.append("X-Requested-With", "XMLHttpRequest");

            if (!isMethodProxySafe(method)) {
                options.type = "POST";
                options.data.append("X-HTTP-Method-Override", method);
            }
        } else {
            options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

            if (!isMethodProxySafe(method)) {
                options.type = "POST";
                options.data.push({ name: "X-HTTP-Method-Override", value: method });
            }
        }

        $.ajax(options);
    }

    function validate(form) {
        var validationInfo = $(form).data(data_validation);
        return !validationInfo || !validationInfo.validate || validationInfo.validate();
    }

    $(document).on("click", "a[data-ajax=true]", function (evt) {
        evt.preventDefault();
        asyncRequest(this, {
            url: this.href,
            type: "GET",
            data: []
        });
    });

    $(document).on("click", "form[data-ajax=true] input[type=image]", function (evt) {
        var name = evt.target.name,
            target = $(evt.target),
            form = $(target.parents("form")[0]),
            offset = target.offset();

        form.data(data_click, [
            { name: name + ".x", value: Math.round(evt.pageX - offset.left) },
            { name: name + ".y", value: Math.round(evt.pageY - offset.top) }
        ]);

        setTimeout(function () {
            form.removeData(data_click);
        }, 0);
    });

    $(document).on("click", "form[data-ajax=true] :submit", function (evt) {
        var name = evt.currentTarget.name,
            target = $(evt.target),
            form = $(target.parents("form")[0]);

        form.data(data_click, name ? [{ name: name, value: evt.currentTarget.value }] : []);
        form.data(data_target, target);

        setTimeout(function () {
            form.removeData(data_click);
            form.removeData(data_target);
        }, 0);
    });

    $(document).on("submit", "form[data-ajax=true]", function (evt) {
        var clickInfo = $(this).data(data_click) || [],
            clickTarget = $(this).data(data_target),
            isCancel = clickTarget && clickTarget.hasClass("cancel");
        evt.preventDefault();
        if (!isCancel && !validate(this)) {
            return;
        }
        asyncRequest(this, {
            url: this.action,
            type: this.method || "GET",
            data: clickInfo.concat($(this).serializeArray())
        });
    });
    
    
    $(document).on("submit", "form[data-ext=true]", function (evt) {
        var clickInfo = $(this).data(data_click) || [],
            clickTarget = $(this).data(data_target),
            isCancel = clickTarget && clickTarget.hasClass("cancel");
        evt.preventDefault();
        if (!isCancel && !validate(this)) {
            return;
        }
        var formData;
        if (this.enctype && this.enctype === "multipart/form-data") {
            formData = new FormData(this);
        } else {
            formData = clickInfo.concat($(this).serializeArray());
        }

        asyncRequest(this, {
            url: this.action,
            type: this.method || "GET",
            data: formData
        });
    });
}(jQuery));