DropzoneとLaravelを使用してアップロードするイメージを取得する

Question

私は、ユーザーがタイトルを追加してイメージをアップロードできるページを作成しようとしています.2私はdropzoneとLaravelを使用しています。 （私はそれがhttp://www.dropzonejs.com/bootstrap.html

私がいる問題は、私はJSファイルへのURLを追加する必要があるということですが、それは私にこのエラー

POST http://crud.test/portfolios 419を与え続けるように見える作られた、未知の を異なって見えますステータス）

と

私のdevのツールで私のプレビューで、私はLaravelに私がすることを知っている{メッセージ：Symfonyの\コンポーネント\ HttpKernel \例外\ HttpException "...： ""、例外"}

{{ csrf_field() }} 

私はコントローラで指定したフォルダに画像をアップロードしたり、画像をデータベースに保存することはできません。

私が望むのは、画像をフォルダにアップロードしてデータベースに保存する方法です。

マイブレード：

<form action="{{ route('portfolios.store') }}"> 
    {{ csrf_field() }} 

    <div class="form-group"> 
     <label>Title</label> 
     <input type="title" name="title" class="form-control"> 
    </div> 

    <div id="actions" class="row"> 
     <div class="col-lg-7"> 
      <span class="btn btn-success fileinput-button dz-clickable"> 
       <i class="glyphicon glyphicon-plus"></i> 
       <span>Add files...</span> 
      </span> 

      <button type="button" class="btn btn-info start"> 
       <i class="glyphicon glyphicon-upload"></i> 
       <span>Start upload</span> 
      </button> 

      <button type="reset" class="btn btn-warning cancel"> 
       <i class="glyphicon glyphicon-ban-circle"></i> 
       <span>Cancel upload</span> 
      </button> 
     </div> 

     <div class="col-lg-5"> 
      <span class="fileupload-process"> 
       <div id="total-progress" class="progress progress-striped active total-upload-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 
        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress=""></div> 
       </div> 
      </span> 
     </div> 
    </div> 

    <div class="table table-striped files" id="previews"> 
     <div id="template" class="file-row dz-image-preview"> 
      <div> 
       <span class="preview"> 
        <img data-dz-thumbnail /> 
       </span> 
      </div> 

      <div> 
       <p class="name" data-dz-name></p> 
       <strong class="error text-danger" data-dz-errormessage></strong> 
      </div> 

      <div> 
       <p class="size" data-dz-size></p> 
       <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 
        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> 
       </div> 
      </div> 

      <div> 
       <button class="btn btn-info start"> 
        <i class="glyphicon glyphicon-upload"></i> 
        <span>Start</span> 
       </button> 

       <button data-dz-remove class="btn btn-warning cancel"> 
        <i class="glyphicon glyphicon-ban-circle"></i> 
        <span>Cancel</span> 
       </button> 

       <button data-dz-remove class="btn btn-danger delete"> 
        <i class="glyphicon glyphicon-trash"></i> 
        <span>Delete</span> 
       </button> 
      </div> 
     </div> 
    </div> 

    <button type="submit" class="btn btn-primary">Submit</button> 
</form> 

マイmain.js：

var previewNode = document.querySelector("#template"); 
previewNode.id = ""; 
var previewTemplate = previewNode.parentNode.innerHTML; 
previewNode.parentNode.removeChild(previewNode); 

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone 
    url: "/portfolios", // Set the url 
    thumbnailWidth: 80, 
    thumbnailHeight: 80, 
    parallelUploads: 20, 
    previewTemplate: previewTemplate, 
    autoQueue: false, // Make sure the files aren't queued until manually added 
    uploadMultiple: true, 
    previewsContainer: "#previews", // Define the container to display the previews 
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files. 
}); 

myDropzone.on("addedfile", function(file) { 
    file.previewElement.querySelector(".start").onclick = function() { 
     myDropzone.enqueueFile(file); 
    }; 
}); 

myDropzone.on("totaluploadprogress", function(progress) { 
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%"; 
}); 

myDropzone.on("sending", function(file) { 
    document.querySelector("#total-progress").style.opacity = "1"; 
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); 
}); 

