Laravel and Dropzone - How to get files in server side

Question

I'm trying to use dropzone in laravel project but I can't get the files in server side.

My blade html code:

{!! Form::open(['id' => 'create-intervention-form', 'url' => '/create-intervention', 'method' => 'post', 'class' => '']) !!}
   <div id="multimedia" class="data new dropzone">

   </div>
   <div class="btn-new-bottom">
      <a href="#new-intervention">Criar Intervenção</a>
   </div>
{!! Form::close() !!}

In jquery I put this code:

$("div#multimedia").dropzone({
          url: "/create-intervention",
          paramName: "file", // The name that will be used to transfer the file
          maxFilesize: 1024,
          autoProcessQueue: false
        });

To submit the form I have a jquery function to submit. In controller I try to get $files[] = Input::file('file'); but this return null.

Controller:

public function store(Request $request)
    {
      $rules = array(
      );

      // do the validation ----------------------------------
      // validate against the inputs from our form
      $validator = Validator::make(Input::all(), $rules);

      // check if the validator failed -----------------------
      if ($validator->fails())
      {

          // get the error messages from the validator
          $messages = $validator->messages();

          return redirect()->back()->withErrors($validator)->withInput();
      }
      else
      {
        $files[] = Input::file('file');

        var_dump($files);
      }
};

How can I do this? I want to use dropzone to upload multiple files but just when I submit the form. In controller I have to save each file in directory and file name in database.

Thank you

Foraminifer

Can you post more of your code in the controller? – Tunnage

@JoseRojas I update the question with controller code. I'm just trying to receive the the files to handle but the var_dump returns null. – Foraminifer

On your form try adding enctype="multipart/form-data". – Killam

returns me this error: Invalid argument supplied for foreach() @WildBeard – Foraminifer

Answer 1

You can try to get the files thought Request too in a loop:

Controller:

public function store(Request $request)
{
  $rules = array();

  // do the validation ----------------------------------
  // validate against the inputs from our form
  $validator = Validator::make(Input::all(), $rules);

  // check if the validator failed -----------------------
  if ($validator->fails())
  {
      // get the error messages from the validator
      $messages = $validator->messages();

      return redirect()->back()->withErrors($validator)->withInput();
  }
  else
  {
    foreach( $request->file('file') as $file ){        

            $filename = $file->store('file');
            #saves the file
            $array_images_names[] = $filename;
    }

    var_dump($files);
  }
};

JavaScript (allowing to accept multiple files)

    var post_url_images = $('#post_url_images').val(); 
    Dropzone.options.frm_drop_images = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 1024,
    // The configuration we've talked about above
    url: post_url_images,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        // First change the button to actually tell Dropzone to process the queue.
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
        });

        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
        // of the sending event because uploadMultiple is set to true.
        this.on("sendingmultiple", function() {
        // Gets triggered when the form is actually being sent.
        // Hide the success button or the complete form.
        });
        this.on("successmultiple", function(files, response) {
        // Gets triggered when the files have successfully been sent.
        // Redirect user or notify of success.
        });
        this.on("errormultiple", function(files, response) {
        // Gets triggered when there was an error sending the files.
        // Maybe show form again, and notify user of error
        });
    }

  };

Try to use your HTML form as below:

<div class="dropzone dropzone-previews" id="frm_drop_images" class="dropzone" method="post" action="{{ url('/admin/products/upload/image') }}"></div>
<!-- hiddent field to set where to post the images -->
<input type="hidden" name="post_url_images" id="post_url_images" value="{{ url('/create-intervention') }}" >
<div class="btn-new-bottom">
<a href="#new-intervention">Criar Intervenção (Não precisa usar este botão)</a>
</div>

Pyriform

Don't work! I have to add the input in html or the dropzone id add automatically? @hutuh – Foraminifer

Hi @Foraminifer I think I found a different problem that might fix your code, try to just change your HTML form to the one above. I'm using like this in my code and it works, when you use as a normal form <form> it doesn't work. – Pyriform

If I add a input to test and add a file I receive that in controller. But with dropzone doesn't work. So the problem is just with dropzone @hutuh – Foraminifer

I understand, so I changed the HTML code and JavaScript if you do exactly as I posted it should work. Can you try? @Foraminifer – Pyriform

How can I change that to use the anchor tag? I need that because I have a function that submit the form when I click in anchor! @hutuh – Foraminifer

Answer 2

Add to your form open method 'files' => true

documentation

Ecotype

In controller returns me this Invalid argument supplied for foreach(). is like doesn't recognize the $request->file('file') @devnullΨ – Foraminifer

try to dump $request->all() before it reaches the loop, and show the us the result – Agranulocytosis

Don't print nothing about file! @devnullΨ – Foraminifer

I guess that means it doesn't send the file. did you add 'files' => true and did you check the html source code if it has enctype="multipart/form-data" in your form tag? – Agranulocytosis

yes! The problem could be in submit button, because I use anchor tag. @devnullΨ – Foraminifer

does it show any data when you dump your request inputs? – Agranulocytosis