revisi upload foto lama (1)

package-lock.json

@@ -3082,6 +3082,11 @@
         "fontfaceobserver": "^2.1.0"
       }
     },
+    "expo-image-manipulator": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/expo-image-manipulator/-/expo-image-manipulator-8.0.0.tgz",
+      "integrity": "sha512-7KaQca4szyNllM30ZAnyL7ww83/YJFDl4Yr/4/WglXAKas96WOBztsF7/CPrboEVh/LzfqtSFW0PtyYgrC2o9Q=="
+    },
     "expo-image-picker": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-8.0.2.tgz",
@@ -6770,6 +6775,11 @@
       "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-2.3.1.tgz",
       "integrity": "sha512-c/a2h7/T7yBo5KlNQhcSn4xf4+6Li6LfJ59+GZT1ZzzWrj/6X8DiJ/TJBOlOZMC5tJriZKuRkWSsr74k6z+brw=="
     },
+    "react-native-image-resizer": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-native-image-resizer/-/react-native-image-resizer-1.2.3.tgz",
+      "integrity": "sha512-RDPNJglRmWDZ/7hvu+CbpsKYl6AQmseL8cWX4UkLAHxQWNc5ZdYhP/9avC5xCfyiwkRw+Zmkmv78HO0kt0ewhQ=="
+    },
     "react-native-image-slider-box": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/react-native-image-slider-box/-/react-native-image-slider-box-1.0.12.tgz",

package.json

@@ -25,6 +25,7 @@
     "expo-device": "^2.0.0",
     "expo-file-system": "~8.0.0",
     "expo-font": "^8.0.0",
+    "expo-image-manipulator": "^8.0.0",
     "expo-image-picker": "~8.0.1",
     "expo-localization": "~8.0.0",
     "expo-location": "^8.0.0",
@@ -51,6 +52,7 @@
     "react-native-i18n": "^2.0.15",
     "react-native-image-base64": "^0.1.4",
     "react-native-image-picker": "^2.3.1",
+    "react-native-image-resizer": "^1.2.3",
     "react-native-image-slider-box": "^1.0.12",
     "react-native-loading-spinner-overlay": "^1.1.0",
     "react-native-maps": "^0.26.1",

view/Account.js

