Form submission with the file attached

Uploading files to the server with a form requires a multipart form submission in contrast to the stringed object sent in the previous implementation. We will modify the EditProfile component to use the FormData API to store the form data in the format needed for encoding type multipart/form-data.

First, we need to initialize FormData in componentDidMount().

mern-social/client/user/EditProfile.js:

this.userData = new FormData() 

Next, we will update the input handleChange function to store input values for both the text fields and the file input in FormData.

mern-social/client/user/EditProfile.js:

handleChange = name => event => {  const value = name === 'photo'    ? event.target.files[0] : event.target.value ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.