Ajax Form with Upload

[Colin Wright]

Hi,

I have a .net core submission form with an upload that works at the moment,  the form submits successfully, and the files are transferred to S3. Is it possible to convert this form to ajax submission and display the loader whilst the form and uploads are processing before I return my success message?

[Mihaela]

Hello Colin,

Indeed, you could submit the Form data along with the uploaded files through an AJAX request and use the kendo.ui.progress() method to render a loader while processing the data as follows:

 

<form id="exampleForm" asp-controller="Home" asp-action="FileUpload" method="post">
            <p>Upload files</p>
            @(Html.Kendo().Upload()
                .Name("files")
            )
            <!-- other Form inputs -->
            <input type="submit" value="Save"/>
</form>

<script>
    $(function () {
        $('#exampleForm').submit(function (event) { //Handle the "submit" event of the form and prevent its default action
            event.preventDefault();
            kendo.ui.progress($("#exampleForm"), true); //Show the loading indicator
            uploadFormData();
        });
    });
        function uploadFormData() {
            var formData = new FormData(); //Use the FormData interface (https://developer.mozilla.org/en-US/docs/Web/API/FormData)
            var upload = $("#files").data("kendoUpload"), //Get a reference of the Upload component
                totalFiles = upload.getFiles(); //Retrieves the currently selected files

            for (var i = 0; i < totalFiles.length; i++) { //Loop through the files and store 
                var file = totalFiles[i].rawFile;
                formData.append("files", file);  //Append the property "rawFile" that holds the actual file to the FormData
            }
            formData.append('FirstName', $("#FirstName").val()); //Append the rest of the form inputs

            $.ajax({ //AJAX request
                type: "POST",
                url:  '@Url.Action("FileUpload", "ControllerName")',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("RequestVerificationToken",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (response) {
                    console.log("success");
                     kendo.ui.progress($("#exampleForm"), false); //Hide the loading indicator when the data is submitted successfully
                },
                error: function (response) {
                    ...
                }
             });
        }
    </script>

//Controller
[HttpPost]
public IActionResult FileUpload(List<IFormFile> files)
{
  ...
}

Attached you can find a demo project that demonstrates this example (.NET 6, ASP.NET Core MVC application).

Let m know if the suggested approach applies to your case.

 

Regards, Mihaela Progress Telerik