You need to get the file somehow, in my example, I've assumed you have a file picker and you can access the data from that
You'll want to send your file to the server using a post request then use promises to catch or resolve based on the success of the request.
https://github.com/axios/axios
https://developer.mozilla.org/en-US/docs/Web/API/FormData
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
/*
example of getting a file from DOM but as long as you
pass a file to the function should be good
*/
// es6 promise
function postFileToServer(file) {
const formData = new FormData();
formData.append("file", file);
axios.post('/your-endpoint', formData)
.then(res => /* do something with res*/ console.log(res))
.catch(e => console.log('upload failed'))
}
function submit() {
const file = document.getElementById("file").files;
if (file.length > 0) {
postFileToServer(file[0])
}
}
input {display: block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<input id="file" type="file" />
<button onclick="submit()">submit</button>
From the FormData docs
The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
Basically, it formats it in an easily manipulatable Object ready to be sent to an external service. You will need to check how the service you're using wants to accept the file.