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

2 posts, 0 answers
  1. Paw
    Paw avatar
    1 posts
    Member since:
    Jul 2018

    Posted 23 Jul 2018 Link to this post

    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.
  3. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 25 Jul 2018 Link to this post

    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.
Back to Top