From 80e489fab1d4d121a243987268c78a01f89323b1 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Tue, 14 Jul 2020 16:37:46 -0500
Subject: [PATCH] Updated FileInput with more customizable features,
 GroupCreate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- FileInput with more customizable features
- GroupCreate file input
---
 .../gabsocial/components/file_input.js        | 35 +++++++++++++++----
 .../gabsocial/features/group_create.js        |  8 ++++-
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/app/javascript/gabsocial/components/file_input.js b/app/javascript/gabsocial/components/file_input.js
index c9b3e8d1..b84eda89 100644
--- a/app/javascript/gabsocial/components/file_input.js
+++ b/app/javascript/gabsocial/components/file_input.js
@@ -1,3 +1,5 @@
+import { CX } from '../constants'
+import Icon from './icon'
 import Image from './image'
 import Text from './text'
 
@@ -9,12 +11,16 @@ export default class FileInput extends PureComponent {
     fileType: PropTypes.string,
     disabled: PropTypes.bool,
     title: PropTypes.string,
+    id: PropTypes.string.isRequired,
     height: PropTypes.string,
     width: PropTypes.string,
+    isBordered: PropTypes.bool,
+    className: PropTypes.string,
   }
 
   static defaultProps = {
-    fileType: 'image'
+    fileType: 'image',
+    isBordered: false,
   }
 
   state = {
@@ -30,14 +36,31 @@ export default class FileInput extends PureComponent {
 
   render() {
     const {
+      id,
       fileType,
       disabled,
       title,
       height,
       width,
+      className,
+      isBordered,
     } = this.props
     const { file } = this.state
 
+    const containerClasses = CX(className, {
+      default: 1,
+      alignItemsCenter: 1,
+      cursorPointer: 1,
+      justifyContentCenter: 1,
+      overflowHidden: true,
+      radiusSmall: isBordered,
+      px10: isBordered,
+      py10: isBordered,
+      border2PX: isBordered,
+      borderColorSecondary: isBordered,
+      borderDashed: isBordered,
+    })
+
     return (
       <div>
         {
@@ -50,8 +73,8 @@ export default class FileInput extends PureComponent {
         }
 
         <label
-          className={[_s.default, _s.alignItemsCenter, _s.radiusSmall, _s.cursorPointer, _s.px10, _s.py10, _s.justifyContentCenter, _s.border2PX, _s.borderColorSecondary, _s.borderDashed].join(' ')}
-          htmlFor={`file-input-${title}`}
+          className={containerClasses}
+          htmlFor={`file-input-${id}`}
           style={{
             width,
             height,
@@ -64,15 +87,13 @@ export default class FileInput extends PureComponent {
           {
             !file &&
             <div className={[_s.posAbs, _s.cursorPointer].join(' ')}>
-              <Text size='medium' color='secondary'>
-                Click Here to Upload
-              </Text>
+              <Icon id='add-image' size='32px' className={_s.fillSecondary} />
             </div>
           }
         </label>
 
         <input
-          id={`file-input-${title}`}
+          id={`file-input-${id}`}
           className={_s.displayNone}
           disabled={disabled}
           onChange={this.handleOnChange}
diff --git a/app/javascript/gabsocial/features/group_create.js b/app/javascript/gabsocial/features/group_create.js
index ca8c2672..7b555a86 100644
--- a/app/javascript/gabsocial/features/group_create.js
+++ b/app/javascript/gabsocial/features/group_create.js
@@ -114,7 +114,11 @@ class GroupCreate extends ImmutablePureComponent {
 	}
 
 	handleCoverImageChange = (e) => {
-		this.props.onCoverImageChange(e.target.files[0])
+		try {
+      this.props.onCoverImageChange(e.target.files[0])
+    } catch (error) {
+     // 
+    }
 	}
 
 	handleSubmit = (e) => {
@@ -165,11 +169,13 @@ class GroupCreate extends ImmutablePureComponent {
 
 				<FileInput
 					disabled={isSubmitting}
+					id='group-cover-photo'
 					title={intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
 					onChange={this.handleCoverImageChange}
 					file={group ? group.get('cover_image_url') : undefined}
 					width='340px'
 					height='145px'
+					isBordered
 				/>
 
 				<Divider isInvisible />