How to get an image from a user and store it in a folder on a raspberry pi using the html input tag

Question

I am trying to use the input tag from Html to take an image from a user and store it on a web server that for now is my PC but in the future i want to transfer to it to my raspberry pi I don't want to use a SQL server for this project all that I need to know is preferably with HTML OR PHP Or JavaScript how could i take an image from a user and store it on a web server to be displayed later, also I am currently using xampp if that is of any use.

Answer 1

Use change event at <input type="file"> element, change event, FormData(), fetch() or XMLHttpRequest()

<input type="file" accepts="image/*">
<script>
var input = document.querySelector("input[type=file]");
input.addEventListener("change", function() {
  var file = this.files[0];
  var data = new FormData();
  data.append("file", file);
  fetch("/path/to/server", {method:"POST", body:data})
  .then(response => response.ok)
  .then(res => console.log(res))
})
</script>