(Partial) Photo picker for new posts

2022-11-22 08:44:17 -05:00
parent 5cf38ae6d3
commit 5ff2c7971f
3 changed files with 181 additions and 28 deletions
--- a/components/NewPost.js
+++ b/components/NewPost.js
@@ -1,13 +1,67 @@
 import React, { useState } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Image } from 'react-native';
 import { TextInput, Button } from 'react-native-paper';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
+import * as ImagePicker from 'expo-image-picker';


-let NewPost = ({profileid, newPostCB}) => {
+let NewPost = ({ profileid, newPostCB }) => {
    let [postContent, setPostContent] = useState('');
    const navigation = useNavigation();
+    const [photo, setPhoto] = React.useState(null);
+
+
+    const pickImage = async () => {
+        // No permissions request is necessary for launching the image library
+        let result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ImagePicker.MediaTypeOptions.Images,
+            //allowsEditing: true,
+            //aspect: [4, 3],
+            //quality: 1,
+            allowsMultipleSelection: true,
+        });
+        if (!result.cancelled) {
+            setPhoto(result);
+            await handleUploadPhoto(result);
+        }
+    };
+
+    const handleUploadPhoto = async (photo) => {
+        if (!photo) return;
+        const uri =
+            Platform.OS === "android"
+                ? photo.uri
+                : photo.uri.replace("file://", "");
+        const filename = photo.uri.split("/").pop();
+        const match = /\.(\w+)$/.exec(filename);
+        const ext = match?.[1];
+        const type = match ? `image/${match[1]}` : `image`;
+        const formData = new FormData();
+        formData.append("banner", {
+            uri,
+            name: `image.${ext}`,
+            type,
+        });
+        try {
+            fetch("https://social.emmint.com/upload.php", {
+                method: "POST",
+                body: formData,
+                headers: { "Content-Type": "multipart/form-data" }
+            })
+            .then((res) => res.json())
+            .then((data) => {
+                console.log(data);
+                return data.fileName;
+            })
+            .catch((err) => console.error(err));
+        } catch (err) {
+            console.log(err);
+            alert("Something went wrong");
+        }
+    };
+
+

    return (
        <View style={styles.newPost}>
@@ -20,16 +74,29 @@ let NewPost = ({profileid, newPostCB}) => {
            />
            {
                postContent ? (
-                    <View style={{ flexDirection: "row", justifyContent: 'flex-end' }}>
-                        <Button icon="add-a-photo" mode="outlined"></Button>
-                        <Button icon="send" mode="outlined" onPress={() => {
-                            setPostContent('');
-                            API.newPost(postContent).then((newPost) => {
+                    <>
+                        <View style={{ flexDirection: "row", justifyContent: 'flex-end' }}>
+                            <Button icon="add-a-photo" mode="outlined" onPress={pickImage} ></Button>
+                            <Button icon="send" mode="outlined" onPress={() => {
                                setPostContent('');
-                                if(newPostCB) newPostCB(newPost);
-                            });
-                        }}>Post</Button>
-                    </View>
+                                API.newPost(postContent).then((newPost) => {
+                                    setPostContent('');
+                                    if (newPostCB) newPostCB(newPost);
+                                });
+                            }}>Post</Button>
+                        </View>
+                        {photo && (
+
+                            <View>
+                                <Image
+                                    source={{ uri: photo.uri }}
+                                    style={{ width: 300, height: 300 }}
+                                />
+                                <Button title="Upload Photo" onPress={handleUploadPhoto} />
+                            </View>
+
+                        )}
+                    </>
                ) : undefined
            }

--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
        "expo": "^46.0.0",
        "expo-av": "~12.0.4",
        "expo-device": "~4.3.0",
+        "expo-image-picker": "~13.3.1",
        "expo-notifications": "~0.16.1",
        "expo-status-bar": "~1.4.0",
        "expo-updates": "~0.14.7",
@@ -25,6 +26,7 @@
        "react-native": "0.69.6",
        "react-native-autoheight-webview": "^1.6.1",
        "react-native-hyperlink": "0.0.19",
+        "react-native-image-picker": "^4.10.1",
        "react-native-paper": "^4.11.2",
        "react-native-safe-area-context": "4.3.1",
        "react-native-screens": "~3.15.0",
@@ -6615,6 +6617,35 @@
        "expo": "*"
      }
    },
