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

3 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. Dimitar
    Admin
    Dimitar avatar
    807 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.
  3. kumara
    kumara avatar
    1 posts
    Member since:
    Jun 2020

    Posted 26 Nov 2020 in reply to Dimitar Link to this post

    Hi Admin,

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

    Regards,

    Kumar

Back to Top