image upload

android/app/build.gradle

@@ -122,6 +122,7 @@ def enableHermes = project.ext.react.get("enableHermes", false);
 
 android {
     compileSdkVersion 31
+    buildToolsVersion "27.0.3"
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_1_8
@@ -131,6 +132,7 @@ android {
         configurations.all {
             resolutionStrategy { force 'androidx.core:core-ktx:1.6.0' }
         }
+        vectorDrawables.useSupportLibrary = true
         applicationId "com.agile24x7"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion

android/app/src/main/AndroidManifest.xml

 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.agile24x7">
 
+  <uses-permission android:name="android.permission.CAMERA"/>
+  <uses-feature android:name="android.hardware.camera" android:required="false" />
+<uses-feature android:name="android.hardware.camera.front" android:required="false" />
     <uses-permission android:name="android.permission.INTERNET" />
 
     <application

android/build.gradle

@@ -29,9 +29,9 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../node_modules/jsc-android/dist")
         }
-
         google()
         jcenter()
         maven { url 'https://www.jitpack.io' }
+         maven { url 'https://maven.google.com' }
     }
 }

package-lock.json

@@ -13339,6 +13339,11 @@
         }
       }
     },
+    "react-native-image-crop-picker": {
+      "version": "0.37.2",
+      "resolved": "https://registry.npmjs.org/react-native-image-crop-picker/-/react-native-image-crop-picker-0.37.2.tgz",
+      "integrity": "sha512-YwZXW21Km8+3tSt0smTaLVgY4398c0/OJcpcH6EP0JDOt1BNNxl/R8m6qdvnwdXdIoa0CCnMVW6TL9IN5ia9OA=="
+    },
     "react-native-indicators": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-native-indicators/-/react-native-indicators-0.17.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "react-native-dropdown-picker": "^4.0.4",
     "react-native-events-calendar": "^1.0.8",
     "react-native-gesture-handler": "^1.9.0",
+    "react-native-image-crop-picker": "^0.37.2",
     "react-native-indicators": "^0.17.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.3",
     "react-native-material-textfield": "git+https://github.com/javarahulsharma/react-native-material-textfield.git",

src/CommonComponents/TaskChat.js

@@ -31,6 +31,7 @@ import NetInfo from '@react-native-community/netinfo';
 import { API } from "../WebServices/RestClient";
 import log from '../LogFile/Log';
 import { EMPLOYEEID } from './Header';
+import ImagePicker from 'react-native-image-crop-picker';
 
 
 export default class TaskChat extends Component {
@@ -239,7 +240,7 @@ export default class TaskChat extends Component {
                   }
 
                   //Concat List of Group Members
-                  details = details + "," + h[i-1];
+                  details = details + "," + h[i - 1];
                   console.warn("Details" + details)
                   this.setState({
                     groupList: details.replace("Admin(admin),", "")
@@ -517,7 +518,7 @@ export default class TaskChat extends Component {
               console.warn(responseJson)
 
               if (responseJson.status === 'True') {
-                console.warn(responseJson);
+                // alert("messages" + JSON.stringify(responseJson));
                 this.setState({
                   dataSource: responseJson.data,
                 });
@@ -624,41 +625,85 @@ export default class TaskChat extends Component {
       const userToken = response[1][1];
       AsyncStorage.getItem("projectId", (err, res) => {
         const projectId = res;
-      this.setState({ itemPressedDisabled: true })
-      fetch(API + 'user_story_chat.php', {
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-
-          action: 'send',
-          groupId: groupId,
-          corp_code: cropcode,
-          message: message,
-          messagedBy: userToken,
-          groupName: this.state.groupName,
-          groupEmail: groupEmail,
-          projectId: projectId,
-
-        })
-      }).then((response) => response.json())
-        .then((responseJson) => {
-          this.getMessages();
-          this.setState({
-            message: '',
-             itemPressedDisabled: false ,
+        this.setState({ itemPressedDisabled: true })
+        fetch(API + 'user_story_chat.php', {
+          method: 'POST',
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+
+            action: 'send',
+            groupId: groupId,
+            corp_code: cropcode,
+            message: message,
+            messagedBy: userToken,
+            groupName: this.state.groupName,
+            groupEmail: groupEmail,
+            projectId: projectId,
+
+          })
+        }).then((response) => response.json())
+          .then((responseJson) => {
+            this.getMessages();
+            this.setState({
+              message: '',
+              itemPressedDisabled: false,
+            });
+            //message:this.state.message=''
+          }).catch((error) => {
+            console.error(error);
+            log("Error", "send message error");
           });
-          //message:this.state.message=''
-        }).catch((error) => {
-          console.error(error);
-          log("Error", "send message error");
-        });
-    });
+      });
     });
   }
 
+
+  uploadFile(mediaType) {
+    ImagePicker.openPicker({
+      width: 300,
+      height: 400,
+      cropping: true
+    })
+
+      .then((image) => {
+        console.log('received image', image);
+
+        this.setState({
+          image: {
+            uri: image.path,
+            width: image.width,
+            height: image.height,
+            mime: image.mime,
+          },
+          images: null,
+        });
+
+        fetch(API + 'user_story_details1.php',
+          {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              action: 'uri',
+              corp_code: image.uri,
+              groupId: image.mime
+
+            })
+          })
+      })
+      .catch((e) => {
+        console.log(e);
+        Alert.alert(e.message ? e.message : e);
+      });
+  };
+
+
+
   renderDate = (date) => {
     return (
       <Text style={styles.time}>
@@ -690,7 +735,7 @@ export default class TaskChat extends Component {
               <Icon name="arrow-left" size={20} style={{ color: '#fff', paddingTop: 15 }}
                 onPress={() =>
                   this.props.navigation.goBack()} />
-              <Body style={{ paddingLeft: 10}}>
+              <Body style={{ paddingLeft: 10 }}>
                 <Title>{this.state.groupName}</Title>
                 <Text style={{ fontSize: 10 }}>{this.state.groupList}</Text>
               </Body>
@@ -721,7 +766,10 @@ export default class TaskChat extends Component {
                         <View style={[styles.item, itemStyle]}>
                           <View style={{ padding: 5, }}>
                             {itemStyle === styles.itemOut ? left : right}
-                            <Text>{item.message}</Text>
+                           
+                            <Image source={{uri:item.path}} style={item.path.length !== 0 ? styles.imageview : styles.msgview} />
+                            {item.path.length !== 0 ? null : <Text>{item.message}</Text>}
+     
                             {!inMessage && this.renderDate(item.messagedTime)}
                             {inMessage && this.renderDate(item.messagedTime)}
                           </View>
@@ -744,6 +792,10 @@ export default class TaskChat extends Component {
                     value={this.state.message} />
                 </View>
 
+                <TouchableOpacity onPress={() => { this.uploadFile() }}>
+                  <Text>upload file</Text>
+                </TouchableOpacity>
+
                 <TouchableOpacity style={styles.btnSend} disabled={this.state.itemPressedDisabled} onPress={() => { this.sendMessageText() }}>
                   {/* <Image source={{uri:"https://png.icons8.com/small/75/ffffff/filled-sent.png"}} style={styles.iconSend}  /> */}
                   <Image source={require('../Images/sent.png')} style={styles.iconSend} />
@@ -801,6 +853,14 @@ const styles = StyleSheet.create({
     alignItems: 'baseline',
 
   },
+  imageview:{
+    width: 350,
+    resizeMode: 'contain', height: 200,
+  },
+  msgview:{
+    width: 0, height: 0
+  },
+
   inputs: {
     height: 40,
     marginLeft: 16,