Passing a form to the controller Laravel and Dropzone

I want a user to submit the form which has price, name and image to the controller and then save it to the database. I use dropzone for images but I'm stuck, when I click submit button on console Network(request)shows like this pro_name: women clothes pro_price: 500 document[]: twitter.png _token: 43fker9ASMq0vUwzH3MWrYR4hCb4BxCuarS0AtcP

but on response it shows {"error":["Please enter product image ."]} . How can I pass the form data including images to the controller and save it to the database?

Controller

 public function store(Request $request)
{
 $formInput=$request->except('filename');

$product = product::create(array_merge($formInput, [
    'user_id' => Auth::user()->id
]));
foreach ($request->input('document', []) as $photo) {
    $filename = $photo->store('public/photos');
    ProductsPhoto::create([
        'product_id' => $product->id,
        'filename' => $filename
    ]);
  }
}

Blade file

   //The form

<div class="panel-body">
 <form>
  @csrf
 <input type="hidden" value="" id="token"/>
  <label for="pro_name">Name</label>
  <input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

   <label for="pro_price">Price</label>
   <input type="text" class="form-control" name="pro_price" id="pro_price" placeholder="Enter price">

   <label for="photos">Choose 5 Images</label>
   <div class="needsclick dropzone" id="document-dropzone">  // Display images preview

 </div>

 <input type="submit" class="btn btn-primary" value="Submit" id="btn"/>

</div>

Script

   var token = $("#token").val();
    $(document).ready(function(){
        $("#btn").click(function(){
            $("#loading").show();
            var url = '';
            var form = $('form')[0]; 
            var formData = new FormData(form);
            formData.append('_token', token); // adding token
            $.ajax({
                url: url,
                data: formData, 
                type: 'POST',
                cache: false,
                contentType: false, 
                processData: false, 
                success:function(data){
                if($.isEmptyObject(data.error)){
                $("#msg").html("Product has been added successfull");
                $("#msg").fadeOut(3000);
                 window.location.href =  "<?php echo url('seller/product') ?>";
                 $("#loading").hide();
                 }
                 else{

                        printErrorMsg(data.error);

                        }
                }
            });
            function printErrorMsg (msg) {
            $("#loading").hide();
            $(".print-error-msg").find("ul").html('');
            $(".print-error-msg").css('display','block');
            $.each( msg, function( key, value ) {
                $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
            });
            }
        });

    });


   //Dropzone
 var uploadedDocumentMap = {}
 Dropzone.options.documentDropzone = {
    url: '',
    maxFilesize: 10, // MB
    addRemoveLinks: true,
    headers: {
        'X-CSRF-TOKEN': ''
    },
    success: function (file, response) {
        console.log(file);
        console.log(response);
        $('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
    },
    removedfile: function (file) {
        file.previewElement.remove()
        var name = ''
        if (typeof file.file_name !== 'undefined') {
            name = file.file_name
        } else {
            name = uploadedDocumentMap[file.name]
        }
        $('form').find('input[name="document[]"][value="' + name + '"]').remove()
    },
    init: function () {
    }
 }

via Chebli Mohamed