Multiple file upload isn't sending any data to server

Question

I want to upload multiple file upload. I have this on client side :

        $(document).on( "click", ".save-button", function () {

            var data = new FormData();
            data.append('title', $(this).parent().parent().find("#title_place").val());

            $.each($(this).parent().parent().find("input[type='file']")[0].files, function(i, file) {
                data.append('file', file);
            });

            $.ajax({type: "POST",
                url: 'save_view.php',
                data: data,
                success : viewSaveCallBack,
                cache: false,
                contentType: false,
                processData: false,
            });
        });

I checked all the data in the debuger, and it is working properly. To see this I displayed the value of

 $(this).parent().parent().find("#title_place").val()

And

$(this).parent().parent().find("input[type='file']")[0].files

Then, when I try to var_dump $_FILES or $_POST on server side, it's empty. Same thing with a debugger.

I tried also with

                data.append('files[]', file);

When I try to upload a single file (in another input, not exactly the same code), that is working fine.

The html of the input is this one :

        <input type=\"file\" multiple directory webkitdirectory allowdirs class=\"form-control input\" id=\"marzipano\">

And it is added dynamically to the DOM.

When I upload a single file, that is working fine.

It is not a duplicate of Sending multipart/formdata with jQuery.ajax since I already use a FormData object, and my code is the same as the answer. It is still not working as intended.

Is your `.save-button` actually submitting the form? This would cancel your AJAX request, if so. — Rory McCrossan, Feb 07 '18 at 14:35
@RoryMcCrossan No, and I put a breakpoint on the server side and it goes there. — Dimitri Danilov, Feb 07 '18 at 14:36
Are you sure the content type is set correctly? See http://api.jquery.com/jquery.ajax/ — DigiLive, Feb 07 '18 at 14:48
@dnFer When using a FormData object, contentType should be set to false . — Dimitri Danilov, Feb 07 '18 at 14:50
Possible duplicate of [Sending multipart/formdata with jQuery.ajax](https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — DigiLive, Feb 07 '18 at 15:07

score 0 · Answer 1 · answered Feb 07 '18 at 15:11

0

Try to do:

var files = $(this).parent().parent().find("input[type='file']")[0].files;

for(var i=0; i<files.length; i++) {
   data.append('file['+i+']', files[i]);
}

and in PHP you might get files via $_POST["file"]

answered Feb 07 '18 at 15:11

Snake Eyes

16,287
34
113
221

Still the same problem. Working for a single file tho. – Dimitri Danilov Feb 07 '18 at 15:17
What INFO you get in `$_POST`? – Snake Eyes Feb 07 '18 at 15:43

score 0 · Accepted Answer · answered Feb 07 '18 at 15:53

0

My code is working actually, problem was that post_max_size in the php.ini was too low.

answered Feb 07 '18 at 15:53

Dimitri Danilov

1,338
1
17
45

Multiple file upload isn't sending any data to server

2 Answers2