This is a migrated thread and some comments may be shown as answers.

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

2 Answers 2658 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Paw
Top achievements
Rank 1
Paw asked on 23 Jul 2018, 09:04 AM

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.

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 25 Jul 2018, 08:41 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
kumara
Top achievements
Rank 1
answered on 26 Nov 2020, 06:42 AM

Hi Admin,

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

Regards,

Kumar

Tags
Upload
Asked by
Paw
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
kumara
Top achievements
Rank 1
Share this question
or