bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SoapboxConfig: Actually upload the logo and banner files

Browse source
This commit is contained in:
Alex Gleason 2020-08-23 21:35:33 -05:00
parent 27c852481e
commit 91e860a67b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/soapbox/features/soapbox_config/index.js
View file

@ -18,6 +18,7 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { updateAdminConfig } from 'soapbox/actions/admin'; import { updateAdminConfig } from 'soapbox/actions/admin';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { defaultConfig } from 'soapbox/actions/soapbox'; import { defaultConfig } from 'soapbox/actions/soapbox';
import { uploadMedia } from 'soapbox/actions/media';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' }, heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@ -90,6 +91,16 @@ class SoapboxConfig extends ImmutablePureComponent {
}; };
}; };
handleFileChange = path => {
return e => {
const data = new FormData();
data.append('file', e.target.files[0]);
this.props.dispatch(uploadMedia(data)).then(({ data }) => {
this.handleChange(path, e => data.url)(e);
}).catch(() => {});
};
};
handleAddItem = (path, template) => { handleAddItem = (path, template) => {
return e => { return e => {
this.setConfig( this.setConfig(
@ -139,7 +150,7 @@ class SoapboxConfig extends ImmutablePureComponent {
<SimpleForm onSubmit={this.handleSubmit}> <SimpleForm onSubmit={this.handleSubmit}>
<fieldset disabled={this.state.isLoading}> <fieldset disabled={this.state.isLoading}>
<FieldsGroup> <FieldsGroup>
<div className='fields-row'> <div className='fields-row file-picker'>
<div className='fields-row__column fields-row__column-6'> <div className='fields-row__column fields-row__column-6'>
<img src={soapbox.get('logo')} /> <img src={soapbox.get('logo')} />
</div> </div>
@ -148,11 +159,11 @@ class SoapboxConfig extends ImmutablePureComponent {
label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />} label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
name='logo' name='logo'
hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be downscaled to 50px height, maintaining aspect ratio' />} hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be downscaled to 50px height, maintaining aspect ratio' />}
// onChange={this.handleFileChange} onChange={this.handleFileChange(['logo'])}
/> />
</div> </div>
</div> </div>
<div className='fields-row'> <div className='fields-row file-picker'>
<div className='fields-row__column fields-row__column-6'> <div className='fields-row__column fields-row__column-6'>
<img src={soapbox.get('banner')} /> <img src={soapbox.get('banner')} />
</div> </div>
@ -161,7 +172,7 @@ class SoapboxConfig extends ImmutablePureComponent {
label={<FormattedMessage id='soapbox_config.fields.banner_label' defaultMessage='Banner' />} label={<FormattedMessage id='soapbox_config.fields.banner_label' defaultMessage='Banner' />}
name='banner' name='banner'
hint={<FormattedMessage id='soapbox_config.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be downscaled to 400x400px' />} hint={<FormattedMessage id='soapbox_config.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be downscaled to 400x400px' />}
// onChange={this.handleFileChange} onChange={this.handleFileChange(['banner'])}
/> />
</div> </div>
</div> </div>

4
app/styles/forms.scss
View file

@ -984,3 +984,7 @@ code {
margin-top: 10px; margin-top: 10px;
} }
} }
.file-picker img {
max-width: 100px;
}