101 lines
2.7 KiB
JavaScript
101 lines
2.7 KiB
JavaScript
import { h, Component } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { Button } from '@crayons';
|
|
import { generateMainImage } from '../actions';
|
|
import { validateFileInputs } from '../../packs/validateFileInputs';
|
|
|
|
export class ArticleCoverImage extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
uploadError: false,
|
|
uploadErrorMessage: null,
|
|
};
|
|
}
|
|
|
|
handleMainImageUpload = (e) => {
|
|
e.preventDefault();
|
|
|
|
this.clearUploadError();
|
|
const validFileInputs = validateFileInputs();
|
|
|
|
if (validFileInputs) {
|
|
const payload = { image: e.target.files, wrap_cloudinary: true };
|
|
const { onMainImageUrlChange } = this.props;
|
|
|
|
generateMainImage(payload, onMainImageUrlChange, this.onUploadError);
|
|
}
|
|
};
|
|
|
|
clearUploadError = () => {
|
|
this.setState({
|
|
uploadError: false,
|
|
uploadErrorMessage: null,
|
|
});
|
|
};
|
|
|
|
onUploadError = (error) => {
|
|
this.setState({
|
|
uploadError: true,
|
|
uploadErrorMessage: error.message,
|
|
});
|
|
};
|
|
|
|
triggerMainImageRemoval = (e) => {
|
|
e.preventDefault();
|
|
const { onMainImageUrlChange } = this.props;
|
|
onMainImageUrlChange({
|
|
links: [],
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { mainImage } = this.props;
|
|
const { uploadError, uploadErrorMessage } = this.state;
|
|
const uploadLabel = mainImage ? 'Change' : 'Add a cover image';
|
|
return (
|
|
<div className="crayons-article-form__cover" role="presentation">
|
|
{mainImage && (
|
|
<img
|
|
src={mainImage}
|
|
className="crayons-article-form__cover__image"
|
|
width="250"
|
|
height="105"
|
|
alt="Post cover"
|
|
/>
|
|
)}
|
|
<div className="flex items-center">
|
|
<Button variant="outlined" className="mr-2 whitespace-nowrap">
|
|
<label htmlFor="cover-image-input">{uploadLabel}</label>
|
|
<input
|
|
id="cover-image-input"
|
|
type="file"
|
|
onChange={this.handleMainImageUpload}
|
|
accept="image/*"
|
|
className="w-100 h-100 absolute left-0 right-0 top-0 bottom-0 overflow-hidden opacity-0 cursor-pointer"
|
|
data-max-file-size-mb="25"
|
|
/>
|
|
</Button>
|
|
{mainImage && (
|
|
<Button
|
|
variant="ghost-danger"
|
|
onClick={this.triggerMainImageRemoval}
|
|
>
|
|
Remove
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{uploadError && (
|
|
<p className="articleform__uploaderror">{uploadErrorMessage}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ArticleCoverImage.propTypes = {
|
|
mainImage: PropTypes.string.isRequired,
|
|
onMainImageUrlChange: PropTypes.func.isRequired,
|
|
};
|
|
|
|
ArticleCoverImage.displayName = 'ArticleCoverImage';
|