May 2018
Intermediate to advanced
470 pages
13h 54m
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.
mern-social/client/user/EditProfile.js:
<input accept="image/*" type="file" onChange={this.handleChange('photo')} style={{display:'none'}} id="icon-button-file" />
To integrate this file input with Material-UI components, we apply display:none to hide the input element from 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.
mern-social/client/user/EditProfile.js:
<label htmlFor="icon-button-file"> <Button variant="raised" ...
Read now
Unlock full access