Multiple photos on new post

Views/NewPost.js

@@ -9,7 +9,7 @@ import i18n from "../i18nMessages";
 import Media from '../components/Media';
 
 
-let NewPostView = ({writeTo})=>{
+let NewPostView = ({ writeTo }) => {
     let [postContent, setPostContent] = useState('');
     let [extraContent, setExtraContent] = useState([]);
     const [photo, setPhoto] = React.useState(null);
@@ -20,53 +20,58 @@ let NewPostView = ({writeTo})=>{
             mediaTypes: ImagePicker.MediaTypeOptions.Images,
             //allowsEditing: true,
             //aspect: [4, 3],
-            //quality: 1,
+            quality: 0.7,
             allowsMultipleSelection: true,
         });
         if (!result.cancelled) {
             setPhoto(result);
-            let newPhotoURL = await handleUploadPhoto(result);
-            let newExtraContent = ["@image:" + newPhotoURL].concat(extraContent);
+            let newPhotoURLs = await handleUploadPhoto(result);
+            let newExtraContent = [extraContent]
+            newPhotoURLs.forEach((newPhotoURL)=>{
+                newExtraContent  = ["@image:" + newPhotoURL].concat(newExtraContent);
+            });
             setExtraContent(newExtraContent);
-            console.log(newExtraContent.join(" "));
             setPhoto(null);
         }
     };
 
-    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 {
-            let uploadedFile = await 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;
+    const handleUploadPhoto = async (results) => {
+        if (!results) return;
+        let allUploads = [];
+        results.assets.forEach(photo => {
+            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 {
+                allUploads.push(fetch("https://social.emmint.com/upload.php", {
+                    method: "POST",
+                    body: formData,
+                    headers: { "Content-Type": "multipart/form-data" }
                 })
-                .catch((err) => console.error(err));
-            return uploadedFile;
-        } catch (err) {
-            console.log(err);
-            alert("Something went wrong");
-        }
-
+                    .then((res) => res.json())
+                    .then((data) => {
+                        return data.fileName;
+                    })
+                    .catch((err) => console.error(err)));
+                
+            } catch (err) {
+                console.log(err);
+                alert("Something went wrong");
+            }
+        });
+        uploadedFiles = Promise.all(allUploads);
+        return uploadedFiles;
     };
 
     const handleNewPostButton = async () => {
@@ -81,14 +86,14 @@ let NewPostView = ({writeTo})=>{
 
     return (
         <SafeAreaView>
-            <View style={{padding: 10}}>
-                <View style={{flexDirection:"row", marginBottom:10, justifyContent:"space-around"}}>
-                    <Text style={{fontSize: 25}}>{i18n.t("message.statusUpdate")}:</Text>
+            <View style={{ padding: 10 }}>
+                <View style={{ flexDirection: "row", marginBottom: 10, justifyContent: "space-around" }}>
+                    <Text style={{ fontSize: 25 }}>{i18n.t("message.statusUpdate")}:</Text>
                     <Button icon="send" mode="outlined" onPress={handleNewPostButton}>
                         {i18n.t("message.post")}
                     </Button>
                 </View>
-                <Divider bold={true}/>
+                <Divider bold={true} />
                 <TextInput
                     value={postContent}
                     onChangeText={setPostContent}
@@ -102,8 +107,8 @@ let NewPostView = ({writeTo})=>{
                     }}
                     autoFocus={true}
                 />
-                <Divider  bold={true} />
-                <View style={{flexDirection:"row", marginTop:10, justifyContent:"space-around"}}>
+                <Divider bold={true} />
+                <View style={{ flexDirection: "row", marginTop: 10, justifyContent: "space-around" }}>
                     <Button icon="add-a-photo" mode="outlined" onPress={pickImage}>
                         Add Photos
                     </Button>