+    "node_modules/expo-image-loader": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-3.2.0.tgz",
+      "integrity": "sha512-LU3Q2prn64/HxdToDmxgMIRXS1ZvD9Q3iCxRVTZn1fPQNNDciIQFE5okaa74Ogx20DFHs90r6WoUd7w9Af1OGQ==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-image-picker": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-13.3.1.tgz",
+      "integrity": "sha512-IY84uDu9uxetAup5yw0CIIujigl/lM3grwyfpeZFMKGmWHzmKamptjd/sG8K65xkb6tF9awmGMW0qglHQ9hakQ==",
+      "dependencies": {
+        "@expo/config-plugins": "~5.0.0",
+        "expo-image-loader": "~3.2.0",
+        "uuid": "7.0.2"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-image-picker/node_modules/uuid": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
+      "integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/expo-json-utils": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.3.0.tgz",
@@ -10940,6 +10971,15 @@
        "mdurl": "^1.0.0"
      }
    },
+    "node_modules/react-native-image-picker": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-4.10.1.tgz",
+      "integrity": "sha512-tPA9UtboEsZ8qtm7pX9WInlo9sf0J2ArJgP4uVgKw1QNrwkRX/kZQ6uzOSN747Dhj9WS42ce4RN+rFK86J13DQ==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-iphone-x-helper": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
@@ -15438,7 +15478,8 @@
    "@graphql-typed-document-node/core": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.1.tgz",
-      "integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg=="
+      "integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==",
+      "requires": {}
    },
    "@hapi/hoek": {
      "version": "9.3.0",
@@ -16346,7 +16387,8 @@
        "ws": {
          "version": "7.5.9",
          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "requires": {}
        }
      }
    },
@@ -16537,7 +16579,8 @@
    "@react-navigation/elements": {
      "version": "1.3.7",
      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.7.tgz",
-      "integrity": "sha512-OZg2N/dd2tl6qkfrWvmUjFsYsbEyHEv4NbZSBuT+CR+d1pzmexN2IeVmi4cEMoR7U7GwhFcHRevF36yBsjU/dw=="
+      "integrity": "sha512-OZg2N/dd2tl6qkfrWvmUjFsYsbEyHEv4NbZSBuT+CR+d1pzmexN2IeVmi4cEMoR7U7GwhFcHRevF36yBsjU/dw==",
+      "requires": {}
    },
    "@react-navigation/material-bottom-tabs": {
      "version": "6.2.5",
@@ -16865,7 +16908,8 @@
    "babel-core": {
      "version": "7.0.0-bridge.0",
      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
-      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg=="
+      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
+      "requires": {}
    },
    "babel-plugin-module-resolver": {
      "version": "4.1.0",
@@ -18125,7 +18169,8 @@
    "expo-application": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/expo-application/-/expo-application-4.2.2.tgz",
-      "integrity": "sha512-bFEaFRUdV6aK2iBd+HzkHNPYsyj88EAhaQW5leznmO0qQMJxpAQ3eoUXMey1hfDBh1qgkkHgSyCZ9BIgMAGJ1g=="
+      "integrity": "sha512-bFEaFRUdV6aK2iBd+HzkHNPYsyj88EAhaQW5leznmO0qQMJxpAQ3eoUXMey1hfDBh1qgkkHgSyCZ9BIgMAGJ1g==",
+      "requires": {}
    },
    "expo-asset": {
      "version": "8.6.2",
@@ -18194,7 +18239,8 @@
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/expo-error-recovery/-/expo-error-recovery-3.2.0.tgz",
      "integrity": "sha512-XZ630ks5HNxa9oc2Ya1hEn1ez031Cy4VnyxerPC2o9fKNKSrD/64cRqGF9NkGM3X2uf8+PCB9adxVflAIXBf6w==",
-      "optional": true
+      "optional": true,
+      "requires": {}
    },
    "expo-file-system": {
      "version": "14.1.0",
@@ -18213,6 +18259,29 @@
        "fontfaceobserver": "^2.1.0"
      }
    },
+    "expo-image-loader": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-3.2.0.tgz",
+      "integrity": "sha512-LU3Q2prn64/HxdToDmxgMIRXS1ZvD9Q3iCxRVTZn1fPQNNDciIQFE5okaa74Ogx20DFHs90r6WoUd7w9Af1OGQ==",
+      "requires": {}
+    },
+    "expo-image-picker": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-13.3.1.tgz",
+      "integrity": "sha512-IY84uDu9uxetAup5yw0CIIujigl/lM3grwyfpeZFMKGmWHzmKamptjd/sG8K65xkb6tF9awmGMW0qglHQ9hakQ==",
+      "requires": {
+        "@expo/config-plugins": "~5.0.0",
+        "expo-image-loader": "~3.2.0",
+        "uuid": "7.0.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
+          "integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw=="
+        }
+      }
+    },
    "expo-json-utils": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.3.0.tgz",
