Laravel 5.4 - drag drop not working

I have a form with a file input field as:

profile.blade.php

<form id="profile-form" name="profile-form" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" action="">
    

     <div class="form-group">
         <div class="col-xs-12">
             <label class="col-sm-3 control-label no-padding-right" for="avatar"> Avatar </label>
             <div class="col-xs-12 col-sm-5">
                 <input type="file" id="avatar" name="avatar" value="">
             </div>
          </div>
      </div>

     <div class="clearfix form-actions">
         <div class="col-md-offset-3 col-md-9">
             <button class="btn btn-success btn-submit" type="submit">
                 <i class="ace-icon fa fa-save fa-fw bigger-110"></i> Save changes</button>    
         </div>
     </div>    
</form>

web.php

Route::post('user/profileAction', 'UserController@profileAction');

UserController.php

class UserController extends Controller
{             
    public function profileAction(Request $request)
    {
        dd($request->all());
    }
}

This renders a drag and drop form which looks like so:

The form fields may look a little different since I only posted the relevant code.

My problem is, when I drag drop the file, its preview appears in the middle preview window, but when I proceed to the next page, the field is not shown. I even tried doing $request()->all(), but no values for the file input.

But when I manually select a file, and submit, it shows. I have also added enctype="multipart/form-data", but still no success.

If it helps, I am using this template. The custom file input section is what I am looking at. I have also imported all relevant .css and .js files.

Please help me. Thanks.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2sqMv3A
via IFTTT