I'm working with Axios / Vue
JS and Laravel 9
in the backend I'm trying to upload a file but I'm getting an error, this is my code :
selectedFile: function(){
let form = document.getElementById('myform');
let data = new FormData(form);
data = data.append('file', document.querySelector(".dropzoneFile").files[0]);
axios.post('http://testing.localhost/lab', data, {
'content-type': 'multipart/form-data',
});
}
The error I'm getting (Browser Inspect):
Request URL: http://testing.localhost/lab
Request Method: POST
Status Code: 405
Referrer Policy: strict-origin-when-cross-origin
The problem happens only with uploading forms ( not in normal forms )
That's my HTML:
<form id="myform" enctype="multipart/form-data">
<div >
<drop-zone @drop.prevent="drop" @change="selectedFile"></drop-zone>
</div>
</form>
and That's the dropzone component:
<template>
<div
@dragenter.prevent="toggleActive"
@dragleave.prevent="toggleActive"
@dragover.prevent
@drop.prevent="toggleActive"
:
>
<div >
<i ></i>
</div>
<h5>Drop files here or click to upload.</h5>
<label for="dropzoneFile" >Upload</label>
<input type="file" id="dropzoneFile" />
</div>
</template>
CodePudding user response:
405 Error status code occures when there is no relanvent method defined to handle that perticular post, get, delete or put in route file
Make sure you have POST method defined for that requested URL in your web.php file
The HyperText Transfer Protocol (HTTP) 405 Method Not Allowed response status code indicates that the server knows the request method, but the target resource doesn't support this method. The server must generate an Allow header field in a 405 status code response.
CodePudding user response:
Found it by my self : NEVER AND NEVER USE dd();
While you are using API. because of the preflight should not return an HTTP
error, and that's what dd() caused