laravel 5.4 - drag drop nie działa

Question

Mam formularz z polem pliku wejściowego jako:

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()); 
    } 
} 

skrypty

<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> 

To świadczy przeciągnij i upuść formularz, który wygląda tak:

Pola formie może wyglądać nieco inaczej, ponieważ ja tylko pisał odpowiedni kod.

Moim problemem jest to, kiedy przeciągnij upuść plik, jego podgląd pojawi się w oknie podglądu średniej, ale kiedy przejść do następnej strony, pole nie jest widoczne. Próbowałem nawet wykonać $request()->all(), ale nie ma wartości dla wprowadzenia pliku.

Ale gdy ręcznie zaznaczam plik i przesyłam, pokazuje się. Dodałem także enctype="multipart/form-data", ale wciąż nie udało się.

Jeśli to nie pomaga, używam this szablonu. Niestandardowa sekcja wprowadzania plików jest tym, na co patrzę. Zaimportowałem również wszystkie istotne pliki .css i .js.

Proszę, pomóż mi. Dzięki.

Answer 1

Jestem zakładając, to przeciągnij i upuść odpala jakąś Ajax off. Spróbuj przejrzeć kartę sieci narzędzi deweloperskich (f12), aby sprawdzić, czy po upuszczeniu obrazu coś się wyłączy.

Jeśli tak, kliknij na nim i sprawdzić kartę odpowiedzi, to może być stara się powiedzieć, na czym polega problem. Gdybym miał zgadywać, powiedziałbym, że nie włączyłeś uprawnień do zapisu w tym folderze.