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