frogeyedman's avatar

Laravel with DropzoneJS 400 (Bad Request)

Okey, so i'm trying to get DropzoneJS working with Laravel 5.5 i searched for hours but can't find a real solution to this problem.. I hope someone could help me with this. I is the standard bootstrap example from DropzoneJS:

`      var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: '{{route('admin.store.upload')}}',
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    maxFilesize: 2,
    autoQueue: false, // Make sure the files aren't queued until manually added
    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("sending", function(file, xhr, formData) {
    // Show the total progress bar when upload starts
    document.querySelector("#total-progress").style.opacity = "1";
    // And disable the start button
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    formData.append('_token', '{{ csrf_token() }}');

});`

the route i set up

Route::post('upload', 'Admin\StoreController@uploadImage')->name('admin.store.upload');

But when ever i try to upload a image the console returns: http://td.dev/admin/upload 400 (Bad Request), as far as i know this should be a token error but i can't solve the problem.. I hope someone has a solution for me!

the total error from the console:

`dropzone.min.js:2 POST http://td.dev/admin/winkel/upload 400 (Bad Request)
value @ dropzone.min.js:2
value @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
transformFile @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
setTimeout (async)
value @ dropzone.min.js:1
file.previewElement.querySelector.onclick @ toevoegen:151`

And the error from the network tab: General:

Request URL:http://td.dev/admin/winkel/upload
Request Method:POST
Status Code:400 Bad Request
Remote Address:192.168.10.11:80
Referrer Policy:no-referrer-when-downgrade

Response headers:

Cache-Control:no-cache, private
Connection:keep-alive
Content-Type:application/json
Date:Mon, 04 Dec 2017 15:25:07 GMT
Server:nginx/1.11.9
Cookie and stuff
Transfer-Encoding:chunked
Host:td.dev
Origin:http://td.dev
Pragma:no-cache
Referer:http://td.dev/admin/winkel/toevoegen
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
X-Requested-With:XMLHttpRequest

Request payloads:

------WebKitFormBoundaryOTsTQIlujmEOb2Zh
Content-Disposition: form-data; name="_token"

BDolizGjW5j8t1BbGfl992xglDl75AWcbxjfCjsD
------WebKitFormBoundaryOTsTQIlujmEOb2Zh
Content-Disposition: form-data; name="file"; filename="jeffroast.png"
Content-Type: image/png


------WebKitFormBoundaryOTsTQIlujmEOb2Zh--

Thanks for the help.

0 likes
3 replies
austenc's avatar
austenc
Best Answer
Level 10

Have you tried disabling CSRF protection for your route temporarily in the VerifyCsrfToken middleware? That would at least rule out a token / CSRF issue.

1 like
frogeyedman's avatar

I fixed it thank you @austenc for the help, without you i would still be fixing the csrf token error hahaha

Please or to participate in this conversation.