Kendo Upload file is sending null in the controller when i send other values as parameters

Question

This is the situation: I have a form that when i click in the submit button is sending a file with the kendo upload control, and the method action of the controller is receiving that file in the parameter with the HttpPostedFileBase.

This is my HTML code:

@using (Html.BeginForm("ConfirmarOposicion", "Gestion", FormMethod.Post, new { @id = "Frm-login", role = "form", @class = "form-horizontal" }))
{
    @(Html.Kendo().Upload()
        .Name("files")
    )

    <button class="btn btn-success" type="submit" id="confirm" >Confirm</button>
}

And this is my controller:

public async Task<ActionResult> ConfirmarOposicion(IEnumerable<HttpPostedFileBase> files)
{
    // Here the parameter files is not null..
}

Here is working all good till now. The problem is when i try to send more values as parameter into the same method of the controller. The other values that i want to send is an array, and the other is a number. This two values i try to send with ajax in javaScript.

This is my javaScript code when i try to send those two more values:

$("#confirm").click(function () {
        var numMarca = $("#numMarca").val()
        var idsToSend = [];
        var grid = $("#Grid2").data("kendoGrid")
        var ds = grid.dataSource.view();
        for (var i = 0; i < ds.length; i++) {
            var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
            var checkbox = $(row).find(".checkbox");
            if (checkbox.is(":checked")) {
                idsToSend.push(ds[i].DescMarca);
                idsToSend.push(ds[i].IntencionOposicion = 1);
            } else {
                idsToSend.push(ds[i].DescMarca);
            }
        }

        $.ajax({
            url: '@Url.Action("ConfirmarOposicion", "Gestion")',
            data: { ids: idsToSend, marca: numMarca },
            type: 'POST',
            dataType: "json",
            success: function (data) {

            }
        });

When i clik the submit button is sending this two values in the same controller that i send the input file.

And this my controller now:

public async Task<ActionResult> ConfirmarOposicion(IEnumerable<HttpPostedFileBase> files, string[] ids, string marca)
{
    // here the array ids and the value of marca is not null, but the parameter files it is null

}

And that's the issue that i have. I need to send all those values in the same method action of the controller. How can i do that?

So you mean to say after you added the other parameters you are not receiving the files any more? — Rajshekar Reddy, Nov 21 '16 at 12:34

score 2 · Answer 1 · edited May 23 '17 at 12:24

2

Problem: Is with this line of code data: { ids: idsToSend, marca: numMarca }, You are manually building a data object with only two parameters, And not handling the uploaded files, So the file data is lost.

Solution: Build a FormData object and then stuff in all the required data into it including your uploaded files and send this object to server.

var formData = new FormData();
var file_data = $('#files')[0].files; // for multiple files if only single file use $('#files')[0].files[0] and skip the loop.
for(var i = 0;i<file_data.length;i++){
    formData.append("file_"+i, file_data[i]);
}    
formData.append('ids', idsToSend);
formData.append('marca', numMarca );

$.ajax({
    url: '@Url.Action("ConfirmarOposicion", "Gestion")',
    data: formData ,  // pass the formData object to server.
    type: 'POST',
    processData: false,
    contentType: false,
    dataType: "json",
    success: function (data) {

    }
 });

Note: $('#files') fetches your file control, the .Name("files") in kendo syntax sets the id of the file control to files.

Edit: I added processData: false, and contentType: false, into the ajax options. Credits to this answer

Setting processData to false lets you prevent jQuery from automatically transforming the data into a query string. See the docs for more info.

Setting the contentType to false is imperative, since otherwise jQuery will set it incorrectly.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 21 '16 at 13:29

Rajshekar Reddy

18,647
3
40
59

Now the files is not null anymore and the marca too, but now the array ids is null in the controller. I put an alert(idsToSend) and the array isn't null there, only when i receive as parameter in the controller. – Juan José Nov 21 '16 at 14:18
Try by replacing this `JSON.stringify(idsToSend)` in place of `idsToSend` and let me know the result – Rajshekar Reddy Nov 21 '16 at 14:20
you mean like this? formData.append('ids', JSON.stringify(idsToSend)); It still sending null. I don't know if the parameter of the method has to be like this: public async Task ConfirmarOposicion(IEnumerable files, int numMarca, string[] ids) {...}. What am i doing wrong? – Juan José Nov 21 '16 at 14:32
hmmm not sure how about having `List`. But the `string[]` must work too – Rajshekar Reddy Nov 21 '16 at 15:17
I added processData: false and contentType: false and it still sending null the array in the controller. – Juan José Nov 22 '16 at 16:52

Michael Goldshmidt · Answer 2 · 2022-02-02T18:39:06.073

Use rawFile to get the actual file being uploaded. In my case, onUpload gets triggered for every file

// JavaScript
function setupUpload() {
    // this example, I use filetemplate to prompt the user for file attributes
    $("#fileOrderDocuments").kendoUpload({
        async: {
            saveUrl: "/Order/ValidateUploadDocuments",
            autoUpload: false
        },
        template: kendo.template($('#fileTemplate').html()),
        multiple: true,
        upload: onUpload,
        validation: {
            allowedExtensions: [".pdf"],
            maxFileSize: 25194304
        },
        success: onSuccess,
        select: onSelect
    });
}

function onSelect() {

}

function onSuccess(data) {
// triggered after each file is uploaded
}

    function onUpload(e) {
    // expect exactly 1 file since async upload will be triggered for each file
        if (!e.files || e.files.length != 1) return;
    
        var formData = new FormData();
        formData.append("files", e.files[0].rawFile);  // use rawFile to access file
        formData.append("orderId", orderId);
    
        $.ajax({
            url: "/Order/UploadDocuments",
            data: formData,
            type: 'POST',
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    };
    
    // .Net Core Controller - Order Actions
    [HttpPost]
    public ActionResult UploadDocuments(IEnumerable<IFormFile> files, int orderId)
            {
                if (files != null && orderId > 0)
                {
                    foreach (var file in files)
                    {
    _documentService.SaveDocument(file, orderId);
                    }
                }
    
                return Json(Ok);
            }

// Kendo template in cshtml Razor page to customize file upload

<script id="fileTemplate" type="text/x-kendo-template">
    <div class="row m-0">
        <span class='k-progress'></span>
    </div>
    <div class="row m-0 w-100">
        <div class="col-1 p-0">
            <span class="k-file-extension-wrapper top-0">
                <span class="k-file-extension">pdf</span>
                <span class="k-file-state"></span>
            </span>
        </div>
        <div class="col-5">
            <span class="k-file-name-size-wrapper">
                <span class="k-file-name">#=name#</span>
                <span class="k-file-size">#=size# bytes</span>
            </span>
        </div>
        <div class="col-5">
            <span id="selectOrderType">
                <div>Select Document Type:</div>
                <div>
                    <select class="js-doc-type">
                        <option value="1">Unsigned Document</option>
                        <option value="2">Signed Document</option>
                    </select>
                </div>
            </span>
        </div>
        <div class="col-1 p-0">
            <strong class="k-upload-status float-right">
                <button type="button" class="k-button k-upload-action" aria-label="Remove">
                    <span class="k-icon k-i-close k-i-x" title="Remove"></span>
                </button>
            </strong>
        </div>
    </div>
</script>

Kendo Upload file is sending null in the controller when i send other values as parameters

2 Answers2