uplodowanie wszystkich zdjęć które są wybrane przy dodawaniu produktu

ArtisanConnect/api/notices.jsx

@@ -2,6 +2,7 @@ import axios from "axios";
 import FormData from 'form-data'
 
 const API_URL = "https://testowe.zikor.pl/api/v1";
+
 // const API_URL = "http://172.20.10.2:8080/api/v1";
 
 export async function listNotices() {
@@ -35,7 +36,10 @@ export async function createNotice(notice) {
         // console.log("Image url: ", notice.image)
 
         if (response.data.noticeId !== null) {
-            uploadImage(response.data.noticeId, notice.image);
+            notice.image.forEach(imageUri => {
+                uploadImage(response.data.noticeId, imageUri);
+            });
+            // uploadImage(response.data.noticeId, notice.image);
         }
 
     } catch (error) {
@@ -63,18 +67,15 @@ export async function getImageByNoticeId(noticeId) {
 
 export const uploadImage = async (noticeId, imageUri) => {
     console.log("Started upload image");
+    console.log(imageUri);
 
-    // Utwórz obiekt FormData
     const formData = new FormData();
 
-    // Zdobądź nazwę pliku z URI
     const filename = imageUri.split('/').pop();
 
-    // Określ typ MIME (możesz dostosować lub wykrywać dynamicznie)
     const match = /\.(\w+)$/.exec(filename);
     const type = match ? `image/${match[1]}` : 'image/jpeg';
 
-    // Dodaj plik do FormData w formacie akceptowanym przez serwer
     formData.append('file', {
         uri: imageUri,
         name: filename,

ArtisanConnect/app/(tabs)/notice/create.jsx

@@ -6,6 +6,7 @@ import { Input, InputField } from "@/components/ui/input";
 import {Text} from "@/components/ui/text";
 import {VStack} from "@/components/ui/vstack";
 import {Textarea, TextareaInput} from "@/components/ui/textarea";
+import {ScrollView} from '@gluestack-ui/themed';
 import * as ImagePicker from 'expo-image-picker';
 import {
     Select,
@@ -29,7 +30,7 @@ export default function CreateNotice() {
     const [description, setDescription] = useState("");
     const [price, setPrice] = useState("");
     const [category, setCategory] = useState("");
-  const [image, setImage] = useState(null);
+    const [image, setImage] = useState([]);
     const [selectItems, setSelectItems] = useState([]);
 
     useEffect(() => {
@@ -119,21 +120,32 @@ export default function CreateNotice() {
 
         if (!result.canceled) {
             // await uploadImage(1, result.assets[0].uri);
-      setImage(result.assets[0].uri);
+            setImage(result.assets.map(asset => asset.uri));
         }
     };
 
     return (
+        <ScrollView h="$80" w="$80">
             <FormControl className="p-4 border rounded-lg border-outline-300">
                 <VStack space="xl">
-        <VStack space="xs">
+                    <VStack space="md">
-            <Text className="text-typography-500">Zdjęcie</Text>
+                        <Text className="text-typography-500">Zdjęcia</Text>
                         <Button onPress={pickImage}>
                             <ButtonText>
-              Upload image
+                                Wybierz zdjęcia
                             </ButtonText>
                         </Button>
-          {image && <Image source={{ uri: image }} style={styles.image}/>}
+                      <Text size="sm"
+                            bold="true"
+                      >
+                          Pierwsze zdjęcie będzie zdjęciem głównym</Text>
+                        {image && image.length > 0 && (
+                            <VStack space="xs" className="flex-row flex-wrap">
+                                {image.map((img, index) => (
+                                    <Image key={index} source={{uri: img}} style={styles.image} className="m-1"/>
+                                ))}
+                            </VStack>
+                        )}
                     </VStack>
 
                     <VStack space="xs">
@@ -195,13 +207,14 @@ export default function CreateNotice() {
                         </Select>
                     </VStack>
                     <Button
-          className="ml-auto"
+                        className="mt-5 w-full"
                         onPress={() => addNotice()}
                         disabled={noticeMutation.isLoading}
                     >
-          <ButtonText className="text-typography-0">Save</ButtonText>
+                        <ButtonText className="text-typography-0">Dodaj</ButtonText>
                     </Button>
                 </VStack>
             </FormControl>
+        </ScrollView>
     );
 }

ArtisanConnect/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
     "@expo/vector-icons": "^14.1.0",
+    "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/actionsheet": "^0.2.53",
     "@gluestack-ui/button": "^1.0.14",
     "@gluestack-ui/form-control": "^0.1.19",
@@ -21,6 +22,7 @@
     "@gluestack-ui/overlay": "^0.1.22",
     "@gluestack-ui/select": "^0.1.31",
     "@gluestack-ui/textarea": "^0.1.25",
+    "@gluestack-ui/themed": "^1.1.73",
     "@gluestack-ui/toast": "^1.0.9",
     "@legendapp/motion": "^2.4.0",
     "@tanstack/react-query": "^5.74.4",