Laravel 5.4 - Drag & Drop nicht funktioniert

Question

Ich habe ein Formular mit einem Eingabedatei Feld als:

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

Skripte

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

Dies macht eine Drag-and-Drop-Form, die wie so aussieht:

Die Formularfelder können sehen ein wenig anders, da ich den entsprechenden Code nur gebucht.

Mein Problem ist, wenn ich ziehen ziehen Sie die Datei, ihre Vorschau erscheint im mittleren Vorschaufenster, aber wenn ich mit der nächsten Seite fortfahren, wird das Feld nicht angezeigt. Ich habe sogar versucht, $request()->all(), aber keine Werte für die Dateieingabe zu tun.

Aber wenn ich manuell eine Datei auswählen und senden, wird angezeigt. Ich habe auch enctype="multipart/form-data" hinzugefügt, aber immer noch keinen Erfolg. Wenn es hilft, benutze ich this Vorlage. Der Eingabebereich für benutzerdefinierte Dateien ist das, was ich sehe. Ich habe auch alle relevanten .css und .js Dateien importiert.

Bitte helfen Sie mir. Vielen Dank.

Answer 1

Ich gehe davon aus, dass diese Drag and Drop eine Art Ajax aus feuert. Schau dir den Netzwerk-Tab der Entwickler-Tools (f12) an, um zu sehen, ob etwas ausgelöst wird, wenn du das Bild loslässt.

Wenn dies der Fall ist, klicken Sie darauf und überprüfen Sie die Antwort Registerkarte, Es könnte versuchen, Ihnen zu sagen, was das Problem ist. Wenn ich raten müsste, würde ich sagen, dass Sie keine Schreibrechte für den Ordner aktiviert haben.