Telerik ASP.Net Core Upload Asynchronous Mode Fallback

[Danang]

Hi, I'm referring to the article below:

https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/upload/modes-of-operation#asynchronous-mode-fallback

In the article Asynchronous Mode Fallback is When Upload which is placed inside a form and configured for asynchronous operation.

I have done this, however after uploading some file (and failed since I didn't implement the controller) the form post still doesn't contain any Files.

Is there a specific to implement a fallback mechanism? a sample will be very helpful.

 

 

[Ivaylo]

Hello Danang,

Thank you for the details provided.

I have assembled a proof-of-concept sample application that processes the uploaded files of the component via a raw asynchronous call. This would be required in order to intercept the form submission and re-supplement the files that have been stored via the Save handler of the Upload:

<script>
    $("form").submit(function (e) {
        debugger;

        e.preventDefault(e);
        var formData = new FormData(); // 1. Create a new FormData instance.
        var upload = $("#files").getKendoUpload(); // 2. Obtain the Upload widget incarnation's object reference.
        var files = upload.getFiles(); // 3. Gather the uploaded files.

        var serializedArray = $("#myForm").serializeArray(); // 4. Serialize the form data in to key-value pairs.

        for (var i = 0; i < serializedArray.length; i++) { // 5. Traverse through each of the key-value pairs.
            var key = serializedArray[i]['name'];
            var value = serializedArray[i]['value'];
            formData.append(key, value); // 6. Append current key-value pair to the newly created Form Data from step 1.
        }

        for (var i = 0; i < files.length; i++) { // 7. Iterate through each of the uploaded and append them to the Form data.
            let file = files[i].rawFile;
            formData.append("files", file);
        }

        $.ajax( // 8. Make an asynchronous request by posting the form data.
            {
                url: "@Url.Action("Index", "Home")",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                type: "POST",
                success: function (data) {
                    alert("Files Uploaded!");
                }
            }
        );
        console.log(formData);
    })
</script>

This will ensure that the files are part of the request payload once the form submission has been instantiated:

I am attaching the sample application here. Please let me know if this is the desired result.

I hope this information was helpful, and I look forward to your reply.

Regards,
Ivaylo
Progress Telerik

[Danang]

Thanks Ivaylo,

Your sample code really helped.

Regards.

[Ivaylo]

Hi Danang,

I am glad that everything is working as intended.

Feel free to reach out if there are further questions or concerns.