I am trying to create an interface that allows users to manage data stored in posts that pertain to them without actually giving them access to the custom post type that is storing that data.
Everything else is working fine, but I want to add a way for them to upload a profile picture from this page which is being presented in a React app. All of the other elements load just fine, like TextControl and SelectControl, etc. However, I am having a hard time getting MediaUpload to activate outside of the block editor.
Is there some way that I can make it so that I can use it in my react app, so that they can upload the profile pic?
Below is some of the code:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import ReactPhoneInput from 'react-phone-input-2'
let { Button, SelectControl, TextControl, ToggleControl } = window.wp.components
let { MediaUpload, RichText } = window.wp.editor
class ClassmateProfile extends Component {
constructor (props) {
super(props)
this.state = {
pageID: USNA1978.pageID,
aboutDetails: USNA1978.aboutDetails,
aboutImage1: USNA1978.aboutImage1,
aboutImage2: USNA1978.aboutImage2,
firstName: USNA1978.firstName,
middleName: USNA1978.middleName,
lastName: USNA1978.lastName,
//...
}
}
render () {
if (this.state.pageID) {
return (
<div className='profile-layout'>
<div className='left-side'>
<div className='panel panel-default'>
<div className='panel-heading'>
<strong>About</strong>
</div>
<div className='panel-body'>
<div className='image-grid'>
<div>
{(() => {
if (this.state.aboutImage1) {
return <img alt='Current Photo' src={this.state.aboutImage1} />
} else {
return <span>Graduation Photo</span>
}
})()}
</div>
<div>
{(() => {
if (this.state.aboutImage2) {
return <img alt='Current Photo' src={this.state.aboutImage2} />
} else {
return <span>Graduation Photo</span>
}
})()}
<MediaUpload
value={this.state.aboutImage2}
onSelect={media => this.setState({ aboutImage2: media.url })}
render={({ open }) => (
<Button className='button button-large sidebar-detail-icon-button' onClick={open}>
{!this.state.aboutImage2 ? 'Upload/Select Photo' : 'Change Photo'}
</Button>
)}
/>
</div>
</div>
<RichText
tag='p'
value={this.state.aboutDetails}
onChange={value => this.setState({ aboutDetails: value })}
placeholder='Click here to add details about this classmate...'
/>
</div>
</div>
<!-- ... -->
</div>
<div className='right-side'>
<div className='panel panel-default'>
<div className='panel-heading'>
<strong>Contact Info</strong>
</div>
<div className='panel-body'>
<table className='borderless'>
<tr>
<th colSpan='2'>Name & Company</th>
</tr>
<tr>
<td>
<label htmlFor='firstName'>First Name</label>
</td>
<td>
<TextControl
value={this.state.firstName}
onChange={value => this.setState({ firstName: value })}
/>
</td>
</tr>
<tr>
<td>
<label htmlFor='middleName'>Middle Name</label>
</td>
<td>
<TextControl
value={this.state.middleName}
onChange={value => this.setState({ middleName: value })}
/>
</td>
</tr>
<tr>
<td>
<label htmlFor='lastName'>Last Name</label>
</td>
<td>
<TextControl
value={this.state.lastName}
onChange={value => this.setState({ lastName: value })}
/>
</td>
</tr>
<!-- ... -->
</table>
</div>
</div>
</div>
</div>
)
}
}
}
if (document.getElementById('edit_classmate_profile')) {
ReactDOM.render(<ClassmateProfile />, document.getElementById('edit_classmate_profile'))
}
