Add image upload previews and validation in add new app form

feature/appm-store/pbac
Jayasanka 5 years ago
parent a2341e8afc
commit 740ad2a6b7

@ -10,6 +10,7 @@
}, },
"license": "Apache License 2.0", "license": "Apache License 2.0",
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.6.0",
"acorn": "^6.2.0", "acorn": "^6.2.0",
"antd": "^3.20.1", "antd": "^3.20.1",
"axios": "^0.19.0", "axios": "^0.19.0",
@ -38,7 +39,11 @@
"@babel/preset-env": "^7.5.0", "@babel/preset-env": "^7.5.0",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@babel/register": "^7.4.4", "@babel/register": "^7.4.4",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
"chai": "^4.1.2", "chai": "^4.1.2",
"css-loader": "^0.28.11", "css-loader": "^0.28.11",

@ -17,7 +17,8 @@
*/ */
import React from "react"; import React from "react";
import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber} from "antd"; import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal} from "antd";
import "@babel/polyfill";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
@ -32,6 +33,15 @@ const formItemLayout = {
const {Option} = Select; const {Option} = Select;
const {TextArea} = Input; const {TextArea} = Input;
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
class NewAppUploadForm extends React.Component { class NewAppUploadForm extends React.Component {
constructor(props) { constructor(props) {
@ -42,7 +52,12 @@ class NewAppUploadForm extends React.Component {
loading: false, loading: false,
binaryFiles: [], binaryFiles: [],
application: null, application: null,
isFree: true isFree: true,
previewVisible: false,
previewImage: '',
binaryFileHelperText: '',
iconHelperText: '',
screenshotHelperText: ''
} }
} }
@ -93,24 +108,61 @@ class NewAppUploadForm extends React.Component {
const data = new FormData(); const data = new FormData();
if (specificElements.hasOwnProperty("binaryFile")) { if (specificElements.hasOwnProperty("binaryFile") && this.state.binaryFiles.length !== 1) {
data.append('binaryFile', binaryFile[0].originFileObj); this.setState({
} binaryFileHelperText: 'Please select the application'
});
} else if (this.state.icons.length !== 1) {
this.setState({
iconHelperText: 'Please select an icon'
});
} else if (this.state.screenshots.length !== 3) {
this.setState({
screenshotHelperText: 'Please select 3 screenshots'
});
} else {
data.append('icon', icon[0].originFileObj); data.append('icon', icon[0].originFileObj);
data.append('screenshot1', screenshots[0].originFileObj); data.append('screenshot1', screenshots[0].originFileObj);
data.append('screenshot2', screenshots[1].originFileObj); data.append('screenshot2', screenshots[1].originFileObj);
data.append('screenshot3', screenshots[2].originFileObj); data.append('screenshot3', screenshots[2].originFileObj);
if (specificElements.hasOwnProperty("binaryFile")) {
data.append('binaryFile', binaryFile[0].originFileObj);
}
this.props.onSuccessReleaseData({data, release}); this.props.onSuccessReleaseData({data, release});
} }
}
}); });
}; };
handleIconChange = ({fileList}) => this.setState({icons: fileList}); handleIconChange = ({fileList}) => {
handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList}); if (fileList.length === 1) {
this.setState({
iconHelperText: ''
});
}
this.setState({
icons: fileList
});
};
handleBinaryFileChange = ({fileList}) => {
if (fileList.length === 1) {
this.setState({
binaryFileHelperText: ''
});
}
this.setState({binaryFiles: fileList});
};
handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); handleScreenshotChange = ({fileList}) => {
if (fileList.length === 3) {
this.setState({
screenshotHelperText: ''
});
}
this.setState({
screenshots: fileList
});
};
handlePriceTypeChange = (value) => { handlePriceTypeChange = (value) => {
this.setState({ this.setState({
@ -118,11 +170,38 @@ class NewAppUploadForm extends React.Component {
}); });
}; };
handlePreviewCancel = () => this.setState({previewVisible: false});
handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.setState({
previewImage: file.url || file.preview,
previewVisible: true,
});
};
render() { render() {
const {formConfig} = this.props; const {formConfig} = this.props;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
const {icons, screenshots, binaryFiles, isFree} = this.state; const {
icons,
screenshots,
binaryFiles,
isFree,
previewImage,
previewVisible,
binaryFileHelperText,
iconHelperText,
screenshotHelperText
} = this.state;
const uploadButton = (
<div>
<Icon type="plus"/>
<div className="ant-upload-text">Select</div>
</div>
);
return ( return (
<div> <div>
@ -137,7 +216,10 @@ class NewAppUploadForm extends React.Component {
onSubmit={this.handleSubmit} onSubmit={this.handleSubmit}
> >
{formConfig.specificElements.hasOwnProperty("binaryFile") && ( {formConfig.specificElements.hasOwnProperty("binaryFile") && (
<Form.Item {...formItemLayout} label="Application"> <Form.Item {...formItemLayout}
label="Application"
validateStatus="error"
help={binaryFileHelperText}>
{getFieldDecorator('binaryFile', { {getFieldDecorator('binaryFile', {
valuePropName: 'binaryFile', valuePropName: 'binaryFile',
getValueFromEvent: this.normFile, getValueFromEvent: this.normFile,
@ -159,7 +241,10 @@ class NewAppUploadForm extends React.Component {
</Form.Item> </Form.Item>
)} )}
<Form.Item {...formItemLayout} label="Icon"> <Form.Item {...formItemLayout}
label="Icon"
validateStatus="error"
help={iconHelperText}>
{getFieldDecorator('icon', { {getFieldDecorator('icon', {
valuePropName: 'icon', valuePropName: 'icon',
getValueFromEvent: this.normFile, getValueFromEvent: this.normFile,
@ -168,25 +253,20 @@ class NewAppUploadForm extends React.Component {
})( })(
<Upload <Upload
name="logo" name="logo"
listType="picture-card"
onChange={this.handleIconChange} onChange={this.handleIconChange}
beforeUpload={() => false} beforeUpload={() => false}
onPreview={this.handlePreview}
> >
{icons.length !== 1 && ( {icons.length === 1 ? null : uploadButton}
<Button>
<Icon type="upload"/> Click to upload
</Button>
)}
</Upload>, </Upload>,
)} )}
</Form.Item> </Form.Item>
<Row style={{marginTop: 40}}> <Form.Item {...formItemLayout}
<Col span={24}> label="Screenshots"
validateStatus="error"
</Col> help={screenshotHelperText}>
</Row>
<Form.Item {...formItemLayout} label="Screenshots">
{getFieldDecorator('screenshots', { {getFieldDecorator('screenshots', {
valuePropName: 'icon', valuePropName: 'icon',
getValueFromEvent: this.normFile, getValueFromEvent: this.normFile,
@ -195,18 +275,11 @@ class NewAppUploadForm extends React.Component {
})( })(
<Upload <Upload
name="screenshots" name="screenshots"
listType="picture-card"
onChange={this.handleScreenshotChange} onChange={this.handleScreenshotChange}
beforeUpload={() => false} beforeUpload={() => false}
multiple onPreview={this.handlePreview}>
> {screenshots.length >= 3 ? null : uploadButton}
{screenshots.length < 3 && (
<Button>
<Icon type="upload"/> Click to upload
</Button>
)}
</Upload>, </Upload>,
)} )}
</Form.Item> </Form.Item>
@ -331,6 +404,9 @@ class NewAppUploadForm extends React.Component {
</Form> </Form>
</Col> </Col>
</Row> </Row>
<Modal visible={previewVisible} footer={null} onCancel={this.handlePreviewCancel}>
<img alt="Preview Image" style={{width: '100%'}} src={previewImage}/>
</Modal>
</div> </div>
); );
} }

Loading…
Cancel
Save