Laravel 5.5 — Не удается загрузить загруженные файлы Dropzone в FileBag
Я использовал стандартный HTML POST в проекте Laravel для загрузки файлов и хочу использовать Dropzone.
Я попытался просмотреть документацию для Dropzone и примеры онлайн-реализации Laravel, но я не могу получить простую публикацию файла для загрузки в заголовки POST.
Поэтому Laravel FileBag остается пустым, и я не могу понять, почему. Вывод $ _FILE приводит к тому, что файлы не передаются в заголовки. Кроме этого, с точки зрения браузера поле ввода для dropzone отображается нормально, оно отзывчиво и не отображает ошибок при загрузке файла.
Любая помощь будет оценена. Код урезан до основ:
Мастер Клинок:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dropzone.css">
<script src="/dropzone.js"></script>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
</head>
<body><script type="text/javascript">
var baseUrl = "{{ url('/testUpload') }}";
var token = "{{ Session::Token() }}";
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
url: baseUrl,
params: {
_token: token
}
});
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
accept: function(file, done) {
},
};
</script>
</body>
</html>
Лезвие:
@extends("testmaster")
<form action="/testUpload" enctype="multipart/form-data" method="post" class="dropzone">
{{ csrf_field() }}
<div class="container">
<div class="dropzone" id="dropzoneFileUpload">
</div>
</div>
<input type="submit" value="Submit">
</form>
контроллер:
public function testUpload(Request $request)
{
dd($request);
}
Маршрут:
Route::get('/test','HomeController@test');
Route::post('/testUpload','HomeController@testUpload');
Результирующий запрос:
Request {#38 ▼
#json: null
#convertedFiles: null
#userResolver: Closure {#398 ▶}
#routeResolver: Closure {#399 ▶}
+attributes: ParameterBag {#40 ▶}
+request: ParameterBag {#39 ▶}
+query: ParameterBag {#46 ▶}
+server: ServerBag {#42 ▶}
+files: FileBag {#43 ▼
#parameters: []
}
+cookies: ParameterBag {#41 ▶}
+headers: HeaderBag {#44 ▶}
#content: null
#languages: null
#charsets: null
#encodings: null
#acceptableContentTypes: null
#pathInfo: "/testUpload"#requestUri: "/testUpload"#baseUrl: ""#basePath: null
#method: "POST"#format: null
#session: Store {#440 ▶}
#locale: null
#defaultLocale: "en"-isHostValid: true
-isForwardedValid: true
basePath: ""format: "html"}
Решение
Вот мой рабочий пример:
Маршруты
<?php // routes/web.php
Route::view('/dropzone', 'dropzone');
Route::post('/upload', 'ImageController@upload');
шаблон
{{-- dropzone.blade.php --}}
@extends('layouts.app')
@section('content')
<div class="container">
<form action="/upload" enctype="multipart/form-data" method="POST" class="dropzone">
{{ csrf_field() }}
<div class="form-group">
<div class="dropzone" id="dropzoneFileUpload"></div>
</div>
</form>
</div>
@stop
@section('script')
<script>
const baseUrl = "{{ url('/upload') }}";
const dropzoneFileUpload = new Dropzone("div#dropzoneFileUpload", {
url: baseUrl,
method: 'POST',
withCredentials: true,
paramName: 'file', // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
acceptedFiles: 'image/*',
headers: {
'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
'X-Requested-With': 'XMLHttpRequest',
}
});
</script>
@stop
{{-- layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Document</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
@yield('style')
</head>
<body>
<div id="app">
@yield('content')
</div>
<script src="{{ mix('js/app.js') }}"></script>
@yield('script')
</body>
</html>
контроллер
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
public function upload(Request $request)
{
return $request->file('file');
}
}
Обратите внимание на мою конфигурацию Dropzone, я включаю X-CSRF-TOKEN а также X-Requested-With заголовки. Я тоже даю paramName вариант, прежде чем дать эту опцию, мой Request объект не может поймать любой файл, отправленный Dropzone. Надеюсь это поможет.
Другие решения
Вы использовали неправильно id при настройке параметров. В вашем html код, у вас есть следующая разметка:
<div class="container">
<div class="dropzone" id="dropzoneFileUpload">
</div>
</div>
Но в вашем js код вы использовали следующий код:
Dropzone.options.myAwesomeDropzone = {
//...
}
В этом случае вы должны использовать следующее:
Dropzone.options.dropzoneFileUpload = {
//...
}
Обратите внимание, что id в вашем html является dropzoneFileUpload не myAwesomeDropzone, прочитайте больше.