added all form items to single page

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css

@@ -31,3 +31,7 @@
     transform: rotate(360deg);
   }
 }
+
+.ant-upload.ant-upload-drag {
+  height: 170px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js

@@ -22,6 +22,8 @@ import Step1 from "./Step1"
 import Step2 from "./Step2"
 import Step3 from "./Step3"
 import styles from "./Style.less"
+import IconImage from "./IconImg"
+import UploadScreenshots from "./UploadScreenshots"
 
 const Paragraph = Typography;
 const Dragger = Upload.Dragger;
@@ -40,6 +42,23 @@ const routes = [
     },
 ];
 
+const props = {
+    name: 'file',
+    multiple: true,
+    action: '//jsonplaceholder.typicode.com/posts/',
+    onChange(info) {
+        const status = info.file.status;
+        if (status !== 'uploading') {
+            console.log(info.file, info.fileList);
+        }
+        if (status === 'done') {
+            message.success(`${info.file.name} file uploaded successfully.`);
+        } else if (status === 'error') {
+            message.error(`${info.file.name} file upload failed.`);
+        }
+    },
+};
+
 const Step = Steps.Step;
 
 const steps = [{
@@ -238,7 +257,35 @@ class AddNewApp extends React.Component {
                                             </Form>
                                         </div>
                                     </Col>
-                                    <Col span={12}>
+                                    <Col span={12} style={{paddingTop:40}}>
+                                        <p>Application</p>
+                                        <div style={{height:170}}>
+                                            <Dragger {...props}>
+                                                <p className="ant-upload-drag-icon">
+                                                    <Icon type="inbox" />
+                                                </p>
+                                                <p className="ant-upload-text">Click or drag file to this area to upload</p>
+                                                <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+                                            </Dragger>
+                                        </div>
+                                        <Row style={{marginTop:40}}>
+                                            <Col span={12}>
+                                                <p>Icon</p>
+                                                <IconImage/>
+                                            </Col>
+                                            <Col span={12}>
+                                                <p>Banner</p>
+                                                <IconImage/>
+                                            </Col>
+                                        </Row>
+
+
+                                        <Row style={{marginTop:40}}>
+                                            <Col span={24}>
+                                                <p>Screenshots</p>
+                                                <UploadScreenshots/>
+                                            </Col>
+                                        </Row>
 
                                     </Col>
                                 </Row>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/IconImg.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { Upload, Icon, message } from 'antd';
+
+function getBase64(img, callback) {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+}
+
+function beforeUpload(file) {
+    const isJPG = file.type === 'image/jpeg';
+    if (!isJPG) {
+        message.error('You can only upload JPG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+        message.error('Image must smaller than 2MB!');
+    }
+    return isJPG && isLt2M;
+}
+
+
+class IconImage extends React.Component {
+    state = {
+        loading: false,
+    };
+
+    handleChange = (info) => {
+        if (info.file.status === 'uploading') {
+            this.setState({ loading: true });
+            return;
+        }
+        if (info.file.status === 'done') {
+            // Get this url from response in real world.
+            getBase64(info.file.originFileObj, imageUrl => this.setState({
+                imageUrl,
+                loading: false,
+            }));
+        }
+    }
+
+    render() {
+        const uploadButton = (
+            <div>
+                <Icon type={this.state.loading ? 'loading' : 'plus'} />
+                <div className="ant-upload-text">Upload</div>
+            </div>
+        );
+        const imageUrl = this.state.imageUrl;
+        return (
+            <Upload
+                name="avatar"
+                listType="picture-card"
+                className="avatar-uploader"
+                showUploadList={false}
+                action="//jsonplaceholder.typicode.com/posts/"
+                beforeUpload={beforeUpload}
+                onChange={this.handleChange}
+            >
+                {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
+            </Upload>
+        );
+    }
+}
+
+export default IconImage;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Upload, Icon, Modal} from 'antd';
+
+
+class UploadScreenshots extends React.Component {
+    state = {
+        previewVisible: false,
+        previewImage: '',
+        fileList: [{
+            uid: '-1',
+            name: 'xxx.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        }],
+    };
+
+    handleCancel = () => this.setState({ previewVisible: false })
+
+    handlePreview = (file) => {
+        this.setState({
+            previewImage: file.url || file.thumbUrl,
+            previewVisible: true,
+        });
+    }
+
+    handleChange = ({ fileList }) => this.setState({ fileList })
+
+    render() {
+        const { previewVisible, previewImage, fileList } = this.state;
+        const uploadButton = (
+            <div>
+                <Icon type="plus" />
+                <div className="ant-upload-text">Upload</div>
+            </div>
+        );
+        return (
+            <div className="clearfix">
+                <Upload
+                    action="//jsonplaceholder.typicode.com/posts/"
+                    listType="picture-card"
+                    fileList={fileList}
+                    onPreview={this.handlePreview}
+                    onChange={this.handleChange}
+                >
+                    {fileList.length >= 3 ? null : uploadButton}
+                </Upload>
+                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
+                </Modal>
+            </div>
+        );
+    }
+}
+export default UploadScreenshots;