I want to upload a file while adding data in the DevExtreme DataGrid. However, instead of the file being uploaded separately, I want it to be processed along with the data when I click the “Save” button and call the insertion method. I’m using Html.DevExtreme().FileUploader() and when I set UploadMode(FileUploadMode.Instantly) and specify the UploadUrl, the file goes to the backend. But I want this to happen when I press the “Save” button with the form. So I’m using UploadMode(FileUploadMode.UseForm), but it’s not working as I want.

<div class="row">
<div class="col-lg-12">
    @(
        Html.DevExtreme().DataGrid<ServiceCatalog>()
            .ShowBorders(true)
            .SearchPanel(x => x.Visible(true).SearchVisibleColumnsOnly(true))
            .HeaderFilter(f => f.Visible(true))
            .FilterRow(f => f.Visible(true))
            .DataSource(d => d.WebApi().Controller("Service").Key("Id")
            .LoadAction("ServiceCatalogData")
            .InsertAction("InsertServiceCatalog")
            .UpdateAction("UpdateServiceCatalog")
            .DeleteAction("DeleteServiceCatalog"))
            .DataSourceOptions(o => o.Filter("['StatusId','=',1]"))
            .Editing(e =>
            {
                e.UseIcons(true);
                e.EditColumnName("Action");
                e.Mode(GridEditMode.Popup);
                e.AllowAdding(allowInsert);
                e.AllowDeleting(allowDelete);
                e.AllowUpdating(allowUpdate);
        })
        .Columns(c =>
        {
            c.Add().Type(GridCommandColumnType.Buttons).Width(110).Buttons(b =>
            {
                b.Add().Name(GridColumnButtonName.Edit);
                b.Add().Name(GridColumnButtonName.Delete);
            });
            c.AddFor(x => x.Id).Caption("Id").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).FormItem(f => f.Visible(false)).AllowSearch(true);
            c.AddFor(x => x.Name).Caption("Servis Adı").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).AllowSearch(true);
            c.AddFor(x => x.Description).Caption("Açıklama").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).AllowSearch(true);

            c.AddFor(x => x.ImagePath).Caption("Resim").FormItem(f => f.Template(@<text>
                @(Html.DevExtreme().FileUploader()
                .ID("fileUploader")
                .Name("ImagePath")
                .Multiple(false)
                .Accept("image/*")
                .UploadMode(FileUploadMode.UseForm)
                .UploadUrl(Url.Action("InsertServiceCatalog","Service"))
                )
            </text>));

            c.AddFor(x => x.DevUrl).Caption("Dev Url").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).AllowSearch(true);
            c.AddFor(x => x.TestUrl).Caption("Test Url").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).AllowSearch(true);
            c.AddFor(x => x.UatUrl).Caption("Uat Url").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).AllowSearch(true);
            c.AddFor(x => x.ProdUrl).Caption("Prod Url").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).AllowSearch(true);
            c.AddFor(x => x.StatusId).Caption("StatusId").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).FormItem(f => f.Visible(false)).AllowSearch(true);
            c.AddFor(x => x.CreatedDate).Caption("Eklenme Tarihi").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).FormItem(f => f.Visible(false)).AllowSearch(true);
            c.AddFor(x => x.CreatedUserId).Caption("Ekleyen Kişi").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).FormItem(f => f.Visible(false)).AllowSearch(true);
            c.AddFor(x => x.ModifiedDate).Caption("Güncelleme Tarihi").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).FormItem(f => f.Visible(false)).AllowSearch(true);
            c.AddFor(x => x.ModifiedUserId).Caption("Güncelleyen Kişi").AllowFiltering(true).AllowSorting(true).AllowGrouping(true).FormItem(f => f.Visible(false)).AllowSearch(true);
        })
    )
</div>