@@ -366,7 +366,7 @@ class Account extends React.Component {
 
                                         </View>
                                         <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
-                                            {this.state.premium === false ? (
+                                            {this.state.premium === true ? (
                                                 <TouchableOpacity onPress={() => this.props.navigation.navigate('Upgrade Premium')} style={{ marginBottom: 20, marginRight: 5, marginLeft: 5 }}>
                                                     <Card style={{ width: 200, paddingHorizontal: 10, paddingTop: 20, paddingBottom: 20 }}>
                                                         <View style={{ flex: 1, alignItems: 'center' }}>

view/Camera.js

@@ -7,12 +7,16 @@ import * as ImagePicker from 'expo-image-picker';
 import * as FileSystem from 'expo-file-system';
 import { connect } from 'react-redux';
 import ActionType from '../redux/globalActionType';
+import ImageResizer from 'react-native-image-resizer';
+import * as ImageManipulator from "expo-image-manipulator";
 
 
 class Cameras extends React.Component {
   state = {
     hasPermission: null,
     cameraType: Camera.Constants.Type.back,
+    setReady: true,
+    setImage: null,
   }
 
   async componentDidMount() {
@@ -34,7 +38,6 @@ class Cameras extends React.Component {
 
   handleCameraType = () => {
     const { cameraType } = this.state
-
     this.setState({
       cameraType:
         cameraType === Camera.Constants.Type.back
@@ -44,47 +47,10 @@ class Cameras extends React.Component {
   }
 
   capture() {
-    // console.log('IS SELFIE : ' + this.props.selfie)
-    // console.log('IS IDCARD : ' + this.props.idcard)
     if (this.props.selfie === true) {
-      this.takePictureSelfie()
-      // console.log('ini foto selfie');
+      this.handleTakePictureSelfie()
     } else {
-      this.takePictureIdCard()
-      // console.log('ini foto ktp');
-    }
-  }
-
-  takePictureSelfie = async () => {
-    if (this.camera) {
-      let photo = await this.camera.takePictureAsync({ skipProcessing: true,quality:0.1});
-      let photo_img = photo.uri;
-      const base64 = await FileSystem.readAsStringAsync(photo_img, { encoding: 'base64' });
-      // var set_photo = photo.replace('uri','')
-      let UriProps = {
-        URI: photo_img,
-        // BASE64_SELFIE:photo
-      }
-      this.props.setUriSelfi(UriProps);
-      this.props.navigation.navigate("Upgrade Premium")
-      // console.log(photo);
-      // console.log("ini sudah di pencet" + photo_img)
-    }
-  }
-
-  takePictureIdCard = async () => {
-    if (this.camera) {
-      let photo = await this.camera.takePictureAsync({ skipProcessing: true,quality:0.1 });
-      let photo_img = photo.uri;
-      const base64 = await FileSystem.readAsStringAsync(photo_img, { encoding: 'base64' });
-      // var set_photo = photo.replace('uri','')
-      let UriPropsID = {
-        URI_IDCARD: photo_img,
-        // BASE64_ID: photo
-      }
-      this.props.setUriID(UriPropsID);
-      this.props.navigation.navigate("Upgrade Premium")
-      // console.log("ini sudah di pencet" + photo_img)
+      this.handleTakePictureIdcard()
     }
   }
 
@@ -92,11 +58,9 @@ class Cameras extends React.Component {
     if (this.props.setpickimageSelfie == true) {
       let result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
-        allowsEditing: false, aspect: [4, 3], 
-        quality: 0.1,
       });
       let resultImagePicker = result.uri
-      const base64 = await FileSystem.readAsStringAsync(resultImagePicker, { encoding: 'base64' });
+      // const base64 = await FileSystem.readAsStringAsync(resultImagePicker, { encoding: 'base64' });
       let UriProps = {
         URI: resultImagePicker,
       }
@@ -106,14 +70,14 @@ class Cameras extends React.Component {
       this.props.setUriSelfi(UriProps);
       this.props.setpickimageSelfieProps(setpickSelfie);
       this.props.navigation.navigate("Upgrade Premium")
-      console.log("INI BASE 64 : "+ base64)
+
       //false
     } else {
       let result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images
       });
       let resultImagePicker = result.uri
-      const base64 = await FileSystem.readAsStringAsync(resultImagePicker, { encoding: 'base64' });
+      // const base64 = await FileSystem.readAsStringAsync(resultImagePicker, { encoding: 'base64' });
       let UriPropsID = {
         URI_IDCARD: resultImagePicker,
       }
@@ -126,6 +90,31 @@ class Cameras extends React.Component {
     }
   }
 
+  handleTakePictureSelfie = async () => {
+    if (this.camera) {
+      const options = { quality: 1 };
+      const data = await this.camera.takePictureAsync(options);
+
+      let UriProps = {
+        URI: data.uri,
+      }
+      this.props.setUriSelfi(UriProps);
+      this.props.navigation.navigate("Upgrade Premium")
+    }
+  }
+
+  handleTakePictureIdcard = async () => {
+    if (this.camera) {
+      const options = { quality: 1 };
+      const data = await this.camera.takePictureAsync(options);
+      let UriProps = {
+        URI_IDCARD: data.uri,
+      }
+      this.props.setUriID(UriProps);
+      this.props.navigation.navigate("Upgrade Premium")
+    }
+  }
+
   render() {
     const { hasPermission } = this.state
     if (hasPermission === null) {
@@ -203,7 +192,7 @@ const mapDispatchToProps = (dispacth) => {
     setpickimageSelfieProps: (setpickSelfie) => dispacth({
       type: ActionType.SET_PICKIMAGE,
       data: {
-        setpickimageSelfie:setpickSelfie.setpickimageSelfie
+        setpickimageSelfie: setpickSelfie.setpickimageSelfie
       }
     }),
   }
@@ -218,8 +207,56 @@ const mapStateToProps = (state) => {
     selfie: state.selfie,
     idcard: state.id_card,
     setpickimageSelfie: state.setpickimageSelfie
-
   }
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Cameras);
+
+
+
+// takePictureSelfie = async () => {
+//   if (this.camera) {
+//     let photo = await this.camera.takePictureAsync({ skipProcessing: true, quality: 0 });
+
+//     const manipResult = await ImageManipulator.manipulateAsync(
+//       photo.uri,
+//       [{ resize : {width:2000,height:1000}  }, { flip: ImageManipulator.FlipType.Vertical }],
+//       { compress: 0.7, format:'jpeg' }
+//     );
+//     this.setState({
+//       setImage:manipResult,
+//     })
+
+//     let UriProps = {
+//       URI: this.state.setImage,
+//       // BASE64_SELFIE:photo
+//     }
+//     this.props.setUriSelfi(UriProps);
+//     this.props.navigation.navigate("Upgrade Premium")
+
+//   }
+// }
+
+
+// takePictureIdCard = async () => {
+//   if (this.camera) {
+//     let photo = await this.camera.takePictureAsync({ skipProcessing: true, quality: 0 });
+
+//     const manipResult = await ImageManipulator.manipulateAsync(
+//       photo.uri,
+//       [{ resize : {width:2000,height:1000}  }, { flip: ImageManipulator.FlipType.Vertical }],
+//       { compress: 0.7, format:'jpeg' }
+//     );
+//     this.setState({
+//       setImage:manipResult,
+//     })
+
+//     let UriProps = {
+//       URI_IDCARD: this.state.setImage,
+//       // BASE64_SELFIE:photo
+//     }
+//     this.props.setUriSelfi(UriProps);
+//     this.props.navigation.navigate("Upgrade Premium")
+
+//   }
+// }
\ No newline at end of file

view/UpgradePremium.js

@@ -7,6 +7,7 @@ import ActionType from '../redux/globalActionType';
 import * as FileSystem from 'expo-file-system';
 import Spinner from 'react-native-loading-spinner-overlay';
 import RNPickerSelect from 'react-native-picker-select';
+import * as ImageManipulator from "expo-image-manipulator";
 import {
     View,
     Text,
@@ -57,7 +58,7 @@ class UpgradePremium extends React.Component {
             type: Camera.Constants.Type.back,
             uri_id: this.props.URI,
             uri_selfie: this.props.URI_IDCARD,
-            spinner: false
+            spinner: false,
         }
     }
 
@@ -67,7 +68,7 @@ class UpgradePremium extends React.Component {
         // this.setState({ hasPermissions: status === 'granted' });
         this.getProfile()
         this.getProvince()
-        // console.log(this.props)
+        console.log("INI AKAKAKAK"+ JSON.stringify(this.props.URI))
     }
 
     takePictureSelfie = () => {
@@ -129,9 +130,21 @@ class UpgradePremium extends React.Component {
         this.setState({
             spinner: true,
         })
-        const URI = await FileSystem.readAsStringAsync(this.state.uri_selfie, { encoding: FileSystem.EncodingType.Base64 });
-        const URI_IDCARD = await FileSystem.readAsStringAsync(this.state.uri_id, { encoding: FileSystem.EncodingType.Base64 });
-        // const URI = await FileSystem.readAsStringAsync(this.state.uri_selfie,{encoding:'base64'});
+        const manipResultSelfie= await ImageManipulator.manipulateAsync(
+            this.props.URI,
+            [{ resize: { width: 1000, height: 1000 } }], // resize to width of 300 and preserve aspect ratio 
+            { compress: 0.4, format: 'jpeg', },
+          );
+
+          const manipResultidCard= await ImageManipulator.manipulateAsync(
+            this.props.URI_IDCARD,
+            [{ resize: { width: 1000, height: 1000 } }], // resize to width of 300 and preserve aspect ratio 
+            { compress: 0.4, format: 'jpeg', },
+          );
+         
+        const URI_IDCARD = await FileSystem.readAsStringAsync(manipResultidCard.uri, { encoding: 'base64' });
+        const URI = await FileSystem.readAsStringAsync(manipResultSelfie.uri,{encoding:'base64'});
+
         let params = {
             session_id: this.props.session_id,
             first_name: this.state.nama_depan,
@@ -149,8 +162,8 @@ class UpgradePremium extends React.Component {
             id_type: this.state.id_type,
             id_value: this.state.id_value,
             nationality: this.state.nationality,
-            customer_image: URI_IDCARD,
-            id_card_image: URI
+            customer_image: URI,
+            id_card_image: URI_IDCARD
         }
 
         // console.log(params.customer_image);
@@ -457,8 +470,6 @@ const mapDispatchToProps = (dispacth) => {
             }
         })
     }
-
-
 }
 
 const mapStateToProps = (state) => {