Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am using Dropzone to upload images using Laravel 5. After Dropzone makes the put call to my URL I get the following error:
upload.blade.php
<div class="dropzone" id="drop">
</div>
header
@section('style')
<link rel="stylesheet" href="{{ asset('themes/css/dropzone.css') }}">
@endsection
script.js
<script src="{{ asset('themes/js/dropzone.js') }}"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function(){
$('#drop').dropzone({
url: '{{ route('dropzone') }}',
method: 'post'
});
});
</script>
You can pass the token in the header:
<script src="{{ asset('themes/js/dropzone.js') }}"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function(){
$('#drop').dropzone({
url: '{{ route('dropzone') }}',
method: 'post',
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
}
});
});
</script>
@chr15k Hey there, Hope you are doing okay.
I have a question i wokr on vanilla javascript $('meta[name="token"]').attr('content') and this one i can catch it with document.querySelector('meta[name="csrf-token"]').getAttribute('content'); but for me this comes null.
Do you have any ide why, do i need to add something else like this ?
Thanks in advanced.
I replaced it
<script src="{{ asset('themes/js/dropzone.js') }}"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function(){
$('#drop').dropzone({
url: '{{ route('dropzone') }}',
method: 'post',
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
}
});
});
</script>
But my problem did not solve yet. I get this error again.
I can send you what worked quite well for me:
dropzone options
Dropzone.options.dropzone = {
maxFilesize: 12,
renameFile: function(file) {
return file.name;
},
acceptedFiles: ".jpeg,.jpg,.png",
addRemoveLinks: false,
timeout: 5000,
success: function(file, response) {
return console.log(response);
},
error: function(file, response) {
return console.log(response);
}
};
view - use the @csrf directive here
<form
method="post"
action="{{ route('store') }}"
enctype="multipart/form-data"
class="dropzone"
id="dropzone"
>
@csrf
<div class="dz-message">
<div class="col-xs-8">
<div class="message">
<p>Drop files here or Click to Upload</p>
</div>
</div>
</div>
<div class="fallback">
<input name="file" type="files" multiple accept="image/jpeg, image/png, image/jpg" />
</div>
</form>
Hope it helps
For anyone who is still having trouble implementing the dropzone js file upload in Laravel:
This is my JS script (Make sure to import the Dropzone library in your app.js file )
let myDropzone = new Dropzone("div#profile-avatar", {
url: "{{ route('user.save.avatar') }}",
paramName: "avatar",
maxFiles: 1,
maxFilesize: 2, // MB
addRemoveLinks: true,
acceptedFiles:"image/*",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
You must have a meta header in your layout/blade file, like
<meta name="csrf-token" content="{{ csrf_token() }}">
You could save yourself the stress of adding the token to the meta and go direct, just the way you add it to forms.
...
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
This works perfectly well.
Please or to participate in this conversation.
