How fill data from getFiles() to JavaScript FormData() object?

[Paw]

Doing it this way:

var uploadFile = $("#documents-files").data("kendoUpload");

var file2 = uploadFile.getFiles();

formData.append('files2',file2[0]);

$.ajax({ url: 'foo.php', type: 'POST', data: formData, async: false, cache: false, contentType: false, enctype: 'multipart/form-data', processData: false, success: function (response) { console.log(response); } });

 

And in PHP server var_dump($_POST) :

array(1) {["files2"]=>string(15) "[object Object]"}

 

And $_FILES is empty.

 

 

If I send file in standard way, WITHOUT KendoUpload widget 

 var files = document.getElementById('documents-files');
 var file = files.files[0];

it works, superglobal $_FILES is filled with file data.

[Dimitar]

Hello Paw,

In order for $_FILES variable to be successfully populated on the server, just retrieve the Kendo UI Upload instance and append the rawFile of the current selection to the FormData. This is needed, as the rawFile porperty holds the actual file data:

<script>
    $("#submitForm").on("click", function(e) {
        e.preventDefault();

        // Append the desired file
        var formData = new FormData();
        var upload = $("#files").getKendoUpload();
        var files = upload.getFiles();
        formData.append('files', files[0].rawFile);

        // Send the request
        $.ajax({
            url: 'index.php?type=save',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (response) {
                console.log(response);
            }
        });
    });
</script>

Regards,
Dimitar
Progress Telerik

[kumara]

Hi Admin,

Your solution worked for me, I have been struggling for couple of days.. Your post saved me... Thank you

Regards,

Kumar