JavaScript Fetch File Upload
Let's create the client side following Spring Upload.
I simply added only the necessary sources.
Source
Creating a Function
Let's create a function for easy use.
// Fetch File Upload Function
const fileUpload = async(url, files) => {
const formData = new FormData();
for(let i = 0; i < files.length; i++) {
formData.append("file", files[i]);
}
const method = 'post';
const body = formData; const headers = {};
const res = await fetch(url, { method, body, headers })
if(res.status === 200) return await res.json();
//
// Exception handling part
//
return false;
}Function call
Here's how to execute the function created above.
<!-- html input tag -->
<input id="file" type="file"></input>// Execute upload
const files = document.getElementById('file').files;
const res = await fileFetch('/file', files);
// res === false Failure!
Example
Other examples
Spring server-side upload
Spring server-side download
Client JavaScript Fetch upload
Client JavaScript Fetch download