Dropzone.js always auto uploads files. Can't set options on dropzone #id - Laravel - Voyager - Dropzone.js

Question

i want to create a dropzone in my web application for uploading images and manipulate them with ImageMagick. My dropzone always auto uploads all Images and show an "opject Object" Error on the previews of the images in the dropzone. The upload on the server works, but i want to add Dropzone.options.myAwesomeDropzone to my dropzone to upload the images when i submit a button because i also want to send data from a form while uploading.

Heres how i implemented it in the view:

$    <div class="dropzone" id="my-awesome-dropzone">

The .js in the view (otherwise it doesn't work)

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>

<script type="text/javascript">
    var baseUrl = "{{ url('/') }}";
    var token = "{{ csrf_token() }}";
    var myDropzone = new Dropzone("div#my-awesome-dropzone", {
        url: baseUrl + "/upload",
        params: {
            _token: token
        }
    });

My Controller:

public function upload()
    {
        $input = Input::all();

        $rules = array(
            'file' => 'image|max:3000',
        );

        $validation = Validator::make($input, $rules);

        if ($validation->fails()) {
            return Response::make($validation->errors->first(), 400);
        }

        $destinationPath = 'uploads'; // upload path
        $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
        $fileName = rand(11111, 99999) . '.' . $extension; // renameing image
        $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

        if ($upload_success) {
            return Response::json('success', 200);
        } else {
            return Response::json('error', 400);
        }


}

I hope someone can help, i was searching though the internet for hours but couldn't find something that fixes my problem. There are hundreds of solution which work for everyone but me....

Best regards

Answer 1

If you take a look at the docs of dropzone, it says that in configuration you have to set the prop autoProcessQueue to false and then call myDropzone.processQueue()

So try something with the looks of this:

var myDropzone;
var token = "{{ csrf_token() }}";
var baseUrl = "{{ url('/') }}";
$(document).ready(function(){
      myDropzone = new Dropzone("div#my-awesome-dropzone", {
      url: baseUrl + "/upload",
      params: {
         _token: token
         // other fields, here you can also pass a function and have the function return the fields
         name: $("#name").val()
      },
      autoProcessQueue:false,
   });
})

$("#yourButtonId",function(e){
   e.preventDefault();
   myDropzone.processQueue();
});