CODEWITHSUNDEEP
phplaraveldropzone
Jose Mhlanga
Jose Mhlanga

Reputation: 855

Multiple Image Upload Dropzone with Laravel returns null

Here is my form and JavaScript code. When I hit the submit button, the email field has a value but the file field does not have a value. Please help!

<form action="{{ route('projects.store') }}" class="dropzone" method="post">

  {{ csrf_field() }}
  <div class="form-group {{ $errors->has('email') ? 'has-error': '' }}">
    <input type="text" name="email" placeholder="Enter email" class="form-control"><br>
    @if($errors->has('email'))
      <span class="help-block">
        {{ $errors->first('email') }}
      </span>
    @endif
  </div>

  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>

  <input type="submit" name="" class="btn btn-danger" value="Submit" id="uploadfiles">
</form>

<script type="text/javascript">

  Dropzone.autoDiscover = false;

  var myDropzone = new Dropzone(".dropzone", 
  { 
    autoProcessQueue: false,
    parallelUploads: 10 // Number of files process at a time (default 2)
  });

  $('#uploadfiles').click(function()
  {
    myDropzone.processQueue();
 });
</script>

Here is my form and JavaScript code. When I hit the submit button, the email field has a value but the file field does not have a value. Please help!.Here is my controller method

public function store(Request $request)
    {
        $this->validate($request, [
            'email' => 'required',
        ]);

        $email = $request->email;
        $file = $request->file('file');
        if($request->hasFile('file'))
        {
            dd('exist');
        }
        else
        {
            dd('no file');
        }

        exit();

        foreach($request->file('file') as $file)
        {
            $file_name = $file->getClientOriginalName();
            $file->move('/uploads', $file_name);
            dd('uploaded');
        }
    }

Upvotes: 0

Views: 1070

Answers (2)

Riyaz
Riyaz

Reputation: 19

Had similar issue when I tried to upload from vue. I resolved this by appending file to formdata as file[] on client side:

//var files is the actual input containing array of images uploaded
for (let i=0; i<files.length;i++){
  formdata.append('file[]', files[i]);
}

this.$axios.post(`api/files`, formdata, {
  headers: { "Content-type": "multipart/form-data"},
}).then((response) => {});

And then followed this on server side:

if ($files=$request->file('file')){
  foreach($files as $f){
    $path = $f->store('FileStorage', ['disk' => 'public']);
  }
// return 'success';
}

Upvotes: 0

sh1hab
sh1hab

Reputation: 671

You have to add enctype="multipart/form-data" in your form tag for file upload.

Also to get multiple files in your controller you have to change file name to file[] like this.

<input name="file[]" type="file" multiple />

Upvotes: 2

Related Questions