Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Discussion options

Hi,

I'd like to use axios in the browser to consume an EP of a service that returns a multipart/form-data response with a file and a JSON object.

I didn't find any example on the docs and I couldn't make it work. My current attempt is this:

 sendRequest(file) {
    const form = new FormData();
    form.append("file", file);
    return axios.post("https://example.com", form, {
      headers: {"Accept": "multipart/form-data"}
    });
  }

but the Promise contains a string with the raw response instead of an instance of FormData.

Using fetch I'm able to return a FormData but I'd like to use axios instead since all my codebase depends on axios:

async  sendRequest(file) {
    const form = new FormData();
    form.append("file", file);
     const response = await fetch("https://example.com",  {
        method: "POST",
        body: form
      });
	 return await response.formData();
  }

Thanks

You must be logged in to vote

Replies: 1 comment · 3 replies

Comment options

Axios doesn't support formData response, but you can try to handle it manually (not tested):

  const {data} = await axios.get(url, {responseType: 'arraybuffer'});
  const formdata = await new Response(data).formData();
You must be logged in to vote
3 replies
@fgsalomon
Comment options

It doesn't seem to work. The response object is created, but retrieving the formData throws an exception TypeError: Failed to fetch....

  const data = await axios.get(url, {responseType: 'arraybuffer'});
  const response = new Response(data);
  const formdata = await response.formData(); // This is where the exception is thrown
@inkognitro
Comment options

Thanks to @DigitalBrainJS, this actually worked for me by adding the according content-type header to the native Response object headers. The "boundary" definition is required to be able to parse a form data string. See also: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#syntax)

const response = await axios.get(url, {responseType: 'arraybuffer'});
const plainHeaders = response.headers instanceof AxiosHeaders
   ? response.headers.toJSON(true)
   : response.headers;
const nativeResponse = new Response(response.data, {
   headers: {
      'content-type': `${plainHeaders['content-type']}`,
   },
   status: response.status,
   statusText: response.statusText,
});
const formData = nativeResponse.formData();

Might be better to add all headers instead of just content-type.

@DigitalBrainJS
Comment options

@inkognitro You're right- the boundary header is required. In addition, since v1.7.0 you can use the fetch adapter with FormData response type.

const response = await axios.get(url, {adapter: 'fetch', responseType: 'formdata'});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
3 participants
Morty Proxy This is a proxified and sanitized view of the page, visit original site.