April 2020
Intermediate to advanced
716 pages
18h 55m
English
We will utilize the HTML5 file input type to let the user select an image from their local files. The file input will return the filename in the change event when the user selects a file. We will add the file input element to the edit profile form as follows:
mern-social/client/user/EditProfile.js:
<input accept="image/*" type="file" onChange={handleChange('photo')} style={{display:'none'}} id="icon-button-file" />
To integrate this file input element with Material-UI components, we apply display:none to hide the input element from the view, then add a Material-UI button inside the label for this file input. This way, the view displays the Material-UI button instead of the HTML5 file input element. The label ...
Read now
Unlock full access