1

Iam using laravel 5.4 and dropzone for uploading photos in a form.

I have a form with a lots of inputs. What i want is when the user click the submit button, uploads the photos then send all the inputs names.

My form looks like this:

<form class="form-horizontal" role="form" id="companyForm" method="post" action="{{ route('company.store') }}" enctype="multipart/form-data">
<!-- a lots of inputs fields -->
...
<label>Photos:</label>
<div class="dropzone" id="myDropzone"></div>
<button class="public" type="submit" id="companySubmit">Publish</button>
</form>

my dropzone config:

// initialize dropzone
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(
    "#myDropzone",
    {
        url: "/company",
        method: "post",
        uploadMultiple: true,
        parallelUploads: 6,
        maxFiles: 6,
        addRemoveLinks: true,
        acceptedFiles: '.jpg,.jpeg,.JPEG,.JPG,.png,.PNG',
        autoProcessQueue: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        init: function() {
            var myDropzone = this;
            $('#companyForm').on("submit", function(e) {
                if(myDropzone.files.length > 0) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                }
            });
        }
    }
);

When click the submit, the files are send but not the inputs fields.

How to send the inputs along the files????

calin24
  • 905
  • 3
  • 21
  • 43
  • 1
    Have a look over this two URLs [first](https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone) and [second](https://stackoverflow.com/questions/22218552/dropzone-with-normal-form) – Bhaumik Pandhi Jul 17 '17 at 12:46
  • i made some changes and now it send in a sinlge request all the data that i need but i have another problem...i have ` if(myDropzone.files.length > 0){ e.preventDefault(); myDropzone.processQueue(); } else{ myDropzone.uploadFiles([]); }` but the controller returns `return redirect()->route('home');` If i upload files it does not redirect, if not uploading files it redirects. Any idea why? – calin24 Jul 17 '17 at 15:19
  • not getting code in comment please add code in [kopy](https://kopy.io/) – Bhaumik Pandhi Jul 17 '17 at 15:33

1 Answers1

0

I found a solution...i don`t think is the most effecient way to do it but it works.

  1. Replace the id="companyForm" with the dropzone id in the config "myDropzone"

  2. Use a div for the dropzone preview <div id="dropzonePreview" class="dropzone">

  3. Modified the config: https://kopy.io/QYxjy

  4. The redirect was a problem (only when submited with files). The controller return redirect()->route('home'); but does not redirect the form - ONLY when submit without files; I made a fix for that: window.location.href=home; where home is a variable in the blade. -- Maybe someone have a better idea.

  5. In the controller now i get all the data in one request :)

calin24
  • 905
  • 3
  • 21
  • 43