Integrating dropzone.js with laravel

Question

I'm trying to integrate dropzone.js with laravel 5 but I get empty FileBag when trying to dd($request).

In my view:

<form action="create-submit" class="dropzone" enctype="multipart/form-data">...</form>

I included dropzone.css and basic.css, also I included dropzone.js in my HTML.

Route:

Route::get('content/create-submit', [
    'as' => 'create-submit', 'uses' => 'ContentController@createSubmit'
]);

Controller:

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

Am I missing something?

Is there an easy solution to integrate dropzone.js to laravel? Pls help

Not that familiar with dropzone but doesn't your form element need enctype="multipart/form-data" and your route needs a post method, not get? — camelCase
– camelCase, Commented Feb 4, 2016 at 16:00
Are you using POST or GET to upload the image and form data? Since GET is limited to ~2000 characters, perhaps combined with all your other form data, something is being truncated? — camelCase
– camelCase, Commented Feb 5, 2016 at 16:08

Mark Davidson · Accepted Answer · 2016-02-05 08:57:59Z

1

Are you initializing dropzone in JS? It should do so automatically but sometimes it doesn't work as expect.

So I'm doing this.

<div class="dropzone" id="fileUpload" class="clear">
</div>

<script type="text/javascript" defer="true">
    var token = "{{ Session::getToken() }}";
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("div#fileUpload", {
        url: "{{ route('upload') }}",
        params: {
            _token: token
        }
    });
</script>

We are passing a CSRF token as part of the request in this case as well.

I'd suggest using web developer tools to see what response your getting when the upload is sent to the server.

UPDATE Controller code:

if ($request->hasFile('file') && $request->file('file')->isValid()) {
        $file = $request->file('file');
        dd($file);
}

edited Feb 5, 2016 at 8:57

answered Feb 4, 2016 at 16:17

Mark Davidson

5,5096 gold badges37 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gogo Over a year ago

Tried your solution but no effect. How can I check if the file is actually uploaded? In the network part of the developer tools it says data:image/jpeg:base64... and data:image/png:base64... when I put some image on dropzone.

Mark Davidson Over a year ago

I've added a chunk of the code form my controller might help. If your seeing that in the network activity and getting a 200 OK as the response I'd expect it to be working.

Gogo Over a year ago

It doesn't work. Dropzone shows progress bar OK as the file is uploaded and network activity as well. Then I click submit button on my form and it passes by if ($request->hasFile('file') && $request->file('file')->isValid()) and continues.

Gogo Over a year ago

As the $request doesn't have a file variable

Gogo Over a year ago

This is what I get on network activity: UploadedFile {#31 -test: false -originalName: "multimedija.jpg" -mimeType: "image/jpeg" -size: 145446 -error: 0 path: "/tmp"...

|

Ikong · Accepted Answer · 2017-06-03 15:54:14Z

try manually initialize your dropzone like

jQuery(document).ready(function () {    
var myDropzone = new Dropzone("#my-dropzone", { 
                url: "/dropzone",
                headers: {
                   'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,
                }
              });
});

and in your controller

public function dropzone(Request $request)
    {
        $img    = $request->file('file'); //access dropzone files   
    }

Also, if no header token passed you will probably will not get any request.

For more detailed integration with laravel dropzone you can refer to this tutorial Integrating Dropzone.js in Laravel 5 applications

Collectives™ on Stack Overflow

Integrating dropzone.js with laravel

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related