Level 25
Try adding
'X-Requested-With': 'XMLHttpRequest',
to your headers
May 19, 2022
12
Level 1
GET method is not supported - During file upload with ajax
I am not sure what is wrong here, of course all works outside laravel (php) but not with laravel8. all the time I have below error
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
sample code comes from js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/ChunkUploading/jQuery/Light/
my route are cnfigured as below
Route::get('drop', 'App\Http\Controllers\GalleryController@drop');
Route::post('dropupload', 'App\Http\Controllers\GalleryController@dropupload');
Blade
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.2.7/js/dx.all.js"></script>
</head>
<div class="dx-viewport ">
<div class="demo-container">
<div id="file-uploader"></div>
<span class="note">Maximum file size: <span>4 MB.</span></span>
<div class="chunk-panel"> </div>
</div>
</div>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(() => {
$('#file-uploader').dxFileUploader({
name: 'file',
multiple: true,
accept: 'image/*',
chunkSize: 2000000,
method: 'POST',
type: 'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
uploadMode: 'instantly',
uploadUrl: '/dropupload',
onProgress: onUploadProgress,
});
});
function onUploadStarted() {
getChunkPanel().innerHTML = '';
}
function onUploadProgress(e) {
getChunkPanel().appendChild(addChunkInfo(e.segmentSize, e.bytesLoaded, e.bytesTotal));
}
function addChunkInfo(segmentSize, loaded, total) {
const result = document.createElement('DIV');
result.appendChild(createSpan('Chunk size:'));
result.appendChild(createSpan(getValueInKb(segmentSize), 'segment-size'));
result.appendChild(createSpan(', Uploaded:'));
result.appendChild(createSpan(getValueInKb(loaded), 'loaded-size'));
result.appendChild(createSpan('/'));
result.appendChild(createSpan(getValueInKb(total), 'total-size'));
return result;
}
function getValueInKb(value) {
return `${(value / 1024).toFixed(0)}kb`;
}
function createSpan(text, className) {
const result = document.createElement('SPAN');
if (className) { result.className = `${className} dx-theme-accent-as-text-color`; }
result.innerText = text;
return result;
}
function getChunkPanel() {
return document.querySelector('.chunk-panel');
}
</script>
I have this same errror for type/method POST or GET
I am not sure if this is related but also i have below exception
CSRF token mismatch.
C:\wamp\www\asystentfotografa.dev\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\VerifyCsrfToken.php#85
Illuminate\Session\TokenMismatchException
});
}
throw new TokenMismatchException('CSRF token mismatch.');
}
/**
Level 1
this same error and exception
Level 122
Where do you see this exception?
Is your /dropupload inside a prefixed route group?
Level 1
I have exception inside debugbar and inside telescope Response tab.
{
"message": "CSRF token mismatch.",
"exception": "Symfony\Component\HttpKernel\Exception\HttpException",
"file": "C:\wamp\www\asystentfotografa.dev\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\Handler.php",
"line": 389,
This is fresh laravel instances with only 2 routes in web.php
Route::get('drop', 'App\Http\Controllers\GalleryController@drop');
Route::post('dropupload', 'App\Http\Controllers\GalleryController@dropupload');
I can see Token inside Telescone Headers section, also inside Session. but all the time I have status 419 with method is not supported
Level 122
This line
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
tries to get the CSRF token from a meta tag in the header of the document. Since you don't use a regular template you are missing this line.
Add to the <head> section
<meta name="csrf-token" content="{{ csrf_token() }}">
Level 1
this same results even if I will use regular template (but now this exception exists only inside telescope response but not in debugbar)
"message": "CSRF token mismatch.",
"exception": "Symfony\Component\HttpKernel\Exception\HttpException",
"file":
Level 122
@ksobolewski Show your view file.
by the way, even a novice should be able to review the network request with their browser tools, see what endpoint is being accessed and the data being sent
Level 1
@Snapey I am new in Laravel but I have experience in php and other staff, also I know how to troubleshoot network issues, from "web tools" I can see file is sending in proper way, in Cookies I can see XSRF-TOKEN + laravel_session token but response is CSRF token mismatch and due to this (I think) I have this GET method is not supported error. My blade (view) file is in first post. This same code works perfectly in clean PHP outside laravel. Dropupload function shows only data from drop, simple dd($request)
Level 122
so when you perform the browser action, the very first thing you should see is a POST request with your data, session cookie and csrf header
you may then see a redirect 301 which is then causing an error with GET not supported because all redirects are get
Level 1
@Snapey at the beginning I have 200 (normal) from drop, straight after adding file I can see only 419 no redirection. This same in Chrome, Egde, even Fiddler and Wireshark. No idea, what is wrong here. I have 2 env. one WIN10 + winamp and second one is ubuntu + nginx, on both this same results.
Level 122
@ksobolewski So where are you seeing " GET method is not supported error"
Level 1
@Snapey after adding file (for upload) in chrome console (or in telescope) I have
Failed to load resource: the server responded with a status of 419 (unknown status)
for dropupload and in details
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
then in telescope for example I have 2 entries for this action, first: GET /drop 200 - status after that: POST /dropupload 419 -status and inside details: for payload:
{
"chunkMetadata": "{"FileName":"_DSC2165 kopia.jpg","Index":0,"TotalCount":9,"FileSize":16692937,"FileType":"image/jpeg","FileGuid":"0444fe7e-fc9c-97e8-e4aa-c463d6fae16d"}",
"file": {
"name": "blob",
"size": "2000KB"
}
}
Header shows
{
"host": "asystentfotografadev.test",
"connection": "keep-alive",
"content-length": "2000444",
"accept": "*/*",
"x-requested-with": "XMLHttpRequest",
"user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36",
"content-type": "multipart/form-data; boundary=----WebKitFormBoundarygdcGiI4QnzkbY1Eb",
"origin": "http://asystentfotografadev.test",
"referer": "http://asystentfotografadev.test/drop",
"accept-encoding": "gzip, deflate",
"accept-language": "pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7,de;q=0.6",
"cookie": "XSRF-TOKEN=eyJpdiI6InFlWkdrWXpsZytTSncwbXJzdzdiN3c9PSIsInZhbHVlIjoiOWRLaGZ4bXBGSEZvbHEwUUY1Q0ZacE1VOWFiZngveUQyR0RwYkhXUDgyRmtNYVdZUzZIOHd1bGxPd0p0d2ZYUTJnYUh6TU95NmJaZmdTLzc2dTEveVpPTDR4YkplV29UWnFlOVBJenlFbmFtZEFtaExtSVNlV0E0UUhhdzRQZkIiLCJtYWMiOiJmNmJmNGE3ZmI2MzQ3NzIxNTlkOWE1ZmU4M2U1MDFmNTdjNDMxOTU2YjMwYzRmNWYwMDI5NTg1NjFlNDg3YzRkIiwidGFnIjoiIn0%3D; asystentfotografa_session=eyJpdiI6IkV5WGZVeUZSM3RuMTdYUTNyTEZxL2c9PSIsInZhbHVlIjoiWUQxNm9XcWhiWlVmTkQ5OHhCNzBvbkpXK0xkbWNuNk5pMHg0MkxJWE9uaVVzcjQ1MDBGMmFuNnZDd25SRmd2a3puUnBONXZrN01FWmVxWG1NNktnbkJjOFIxY25pWEVHc2xNMjAwV0lXbkhEMzI0RjlJQU9uUnZMdGlIZkJyZUoiLCJtYWMiOiJkYWEwNzhhN2E0OTAzODk1NzM4YTYwNjNmMDllMTRkN2Y2NmQ0Mjg1NDBiZGU5NGNjYWRjMTAyYWFhOTQ3ZGJmIiwidGFnIjoiIn0%3D"
}
session
{
"_token": "ohD5ONPG7Us1T91f657S9r9uXBB0PbL54cibh8Jy",
"_previous": {
"url": "http://asystentfotografadev.test/drop"
},
"_flash": {
"old": [
],
"new": [
]
},
"login_web_59ba36addc2b2f9401580f014c7f58ea4e30989d": 2
}
and response also with "message": "CSRF token mismatch.",
{
"message": "CSRF token mismatch.",
"exception": "Symfony\Component\HttpKernel\Exception\HttpException",
"file": "C:\wamp\www\asystentfotografa.dev\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\Handler.php",
"line": 389,
"trace": [
{
"file": "C:\wamp\www\asystentfotografa.dev\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\Handler.php",
"line": 332,
"function": "prepareException",
"class": "Illuminate\Foundation\Exceptions\Handler",
"type": "->"
},
Please or to participate in this conversation.