Product upload with Dropzone and Laravel

Question

I want to upload a product with multiple images using Dropzone, I have a form which has other fields like price, name etc. I have seen other tutorials but they only upload images not images with other fields(price, name) at once. I have set the Dropzone which shows the preview but if I submit the button I get a validation Please enter product image. How can I pass images to the controller using Dropzone?

Controller

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

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

Blade

//The form

 <div class="panel-body">
   <form>
    @csrf
     <input type="hidden" value="{{csrf_token()}}" 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>

Ajax

   //This is how I submit the form
   <script>

    var token = $("#token").val();
    $(document).ready(function(){
        $("#btn").click(function (e) {
            e.preventDefault();
            $("#loading").show();
            var url = '{{ route('product.store') }}';
            var form = $('form')[0]; // You need to use standard javascript object here
            var formData = new FormData(form);
            formData.append('_token', token); // adding token
            $.ajax({
                url: url,
                data: formData, //just that without variables
                type: 'POST',
                cache: false,
                contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                processData: false, // NEEDED, DON'T OMIT THIS
                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>');
            });
            }
        });

    });

    var uploadedDocumentMap = {}
Dropzone.options.documentDropzone = {
  url: '{{ route('product.store') }}',
  maxFilesize: 10, // MB
  addRemoveLinks: true,
  headers: {
    'X-CSRF-TOKEN': "{{ csrf_token() }}"
  },
  success: function (file, response) {
    $('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
    uploadedDocumentMap[file.name] = response.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 () {
    @if(isset($project) && $project->document)
      var files =
        {!! json_encode($project->document) !!}
      for (var i in files) {
        var file = files[i]
        this.options.addedfile.call(this, file)
        file.previewElement.classList.add('dz-complete')
        $('form').append('<input type="hidden" name="document[]"  value="' + file.file_name + '">')
      }
    @endif
  }
  }
</script>

Answer 1

Some things are not right in your code AND your concept (at least in my opinion):

1. You need to prevent the default behavior of the #btn because you need to intercept the form submission. Otherwise, the form will just get submitted as a GET request (what is the default behavior).

$("#btn").click(function (e) {
  e.preventDefault();
  // ...
}

2. The <form> element is not closed. Furthermore, don't override the _ token in your JavaScript but just add @csrf to the form. Larvel and jQuery will handle everything for you.

<form>
  @csrf

3. I think I understood what you were trying to achieve now. Dropzone is uploading (= POST request) the files directly, so you need a separate route (or another code branch) to handle the file upload. Then, you can get the filename of the previously uploaded file and attach it as a hidden input field like so:

success: function (file, response) {
  $('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
},

What you will receive in your controller's method is the pro_name, pro_price and an array document containing the names of the uploaded files. Following your logic, the file must be already existing in the storage because it was uploaded by the Dropzone action. You could then save the filename to the database or whatever and use it as a reference for accessing the file later. Anyway, I would not recommend to use the client-provided filename for storage because it may not be unique. Laravel offers a lot of helpful tools for this scenario: https://laravel.com/docs/5.7/filesystem#file-uploads