In my Vue file I am using the following code to upload a file:
<input type="file" name="image" @change="filesChange($event.target.name, $event.target.files);" accept="image/*" class="input-file">
filesChange(fileList) { const formData = new FormData();
if (!fileList.length) return;
this.uploadedFiles = fileList[0];
Array
.from(Array(fileList.length).keys())
.map(x => {
formData.append('image', fileList[x], fileList[x].name);
});
formData.append("title", this.title);
axios.post('/admin/bulletins/store', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
I get a 419 unknown status from the server and getJsonPayload($payload) in Encrypter.php returns "The payload is invalid." as the payload is null. I have tried endless permutations but cannot see why it's failing.
The Request Headers are:
Accept:application/json, text/plain, / Accept-Encoding:gzip, deflate, br Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 Cache-Control:no-cache Connection:keep-alive Content-Length:114846 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryZANVT7ibWWS3ADpI Cookie:XSRF-TOKEN=eyJpdiI6IktzSEFTVjJ5ejd1a2g0ZkRtYXhPb1E9PSIsInZhbHVlIjoic3hFNityNzA3U2dBcmlFM1wvMUVTZmg1OTRDUmRvd0FyU21va2JwNTl3d0JQUkUyd0plVTFKN1lCQ1JDVWlHYTgxN1RGYzA4N0xpV2VmcUNQQVJoNEV3PT0iLCJtYWMiOiI4MTEwZTczMGQ5ZjY1NTAzZDNiOGZlMWJjMDQwNTY0NzUzZGIxYmUzYTAxNjNlNDhiNDI0NTE4OTUyNThhM2YzIn0%3D; saccenter_session=eyJpdiI6ImZRcWNzRUhDNDJ1dG9tUHY4YjN1blE9PSIsInZhbHVlIjoiRFwveTFPbUp3RkwxVCtjQ2s3VjZic01lRnBrUUpSNUlwbFFESlM1SHJ2dnRlR2g3d3JWMWJsNXVySDNNbXhHMmc2V2pWZGZndWg1QVpJR2RiOFZ3enpnPT0iLCJtYWMiOiI2ZjIwYzcwOTM3ZmUxNGM0MzM1OGIyYzQyZGQzNGJmNjVmMjY4OGQ3ZTFhYTkxNzczYmEyMWFjZTRiODBmMDQ4In0%3D Host:127.0.0.1:8000 Origin:http://127.0.0.1:8000 Pragma:no-cache User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 X-CSRF-TOKEN:PLoQ6oICrJktx9z0lSpEdhdCq7YGA0J68Zd4YIqv X-Requested-With:XMLHttpRequest X-XSRF-TOKEN:eyJpdiI6IktzSEFTVjJ5ejd1a2g0ZkRtYXhPb1E9PSIsInZhbHVlIjoic3hFNityNzA3U2dBcmlFM1wvMUVTZmg1OTRDUmRvd0FyU21va2JwNTl3d0JQUkUyd0plVTFKN1lCQ1JDVWlHYTgxN1RGYzA4N0xpV2VmcUNQQVJoNEV3PT0iLCJtYWMiOiI4MTEwZTczMGQ5ZjY1NTAzZDNiOGZlMWJjMDQwNTY0NzUzZGIxYmUzYTAxNjNlNDhiNDI0NTE4OTUyNThhM2YzIn0= Request Payload ------WebKitFormBoundaryZANVT7ibWWS3ADpI Content-Disposition: form-data; name="image"; filename="10.jpg" Content-Type: image/jpeg
------WebKitFormBoundaryZANVT7ibWWS3ADpI Content-Disposition: form-data; name="title"
June Flowers
i think the problem is your are passing in 'nothing' on the @change event.
the event is available from the method filesChange as the 'first' undeclared parameter.
so change
filesChange($event.target.name, $event.target.files);
to
filesChange
``
then in your method, change signature:
filesCHange(e) {
console.log(e)
}
also, just out of curiosity. what does formData say?
Many thanks robrogers3 that solved my problem.
I had based my code on this example https://scotch.io/tutorials/how-to-handle-file-uploads-in-vue-2 but by having filesChange instead of filesChange($event.target.name, $event.target.files) and using filesChange(e) to access the file data it all works.
Weird. It has suddenly reverted to returning 419 unknown status even though the request headers are the same as when it was working. I think it is an issue with XSRF-TOKEN as it ends up throwing a TokenMismatchException. The request shows that the XSRF-TOKEN is sent. Also when I refresh the page I am forced back to the login page, again suggesting that somehow the token is no longer valid. Any thoughts much appreciated.
Request Headers Accept:application/json, text/plain, / Accept-Encoding:gzip, deflate, br Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 Cache-Control:no-cache Connection:keep-alive Content-Length:114851 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryqgAKGs7820tBOWuO Cookie:XSRF-TOKEN=eyJpdiI6ImJPQjlheDduMXRacFJcL05BU09pek1BPT0iLCJ2YWx1ZSI6Im13bkg3MmJcL1diXC9PWU12U1NHWUIwbGt4SWFlQTYzT3BrNk0xZ2NxdzlYM3orMzhIRWsycG8rcUZ6NkZhUnlqeSt0Z3Jqb1ZJRHBmU0J1ek1Xa2JmdVE9PSIsIm1hYyI6IjBlY2EyMjFjNzVlMTEwMjdmMzI3MTA0YjI1MmE5YTUxYmZlOTAxZTQwM2Y3YmM3MDZkZGI1OGZkOGQ1ZDM1MzcifQ%3D%3D; saccenter_session=eyJpdiI6ImwxRUdtMUtWWXl3Y0tKdkQrWW9rWXc9PSIsInZhbHVlIjoiWDdzdlN2SU1RbVkxWEJcL3Y5b0l0cTFrWXB0eExmUVB3UnpnbXBUdm9OeGVybEFoOE9FdEcxUmJlTmVVeUdaV0tMSVFTOFhcLytYRlVqanZSR3M1emdmUT09IiwibWFjIjoiNWU0OWVlODQ3MzQyZTg0OWZkM2RhNWQwNzUzMzI2M2NmYmMxOWU2ZDllZWNkMzVhODllNTgwZTMzMGI1YjRlMCJ9 Host:127.0.0.1:8000 Origin:http://127.0.0.1:8000 Pragma:no-cache User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 X-CSRF-TOKEN:tMxur2NsFGJ5u5nbgo40hEp3bj6AVI0mBDF1sPqH X-Requested-With:XMLHttpRequest X-XSRF-TOKEN:eyJpdiI6ImJPQjlheDduMXRacFJcL05BU09pek1BPT0iLCJ2YWx1ZSI6Im13bkg3MmJcL1diXC9PWU12U1NHWUIwbGt4SWFlQTYzT3BrNk0xZ2NxdzlYM3orMzhIRWsycG8rcUZ6NkZhUnlqeSt0Z3Jqb1ZJRHBmU0J1ek1Xa2JmdVE9PSIsIm1hYyI6IjBlY2EyMjFjNzVlMTEwMjdmMzI3MTA0YjI1MmE5YTUxYmZlOTAxZTQwM2Y3YmM3MDZkZGI1OGZkOGQ1ZDM1MzcifQ== Request Payload ------WebKitFormBoundaryqgAKGs7820tBOWuO Content-Disposition: form-data; name="image"; filename="10.jpg" Content-Type: image/jpeg
------WebKitFormBoundaryqgAKGs7820tBOWuO Content-Disposition: form-data; name="title"
Test Title
------WebKitFormBoundaryqgAKGs7820tBOWuO--
Please or to participate in this conversation.