@@ -18221,7 +18290,8 @@
    "expo-keep-awake": {
      "version": "10.2.1",
      "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-10.2.1.tgz",
-      "integrity": "sha512-UBge1BwzDPhUFX0gKu9eDLwEFj4LGiqrOogNoEYxcosM1SwhkbWwPrd3zZtl53LLz02TxEi/CI/MUGJJsrVQLw=="
+      "integrity": "sha512-UBge1BwzDPhUFX0gKu9eDLwEFj4LGiqrOogNoEYxcosM1SwhkbWwPrd3zZtl53LLz02TxEi/CI/MUGJJsrVQLw==",
+      "requires": {}
    },
    "expo-manifests": {
      "version": "0.3.1",
@@ -18398,7 +18468,8 @@
    "expo-updates-interface": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-0.7.0.tgz",
-      "integrity": "sha512-saThnbrYDSjKxfMFFguAvh5o5KGabvAOHItkJRwq2L3c0T/3q26Q0kM83880h/+TTtAVsl1+Vhny9d+ImD3yvQ=="
+      "integrity": "sha512-saThnbrYDSjKxfMFFguAvh5o5KGabvAOHItkJRwq2L3c0T/3q26Q0kM83880h/+TTtAVsl1+Vhny9d+ImD3yvQ==",
+      "requires": {}
    },
    "extend-shallow": {
      "version": "3.0.2",
@@ -20235,7 +20306,8 @@
        "ws": {
          "version": "7.5.9",
          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "requires": {}
        }
      }
    },
@@ -20319,7 +20391,8 @@
        "ws": {
          "version": "7.5.9",
          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "requires": {}
        }
      }
    },
@@ -21405,7 +21478,8 @@
        "ws": {
          "version": "7.5.9",
          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "requires": {}
        }
      }
    },
@@ -21421,12 +21495,14 @@
    "react-freeze": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
-      "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g=="
+      "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==",
+      "requires": {}
    },
    "react-google-material-icons": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/react-google-material-icons/-/react-google-material-icons-1.0.4.tgz",
-      "integrity": "sha512-FpdUG7GES0XPr2ii/ql86Raucuv9OhUO+Q7cHYUDvSESGsWtXZUSeeYJO7NNJzRLk3c66AC691DSOagZ99DSqw=="
+      "integrity": "sha512-FpdUG7GES0XPr2ii/ql86Raucuv9OhUO+Q7cHYUDvSESGsWtXZUSeeYJO7NNJzRLk3c66AC691DSOagZ99DSqw==",
+      "requires": {}
    },
    "react-is": {
      "version": "16.13.1",
@@ -21522,10 +21598,17 @@
        "mdurl": "^1.0.0"
      }
    },
+    "react-native-image-picker": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-4.10.1.tgz",
+      "integrity": "sha512-tPA9UtboEsZ8qtm7pX9WInlo9sf0J2ArJgP4uVgKw1QNrwkRX/kZQ6uzOSN747Dhj9WS42ce4RN+rFK86J13DQ==",
+      "requires": {}
+    },
    "react-native-iphone-x-helper": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
-      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "requires": {}
    },
    "react-native-paper": {
      "version": "4.12.5",
@@ -21551,7 +21634,8 @@
    "react-native-safe-area-context": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz",
-      "integrity": "sha512-cEr7fknJCToTrSyDCVNg0GRdRMhyLeQa2NZwVCuzEQcWedOw/59ExomjmzCE4rxrKXs6OJbyfNtFRNyewDaHuA=="
+      "integrity": "sha512-cEr7fknJCToTrSyDCVNg0GRdRMhyLeQa2NZwVCuzEQcWedOw/59ExomjmzCE4rxrKXs6OJbyfNtFRNyewDaHuA==",
+      "requires": {}
    },
    "react-native-screens": {
      "version": "3.15.0",
@@ -23018,7 +23102,8 @@
    "use-sync-external-store": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
    },
    "util": {
      "version": "0.12.5",
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
    "react-native-vector-icons": "^9.1.0",
    "react-native-web": "~0.18.7",
    "react-native-webview": "11.23.0",
-    "valtio": "^1.4.0"
+    "valtio": "^1.4.0",
+    "expo-image-picker": "~13.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6"