mercredi 5 octobre 2016

Some issues with sending form with DropzoneJS

I have a form with some input data and also dropzone in it. The form sending and successfully storing to the DB. But i have some problems.

1) Im using Laravel and i have validate method after sending the form and when i get erros (422) like the name input is required, after this i cannot submit form for the second time. How can i fix this?

2) I cant send form not choosing the images. How can i send form when i dont want to upload images?

And is there a normal solution to not append all formData to Dropzone instead sending them directly to Laravel?

DropzoneJS init:

jQuery(function () {

            Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

                // The configuration we've talked about above
                url: '',
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                addRemoveLinks: true,
                //paramName: 'image',
                //hiddenInputContainer: true,
                maxFiles: 100,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                // The setting up of the dropzone
                init: function () {
                    var myDropzone = this;

                    // First change the button to actually tell Dropzone to process the queue.

                    document.querySelector("button[type=submit]").addEventListener("click", function (e) {
                        // Make sure that the form isn't actually being sent.
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                    });

                    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                    // of the sending event because uploadMultiple is set to true.
                    this.on("sendingmultiple", function (data, xhr, formData) {

                        function fData(input_name, selector) {
                            var values = jQuery(selector)
                                    .map(function () {
                                        return jQuery(this).val();
                                    }).get();
                            for (var i = 0; i < values.length; i++) {
                                formData.append(input_name, values[i]);
                            }
                        }

                        formData.append('name', jQuery('input[name="name"]').val());
                        fData('phone[]', '.phone');
                        formData.append('work_time', jQuery('input[name="work_time"]').val());
                        formData.append('metro', jQuery('input[name="metro"]').val());
                        formData.append('country', jQuery('input[name="country"]').val());
                        formData.append('address', jQuery('input[name="address"]').val());
                        formData.append('place', jQuery('input[name="place"]').val());
                        formData.append('lat', jQuery('input[name="lat"]').val());
                        formData.append('lng', jQuery('input[name="lng"]').val());
                        fData('properties[]', '.properties:checked');
                        fData('we_accept[]', '.we_accept:checked');
                    });
                    this.on("successmultiple", function (files, response) {
                        // Gets triggered when the files have successfully been sent.
                        // Redirect user or notify of success.
                    });
                    this.on("errormultiple", function (files, response) {
                        // Gets triggered when there was an error sending the files.
                        // Maybe show form again, and notify user of error
                        console.log(response)
                    });
                }

            }

        });

In the back i have this:

public function postAddOffice(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'phone' => 'required',
            'work_time' => 'required'
        ]);

        if ($request->ajax()) {
            $images = [];
            if ($request->file) {
                foreach ($request->file as $file) {
                    $extension = $file->extension();
                    $imageName = str_random(15) . '.' . $extension;
                    $path = base_path() . '/public/uploads/admin/images/offices/';
                    $file->move($path, $imageName);
                    array_push($images, '/images/offices/' . $imageName);
                }
            }

            $office = new Office([
                'name' => $request->name,
                'phone' => $request->phone,
                'work_time' => $request->work_time,
                'metro' => $request->metro,
                'country' => $request->country,
                'address' => $request->address,
                'place' => $request->place,
                'lat' => $request->lat,
                'lng' => $request->lng,
                'properties' => $request->properties,
                'we_accept' => $request->we_accept,
                'image' => $images ? $images : '/img/no-img.png',
            ]);
            $office->save();

            return response()->json(['request' => $request->all()]);
       }

    }



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire