CoffeeBlitz's avatar

Dropzone.js in a form with many input fields

I watched Jeffery use dropzone.js in one of his tutorial videos but the examples he gives only have the single dropzone and no other fields https://laracasts.com/series/build-project-flyer-with-me/episodes/11

I have a form with many many fields and I can't work with the images submitted with the dropzone at all. The dropzone is styled nicely and I can put images in but it doesn't seem to pass anything to the controller.

Here is most of the important code

submit.blade.php

<form method="post" enctype="multipart/form-data">
                     <div class="form-group">
                        <label for="additional_info" class="col-lg-12 control-label">Add Photos to Attract Lender Interest</label>
                        <div class="col-lg-12">
                            <div class="dropzone" id="myId" name="test_images" style="text-align: center"></div>
                        </div>
                    </div>
</form>

app.blade.php - imports javascript at the end of the webpage

@stack('after-scripts')
  @include('includes.partials.ga')
  @include('includes.partials.gaddress')
  @include('includes.partials.datepicker')
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
  <script> var myDropzone = new Dropzone("div#myId", { url: "/submit-mortgage"});</script>
 <script type="text/javascript">

  Dropzone.options.myId =
   {
      maxFilesize: 12,
      renameFile: function(file) {
          var dt = new Date();
          var time = dt.getTime();
         return time+file.name;
      },
      acceptedFiles: ".jpeg,.jpg,.png,.gif",
      addRemoveLinks: true,
      timeout: 5000,
      success: function(file, response) 
      {
          console.log(response);
      },
      error: function(file, response)
      {
         return false;
      }
};

</script>

MortgageController.php

public function storeMortgage(MortgageFormRequest $request)
    {
        //I just want to dd the path to the images and their names for now
        if ($request->hasFile('image')) {
            $file = $request->file('image');
            $name = $mortgage['address'].'_'.$file->getClientOriginalName();
            $file->move(storage_path() . '/app/public/images/properties', $name);
             dd(storage_path() . '/app/public/images/properties', $name);
           }
        }
0 likes
3 replies
realrandyallen's avatar

If you give your form a class of dropzone and an action and give it an id of myId then dropzone will take care of everything and you can get rid var myDropzone altogether and then your options should also take effect:

<form method="post" action="/submit-mortgage" enctype="multipart/form-data" class="dropzone" id="myId">

Make sure to delete the div that currently has the id of myId as well

CoffeeBlitz's avatar

@REALRANDYALLEN - Hi Randy, that works but then it turns my entire form into a dropzone. I have over 20 fields like "name" "address" etc in the form as well.

I just want the dropzone to be contained at the bottom of my form.

Please or to participate in this conversation.