myDropzone.on("queuecomplete", function(progress) { 
    document.querySelector("#total-progress").style.opacity = "0"; 
}); 

document.querySelector("#actions .start").onclick = function() { 
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); 
}; 

document.querySelector("#actions .cancel").onclick = function() { 
    myDropzone.removeAllFiles(true); 
}; 

マイコントローラ：

public function store(Request $request) 
{ 
    $portfolio = new Portfolio(); 

    $portfolio->fill($this->getSafeInput($request)); 

    if($request->hasFile('file')) 
    { 
     $names = []; 
     foreach($request->file('file') as $image) 
     { 

      $destinationPath = 'portfolio_images/'; 
      $filename = $image->getClientOriginalName(); 
      $image->move($destinationPath, $filename); 
      array_push($names, $filename); 
     } 

     $portfolio->file = json_encode($names); 
    } 

    $portfolio->save(); 

    return redirect()->route('portfolios.index'); 
} 

マイルート：

Route::get('/', function() { 
    return view('welcome'); 
}); 

Auth::routes(); 

Route::get('/home', 'HomeController@index')->name('home'); 

Route::resource('/portfolios', 'PortfolioController'); 

私が正しく説明して、私が情報を残しておきたい場合はお知らせください

Answer 1

問題は、Dropzoneをドロップすると自動的にファイルがPOSTされることです。しかし、POSTにはリクエストの他のフィールドは含まれていません。ファイルだけです。そのため、あなたのCSRFトークンが失われています（フォーム上の他のフィールドと同様）、Laravelはエラーをスローします。

これを回避する方法はいくつかあります。おそらく最も簡単なのは、sending() evenハンドラにPOSTFのデータにCSRFトークンを追加することです。 Dropzone docs even mention doing exactly this：

...（CSRFトークンを追加するなど）...

だから、あなたのコード内：

// First, include the 2nd and 3rd parameters passed to this handler 
myDropzone.on("sending", function(file, xhr, formData) { 

    // Now, find your CSRF token 
    var token = $("input[name='_token']").val(); 

    // Append the token to the formData Dropzone is going to POST 
    formData.append('_token', token); 

    // Rest of your code ... 
    document.querySelector("#total-progress").style.opacity = "1"; 
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); 
}); 

注けれども、今、無効なフォーム上にまだ変更されていない、あなたのCSRFトークンであることを - ちょうど扱わPOSTリクエストは、それが更新されていることを意味します。ドロップした次のファイルは同じトークンを再利用するため、失敗します。

より完全な解決策は、送信ボタンを押してからすべてのファイルとすべてのフォームフィールドを一度に送信するまで、ファイルの送信を完全に無効にすることです。 、あなたはdisable autoProcessQueueなければならないことを行うには：キューがautoprocessedされていないので、

autoProcessQueue = false, 

次へ]を、あなたは今、それを手動で処理しなければならない、by firing processQueue()、あなたのフォームを送信するとき。あなたは、フォームが送信されたときに起動するイベントハンドラのいくつかの種類が必要になります。

// Event handler to fire when your form is submitted 
$('form').on('submit', function(e) { 
    // Don't let the standard form submit, we're doing it here 
    e.preventDefault(); 

    // Process the file queue 
    myDropzone.processQueue(); 
}); 

をそして最後に、あなたは意志POSTデータドロップゾーンに自分のフォームであなたのCSRFトークンと他のフィールドを追加する必要があります。

myDropzone.on("sending", function(file, xhr, formData) { 

    // Find all input values on your form 
    var data = $('form').serializeArray(); 

    // Append them all to the formData Dropzone will POST 
    $.each(data, function(key, el) { 
     formData.append(el.name, el.value); 
    }); 

    // Rest of your code ... 
    document.querySelector("#total-progress").style.opacity = "1"; 
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); 
}); 

Answer 2

フォームにfile updloadsのenctypeがありません。enctype属性は、フォームデータを送信する際のエンコード方法を指定しますサーバーに送信します。

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">

ADNもポストのような方法を指定しますので、あなたのフォームにその属性を追加します！