One way to upload a file to the server is by using axios along with the FormData api. Here's an example:
persist(photo){
let data = new FormData();
data.append('photo', photo);
axios.post(`/api/photos/${this.user.username}/upload`, data)
.then(() => displaySuccessMessage('Photo uploaded!'));
}
The photo parameter in the persist() function is expected to be a file object from a form input of type "file".
On the server side, the uploaded file can then be processed.
Is there a way to achieve the same result without using FormData? In other words, is it possible to mimic the functionality of FormData? I am curious about the additional work done by the FormData api. It might not be feasible with axios alone, and perhaps XMLHttpRequest would be more suitable for this purpose.
Simply sending the file object directly like so, will not work:
axios.post(`/api/photos/${this.user.username}/upload`, {photo: photo})
In this scenario, the 'photo' object on the server side will be empty. It's only metadata like name that can be sent, not the entire object itself.