Using raw HTML when I post a file to a flask server using the following I can access files from the flask request global:
<form action='upload_file' method="post" enctype=multipart/form-data> <input type="file" name="file"> <input type=submit value=Upload>
</form>In flask:
def post(self): if 'file' in request.files: ....When I try to do the same with Axios the flask request global is empty:
<form enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" name="file">
</form>
uploadFile: function (event) { const file = event.target.files[0] axios.post('upload_file', file, { headers: { 'Content-Type': 'multipart/form-data' } })
}If I use the same uploadFile function above but remove the headers json from the axios.post method I get in the form key of my flask request object a csv list of string values (file is a .csv).
How can I get a file object sent via axios?
37 Answers
Add the file to a formData object, and set the Content-Type header to multipart/form-data.
var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, { headers: { 'Content-Type': 'multipart/form-data' }
})Sample application using Vue. Requires a backend server running on localhost to process the request:
var app = new Vue({ el: "#app", data: { file: '' }, methods: { submitFile() { let formData = new FormData(); formData.append('file', this.file); console.log('>> formData >> ', formData); // You should have a server side REST API axios.post(' formData, { headers: { 'Content-Type': 'multipart/form-data' } } ).then(function () { console.log('SUCCESS!!'); }) .catch(function () { console.log('FAILURE!!'); }); }, handleFileUpload() { this.file = this.$refs.file.files[0]; console.log('>>>> 1st element in files array >>>> ', this.file); } }
});If you don't want to use a FormData object (e.g. your API takes specific content-type signatures and multipart/formdata isn't one of them) then you can do this instead:
uploadFile: function (event) { const file = event.target.files[0] axios.post('upload_file', file, { headers: { 'Content-Type': file.type } })
}This works for me, I hope helps to someone.
var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData) .then(res => { console.log({res}); }).catch(err => { console.error({err}); });Sharing my experience with React & HTML input
Define input field
<input type="file" onChange={onChange} accept ="image/*"/>Define onChange listener
const onChange = (e) => { let url = ""; let file = e.target.files[0]; uploadFile(url, file);
};
const uploadFile = (url, file) => { let formData = new FormData(); formData.append("file", file); axios.post(url, formData, { headers: { "Content-Type": "multipart/form-data", }, }).then((response) => { fnSuccess(response); }).catch((error) => { fnFail(error); });
};
const fnSuccess = (response) => { //Add success handling
};
const fnFail = (error) => { //Add failed handling
};How to post file using an object in memory (like a JSON object):
import axios from 'axios';
import * as FormData from 'form-data'
async function sendData(jsonData){ // const payload = JSON.stringify({ hello: 'world'}); const payload = JSON.stringify(jsonData); const bufferObject = Buffer.from(payload, 'utf-8'); const file = new FormData(); file.append('upload_file', bufferObject, "b.json"); const response = await axios.post( lovelyURL, file, headers: file.getHeaders() ).toPromise(); console.log(response?.data);
}For me the error was the actual parameter name in my controller... Took me a while to figure out, perhaps it will help someone. Im using Next.js / .Net 6
Client:
export const test = async (event: any) => { const token = useAuthStore.getState().token; console.log(event + 'the event') if (token) { const formData = new FormData(); formData.append("img", event); const res = await axios.post(baseUrl + '/products/uploadproductimage', formData, { headers: { 'Authorization': `bearer ${token}` } }) return res } return null
}Server:
[HttpPost("uploadproductimage")] public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image) { return Ok(); }Error here because server is expecting param "image" and not "img:
formData.append("img", event); public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)
