Laravel 5.4 - drag drop not working

Question

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="{{url('user/profileAction')}}">
    {{csrf_field()}}

     <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="{{$user->avatar}}">
             </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());
    }
}

scripts

<script type="text/javascript">
        jQuery(function ($) {

            function show() {
                @if(!empty($user->avatar))
                    $('.restore-group').show('fast');
                @endif
            }

            function populate() {
                @if(!empty($user->avatar))
                    avatar.ace_file_input('show_file_list', [
                    {type: 'image', name: '{{decrypt($user->avatar)}}', path: '{{url('file/avatar/small')}}'}
                ]);
                @endif
            }

            var avatar = $('#avatar');

            avatar.ace_file_input({
                style: 'well',
                btn_change: null,
                droppable: true,
                thumbnail: 'small',
                btn_choose: "Drop images here or click to choose",
                no_icon: "ace-icon fa fa-picture-o",
                allowExt: ["jpeg", "jpg", "png", "gif", "bmp"],
                allowMime: ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"],
                show_file_list: ['file.png'],
                before_remove: function () {
                    show();
                    $('#_action').val('removed');
                    return true;
                },
                before_change: function () {
                    show();
                    $('#_action').val('changed');
                    return true;
                }
            }).on('change', function(){
                console.log($(this).data('ace_input_files'));
                //console.log($(this).data('ace_input_method'));
            });

            populate();
         });
 </script>

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.

Answer 1

I'm assuming, this drag and drop fires some sort of Ajax off. Try watching the network tab of dev tools (f12) see if when you drop the image something gets fired off.

If it does, click on it and check the response tab, It might be trying to tell you what the issue is. If I had to guess I'd say you haven't enabled write permissions on the folder.