diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index df3708acca..56b1ae82d2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -10,6 +10,7 @@ }, "license": "Apache License 2.0", "dependencies": { + "@babel/polyfill": "^7.6.0", "acorn": "^6.2.0", "antd": "^3.20.1", "axios": "^0.19.0", @@ -38,7 +39,11 @@ "@babel/preset-env": "^7.5.0", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.4.4", + "babel-core": "^6.26.3", "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", "chai": "^4.1.2", "css-loader": "^0.28.11", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js index 196c058771..060b0ec9f6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js @@ -17,7 +17,8 @@ */ 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 = { labelCol: { @@ -32,6 +33,15 @@ const formItemLayout = { const {Option} = Select; 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 { constructor(props) { @@ -42,7 +52,12 @@ class NewAppUploadForm extends React.Component { loading: false, binaryFiles: [], 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(); - if (specificElements.hasOwnProperty("binaryFile")) { - data.append('binaryFile', binaryFile[0].originFileObj); + if (specificElements.hasOwnProperty("binaryFile") && this.state.binaryFiles.length !== 1) { + 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('screenshot1', screenshots[0].originFileObj); + data.append('screenshot2', screenshots[1].originFileObj); + data.append('screenshot3', screenshots[2].originFileObj); + if (specificElements.hasOwnProperty("binaryFile")) { + data.append('binaryFile', binaryFile[0].originFileObj); + } + this.props.onSuccessReleaseData({data, release}); } - - data.append('icon', icon[0].originFileObj); - data.append('screenshot1', screenshots[0].originFileObj); - data.append('screenshot2', screenshots[1].originFileObj); - data.append('screenshot3', screenshots[2].originFileObj); - - this.props.onSuccessReleaseData({data, release}); } }); }; - handleIconChange = ({fileList}) => this.setState({icons: fileList}); - handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList}); + handleIconChange = ({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) => { 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() { const {formConfig} = this.props; 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 = ( +
+ +
Select
+
+ ); return (
@@ -137,7 +216,10 @@ class NewAppUploadForm extends React.Component { onSubmit={this.handleSubmit} > {formConfig.specificElements.hasOwnProperty("binaryFile") && ( - + {getFieldDecorator('binaryFile', { valuePropName: 'binaryFile', getValueFromEvent: this.normFile, @@ -159,7 +241,10 @@ class NewAppUploadForm extends React.Component { )} - + {getFieldDecorator('icon', { valuePropName: 'icon', getValueFromEvent: this.normFile, @@ -168,25 +253,20 @@ class NewAppUploadForm extends React.Component { })( false} + onPreview={this.handlePreview} > - {icons.length !== 1 && ( - - )} + {icons.length === 1 ? null : uploadButton} , )} - - - - - - - + {getFieldDecorator('screenshots', { valuePropName: 'icon', getValueFromEvent: this.normFile, @@ -195,18 +275,11 @@ class NewAppUploadForm extends React.Component { })( false} - multiple - > - - {screenshots.length < 3 && ( - - )} - - + onPreview={this.handlePreview}> + {screenshots.length >= 3 ? null : uploadButton} , )} @@ -331,6 +404,9 @@ class NewAppUploadForm extends React.Component { + + Preview Image +
); }