Full-Stack React Projects - Second Edition

Form submission with the file attached

Uploading files to the server with a form requires a multipart form submission. This is in contrast to the stringified object we sent in previous implementations of fetch. We will modify the EditProfile component so that it uses the FormData API to store the form data in the format needed for encoding in the multipart/form-data type.

You can learn more about the FormData API at developer.mozilla.org/en-US/docs/Web/API/FormData.

First, we will update the input handleChange function so that we can store input values for both the text fields and the file input, as shown in the following code.

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

const handleChange = name => event => {  const value = name === 'photo'