0.2.05A2

src/components/PostCreator/index.js

@@ -48,12 +48,13 @@ class PostCreator extends React.PureComponent{
     }
 
     handleFileUpload = info => {
-        console.log('handle')
+        console.log(info.file.originFileObj)
         if (info.file.status === 'uploading') {
           this.setState({ loading: true });
           return;
         }
         if (info.file.status === 'done') {
+          this.ToogleUpload()
           // Get this url from response in real world.
           getBase64(info.file.originFileObj, imageUrl =>
             this.setState({
@@ -93,7 +94,7 @@ class PostCreator extends React.PureComponent{
     }
 
     handlePublishPost = (e) => {
-        const { rawtext, shareWith, imageUrl} = this.state;
+        const { rawtext, shareWith, imageUrl } = this.state;
         let postFile;
         if (imageUrl) {
             console.log('EXIST                   ',imageUrl)
@@ -114,6 +115,21 @@ class PostCreator extends React.PureComponent{
            RefreshFeed()
         })
     }
+    OpenControl = () =>{
+        let controls = [(
+            <div> <antd.Button onClick={() => this.ResetUpload()} icon={<Icons.DeleteOutlined />} /> </div>
+        )]
+        ycore.ControlBar.set(controls)
+    }
+    CloseControl = () =>{
+        ycore.ControlBar.close()
+    }
+    ResetUpload (){
+        this.setState({
+            imageUrl: null
+        })
+        this.ToogleUpload()
+    }
 
     render(){
         const { keys_remaining, visible } = this.state;
@@ -122,7 +138,6 @@ class PostCreator extends React.PureComponent{
             this.setState({ shareWith: key })
         }
           
- 
         const shareOptionsMenu = (
             <antd.Menu onClick={changeShare}>
               <antd.Menu.Item key="any">{ycore.GetPostPrivacy.decorator("any")}</antd.Menu.Item>
@@ -131,39 +146,44 @@ class PostCreator extends React.PureComponent{
               <antd.Menu.Item key="private">{ycore.GetPostPrivacy.decorator("private")}</antd.Menu.Item>
             </antd.Menu>
         )
+
         if (visible) {
         return(
           <div className={styles.cardWrapper}>
              <antd.Card bordered="false">
                 <div className={styles.inputWrapper}>
                     {this.state.UploadActive? 
+                    <div className={styles.uploader}>
                         <antd.Upload.Dragger 
-                            multiple= {true}
-                            listType="picture-card"
-                            className="avatar-uploader"
+                            multiple={false}
+                            listType="picture"
                             showUploadList={false}
                             beforeUpload={this.beforeUpload}
                             onChange={this.handleFileUpload}
                         >
+                            <div>
                                 <p className="ant-upload-drag-icon">
                                   <Icons.InboxOutlined />
                                 </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.
-                            </p>
+                            </div>
                         </antd.Upload.Dragger>
+                     </div>
                      :
-                    <div>
+                    <>
                         <div className={styles.titleAvatar}><img src={userData.avatar} /></div>
                         <antd.Input.TextArea disabled={this.state.posting? true : false} onPressEnter={this.handlePublishPost} value={this.state.rawtext} autoSize={{ minRows: 3, maxRows: 5 }} dragable="false" placeholder="What are you thinking?" onChange={this.handleChanges} allowClear maxLength={ycore.DevOptions.MaxLengthPosts} rows={4} />
                         <div><antd.Button disabled={this.state.posting? true : (keys_remaining < 512? false : true)} onClick={this.handlePublishPost} type="primary" icon={this.state.posting_ok? <Icons.CheckCircleOutlined/> : (this.state.posting? <Icons.LoadingOutlined /> : <Icons.ExportOutlined /> )} /></div>
-                    </div>}
+                    </>}
                 </div>
                 <div className={styles.progressHandler}><antd.Progress strokeWidth="4px" className={this.state.posting? styles.proccessUnset : (keys_remaining < 512? styles.proccessSet : styles.proccessUnset)} status={this.handleKeysProgressBar()}  showInfo={false} percent={percent} /></div>
                 
                 <div className={styles.postExtra} > 
-                    
+                    { this.state.imageUrl? 
+                        <div className={styles.imagePreviewWrapper}>
+                            <img className={styles.imagePreview} src={this.state.imageUrl} /> 
+                        </div> : null
+                    }
                     <antd.Button type="ghost" onClick={() => this.ToogleUpload()} > <Icons.CameraFilled /></antd.Button>
                     <antd.Button type="ghost"> <Icons.VideoCameraFilled /></antd.Button>
                     <antd.Button onClick={this.handleToggleToolbox} type="ghost"><Icons.PlusCircleOutlined /></antd.Button>

src/components/PostCreator/index.less

@@ -158,12 +158,31 @@
     }
 }
 
-.avatar-uploader > .ant-upload {
-    width: 128px;
-    height: 128px;
-
+.uploader {
+    display: flex;
+    position: relative;
+    z-index: 30;
+    width: 100%;
+    height: 100%;
+    span{
+        width: 100%; 
+    }
 }
 
+.imagePreviewWrapper{
+    display: flex;
+    position: relative;
+    z-index: 30;
+    width: 100%;
+    height: 100%;
+    margin: 15px 0 15px 0;
+    .imagePreview{
+        margin: auto;
+        max-width: 300px;
+        object-fit: cover;
+        border-radius: 8px;
+    }
+}
 
 .proccessUnset{
     opacity: 0;