Ask a Question Register Login

php - Laravel 5.5 - Cannot Get Dropzone Uploaded Files Into FileBag

812

I've been using standard HTML POST in a Laravel project for file uploads and want to us Dropzone.

I've tried looking at the documentation for Dropzone and online examples of Laravel implementation, but, I cannot get a simple file post to upload into the POST headers.

Laravel FileBag therefore remains empty and I cannot figure out why. Dumping out $_FILE results in no files being passed into the Headers. Other than this, from a browser point of view the input box for dropzone displays fine, it's responsive and doesn't display errors when a file is uploaded.

Any help would be appreciated. Code stripped down to the basics:

Master Blade: 

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

Blade: 

@extends("testmaster")

 <form action="/testUpload" enctype="multipart/form-data" method="post" >

  {{ csrf_field() }}

  <div >
   <div id="dropzoneFileUpload">
   </div>
  </div>

  <input type="submit" value="Submit">

 </form>

Controller:

public function testUpload(Request $request)
{
    dd($request);
}

Route:

Route::get('/test','[email protected]');
Route::post('/testUpload','[email protected]');

Resulting Request:

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"
}
29

Answer

Solution:

Here's my working example:

Routes

<?php // routes/web.php

Route::view('/dropzone', 'dropzone');
Route::post('/upload', '[email protected]');

Template

{{-- dropzone.blade.php --}}
@extends('layouts.app')

@section('content')
<div >
  <form action="/upload" enctype="multipart/form-data" method="POST" >
    {{ csrf_field() }}

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

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function upload(Request $request)
    {
        return $request->file('file');
    }
}

Pay attention to my Dropzone configuration, I includeX-CSRF-TOKEN andX-Requested-With headers. I also giveparamName option, before I give this option, myRequest object can't catch any file sent by Dropzone. Hope this helps.

513

Answer

Solution:

You've used the wrongid while setting the options. In yourhtml code, you've following markup:

<div >
 <div id="dropzoneFileUpload">
 </div>
</div>

But in yourjs code you've used the following code:

Dropzone.options.myAwesomeDropzone = {
    //...
}

In this case, you should use the following instead:

Dropzone.options.dropzoneFileUpload = {
    //...
}

Notice that, theid in yourhtml isdropzoneFileUpload notmyAwesomeDropzone, read more.

People are also looking for solutions to the problem: reactjs - migrating php app to react with SSO

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.