Formdata is blank at the backend

Question

I pass image data by appending with formdata in reactjs

This is the handler for this

handleUserImage(e) {
    const input = e.target
    if (input.files && input.files[0]) {
      const reader = new FileReader()
      reader.onload = (r) => {
        const formdata = new FormData()
        formdata.append('photos', input.files[0])
        formdata.append('fileName', input.files[0].name)
        this.props.uploadImage({ image: formdata })
      }
      reader.readAsDataURL(input.files[0])
    }
  }

and when I console it to backend it looks like blank object

{ image: {} }

Then how can I pass formdata and upload the image

Edit : Upload image api call

export const uploadImage = (data) => {
  console.log(data)
  return fetch(`http://hostName:3001/town/image`, {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    body: data
  })
  .then((res) => {
    return res.json()
  })
  .then((payload) => {
    console.log(payload)
    return payload
  }).catch((error) => {
   throw error
  })
}

What does your `this.props.uploadImage` look like? – Tholle Nov 29 '18 at 08:34 — Tholle, Nov 29 '18 at 08:34
@Tholle Sorry for the late reply. I have updated my answer. – Dark Knight Nov 29 '18 at 09:28 — Dark Knight, Nov 29 '18 at 09:28

Quentin · Accepted Answer · 2018-11-29T10:32:07.640

1

when I console it to backend it looks like blank object

This is normal.

 headers: {
       'Content-Type': 'multipart/form-data'
 },

Multipart form data MIME types need to have a parameter to describe the boundary marker (so parsers know where one field ends and the next begins).

Yours is missing it. What's more, there is no way for you to know what it will be.

Don't override the Content-Type header, allow fetch to generate it from the FormData object. Remove the code I quoted entirely.

edited Nov 29 '18 at 10:32

answered Nov 29 '18 at 10:10

Quentin

914,110
126
1,211
1,335

This worked. Thank you very much!!! But your explanation is gone above my level :-( – Dark Knight Nov 29 '18 at 10:27

score 1 · Answer 2 · answered Nov 29 '18 at 16:37

Why use FileReader, upload it as base64 and append file name separately?

you can just do

handleUserImage (evt) {
  const file = evt.target.files[0]
  if (file) {
    const formdata = new FormData()
    formdata.append('photos', file)
    this.props.uploadImage({ image: formdata })
  }
}

You save a few bytes,
avoid unnecessary decode & encode calculations
runs faster
saves ~3x bandwidth

FormData.append(name, value, filename)

name
The name of the field whose data is contained in value.

value
The field's value. This can be a USVString or Blob (including subclasses such as File).

filename Optional
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob". The default filename for File objects is the file's filename.

-- MDN - FormData.append()

Formdata is blank at the backend

2 Answers2