I am trying to upload several images to my local server. I used the following code:
<body>
<h1>Upload multipe files with Fetch API</h1>
<input type="file" id="inpFile" multiple>
<button id="btnUpload">Upload Files</button>
<script>
const inpFile = document.getElementById("inpFile");
const btnUpload = document.getElementById("btnUpload");
btnUpload.addEventListener("click", function () {
const formData = new FormData();
for (const file of inpFile.files ) {
formData.append("myFiles", file);
}
for (const [key, value] of formData) {
console.log(`key: ${key}`);
console.log(`Value: ${value}`);
}
fetch("http://127.0.0.1:5500/upload", {
method: "post",
body: formData
}).catch(console.error);
})
</script>
</body>
which I prepared from the following tutorial:
https://www.youtube.com/watch?v=6JR8HI9Ymd8&ab_channel=dcode
Unfortunately, it doesn't work. I know the reason, as it's apparently caused by the method.
I can't use method:post for local server, as I am getting an error:
HTTP 500 Error jQuery Ajax with Web service
However, when I try to use method:get, it's still something not right, as I get the following error described here:
Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. at HTMLButtonElement.
Is there anyy way of uploading images (or othher files) to the local server?
