Dropzone.js, Laravel and multiple file upload issue

Question

I am attempting to create a multiple file upload with Dropzone.js and Laravel.

Blade view:


                    
                        Dropzone.js jQuery File Upload like look
                    
                    
                        
                            
                                
                                        
                                            
                                            Aggiungi files
                                        
                                    
                                    
                                
                            
                            
                                
                                    
                                        
                                    
                                
                            
                        
                        
                            
                                
                                    
                                
                                
                                    
                                        
                                        ()

Dropzone.js setup:

// DropzoneJS Demo Code Start
            Dropzone.autoDiscover = false;

            // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
            var previewNode = document.querySelector("#template");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);

            var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
                url: "{{ route('back.images.store') }}", // Set the url
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                thumbnailWidth: 80,
                thumbnailHeight: 80,
                parallelUploads: 20,
                previewTemplate: previewTemplate,
                acceptedFiles: "image/*",
                autoQueue: false, // Make sure the files aren't queued until manually added
                previewsContainer: "#previews", // Define the container to display the previews
                clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
            });

            myDropzone.on("addedfile", function(file) {
                // Hookup the start button
                file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
            });

            // Update the total progress bar
            myDropzone.on("totaluploadprogress", function(progress) {
                document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
            });

            myDropzone.on("sending", function(file) {
                // Show the total progress bar when upload starts
                document.querySelector("#total-progress").style.opacity = "1";
                // And disable the start button
                file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
            });

            // Hide the total progress bar when nothing's uploading anymore
            myDropzone.on("queuecomplete", function(progress) {
                document.querySelector("#total-progress").style.opacity = "0";
                Toast.fire({
                    icon: 'success',
                    title: 'Upload terminato.',
                    didDestroy: (toast) => {
                        window.location.reload();
                    }
                });
            });

            // Setup the buttons for all transfers
            // The "add files" button doesn't need to be setup because the config
            // `clickable` has already been specified.
            document.querySelector("#actions .start").onclick = function() {
                myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
            };
            document.querySelector("#actions .cancel").onclick = function() {
                myDropzone.removeAllFiles(true);
            };
            // DropzoneJS Demo Code End

Store ethod in Laravel resource:

public function store(Request $request)
    {
        $image = $request->file('file');

        $imgName = \Carbon\Carbon::now()->timestamp.'.'.$image->getClientOriginalExtension();

        $image->move(public_path('/assets/front/images/galleries/'),$imgName);

        $imgUpload = new Image;

        $imgUpload->img = $imgName;

        $imgUpload->save();

        return response()->json(["status" => "success"]);
    }

When I try to upload multiple files together, the operation seems to finish correctly but only the last image is loaded in the upload folder and as many images as there are uploaded are saved in the database but with the name of the highest of the series (the one moved to the upload folder ). Do you have any suggestions? If I try a dd ($ request-> file ('file')) in the console I find an answer with the file data for each file I try to upload.

Dropzone.js, Laravel and multiple file upload issue

0 Answers