Unable to send array of uploaded files to controller in Laravel

user_13237098 0
Viewed 399

I have a contact form that let user allow to upload multiple files. I'm sending all the files to my controller using ajax approach with formData. I want to get all the uploaded files into my controller from where I can process the files.

When I do dd(); it returns null.

Blade

<form method="POST"  enctype="multipart/form-data")}}">

       <div id="dropzoneLover"   class="dropzone"></div>

      <input type="file" class="form-control" name="documents[]" multiple/>

</form>

Javascript

    <script>
    Dropzone.autoDiscover = false;

    $("#dropzoneLover").dropzone({
        url: "{{route('form_for_car_lovers')}}",
        autoProcessQueue: false,
        uploadMultiple: true,

        init: function() {
            dzClosure = this; 

            document.getElementById("submit-all").addEventListener("click", 
        function(e) {
                e.preventDefault();
                e.stopPropagation();
                dzClosure.processQueue();
            }),

                this.on("sendingmultiple", function(data, xhr, formData) {
                    formData.append("_token", "{{ csrf_token() }}");
                    $('input[name="documents[]"]').each(function (index, member) 
                    {
                        var getDocs = $(member).val();
                        formData.append('documents[]', getDocs);
                  });

                }),

        }
    });

    
    </script>

Controller

public function myfiles()
{
        $test =  $request['documents'];
        $test1 =  $request->documents;
        $test2 =  $request->file('documents');

        dd($test,$test1,$test2); // All variables returns null
}
laravel multipartform-data php jquery javascript
2 Answers

You just need to append the actual file object in your formData like this below:

jQuery (this code is tested and works perfectly)

Dropzone.autoDiscover = false;

$("#dropzoneLover").dropzone({
    url: "upload.php",
    previewsContainer: ".dropzone-previews",
    autoProcessQueue: false,
    uploadMultiple:true,
    init: function() {
        var myDropzone = this;
        //Click
        document.getElementById("submit-all").addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });
        //On sending
        myDropzone.on("sending", function(file, xhr, formData) { 
            formData.append("_token", "{{ csrf_token() }}");
            var getDocuments = $('input[name="documents[]"]')[0].files
            $.each(getDocuments, function(index, file) {
                formData.append('documents[]', file);
            });
            //All the other formData goes below this

        });
    }
});

In your laravel controller

var_dump($request->file('documents'))
user_136690480

Here is another alternative approach.

I replaced my code

   $('input[name="documents[]"]').each(function (index, member) 
     {
       var getDocs = $(member).val();
       formData.append('documents[]', getDocs);
    });

with this

 var getDocuments = document.getElementById('documents').files.length;
     for (var x = 0; x < getDocuments; x++) {
        formData.append("documents[]", 
        document.getElementById('documents').files[x]);
   }

Fetch and Split the array of values into Controller like this

$docs =  $request->documents;
    foreach ($docs as $doc) {
        $docname = $doc->getClientOriginalName();
        $docNames[] = $docname; // Store all Images into array
        $getuploadedImages = collect($docNames)->implode(',');

    }
  dd($getuploadedImages);
user_132370980
Related