HTML
So we have an image loader input file type. We also have a button control.
The onclick event for the button calls our js function uploadImage.
Once
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<input type="file" name="imgUploader" id="imgUploader" /> <button name="submit" id="btnSubmit" onclick="uploadImage()">upload image</button> <script> function uploadImage() { console.log("upload image"); var image = document.getElementById("imgUploader").files[0]; console.dir(image); var formData = new FormData(); formData.append('imgUploader', image); fetch('http://localhost:8080/api/Upload', { method:'POST', body: formData, mode: 'no-cors' }).then(function(data) { console.log("------result from image upload--------"); console.log(data); }); } </script> |
Node js server side
1 2 3 4 |
app.post("/api/Upload", function(req, res) { console.log("POST request on api/Upload, you are trying to upload an image"); res.send("testing 1 2 3"); }); |