Appended files to FormData not received at Laravel server

Question

I'm facing a strange issue ... I've a form with multiple fields .. on form submit, I append multiple image files to form data and submit it like this:

            $('#newEntry').on('submit', function(e){
                e.preventDefault();
                const formData = new FormData(e.target);

                formData.delete('images[]');

                for (var i = 0; i < filesToUpload.length; i++) {
                    formData.append('images[]', filesToUpload[i].file, filesToUpload[i].file.name);
                }
                $(this)[0].submit();
            });

and when I try to echo(count($request->images)) at Laravel server it echos 0 .. and on dd($request) .. I see empty files array

but when I submit same form with same files directly from input field instead of appending data to it like this:

<input type="file" name="images[]">

I receive all files at server.

Files are successfully appended to formData .. I've checked it by:

                var formKeys    = formData.keys();
                var formEntries = formData.entries();

                do {
                  console.log(formEntries.next().value);
                } while (!formKeys.next().done)

I've also tried to send same appended files through AJAX and it worked perfectly fine:

             $('#newEntry').on('submit', function(e){
                e.preventDefault();
                const formData = new FormData(e.target);

                formData.delete('images[]');

                for (var i = 0; i < filesToUpload.length; i++) {
                    formData.append('images[]', filesToUpload[i].file, filesToUpload[i].file.name);
                }

                $.ajax({
                    url: actionURL,
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: "POST",
                    success: function (data) {
                        alert("DONE");
                    },
                    error: function (data) {
                        alert("ERROR - " + data.responseText);
                    }
                });
             });

on digging down deeper .. I've found that when I submit a form via Http request an Error with code 500 Internal Server Error appears in console for a moment (just before page reloads)

tried everything but don't know what is causing this strange behavior .. kindly help me sort it out

did you try this https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — Chamara Abeysekara, Apr 05 '19 at 05:06
I can't find anything in laravel logs, apache logs or php error logs .. where to find this error? — Muhammad Shuja, Apr 05 '19 at 09:27
@ChamaraAbeysekara your provided link solves the AJAX issue. In my case, AJAX is working correctly, I'm having issues with normal Http Request — Muhammad Shuja, Apr 05 '19 at 09:31
I did you mean normal form submit? check whether you have `enctype="multipart/form-data"` in your form tag — Chamara Abeysekara, Apr 06 '19 at 08:25

score 0 · Answer 1 · answered Apr 05 '19 at 12:32

You can check the network tab of your browser(Preferably Chrome) to compare the request parameters that you send to the server.

If the request is too fast that you can't capture it, try placing debugger;(Or click on the in front of the line of code in the source tab) into your Javascript code to stop the execution of the code right before it reload. Then you can inspect the current state of your Javascript and also the 500 response that you received.

Appended files to FormData not received at Laravel server

1 Answers1