How to post a file from a form with Axios

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?

7 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)