feat(source): gallery form (#233)

Implements image upload to gallery.

package-lock.json

@@ -22,11 +22,14 @@
         "@tiptap/react": "^2.12.0",
         "@tiptap/starter-kit": "^2.12.0",
         "axios": "^1.6.5",
+        "browser-image-compression": "^2.0.2",
+        "classnames": "^2.5.1",
         "date-fns": "^3.3.1",
         "leaflet": "^1.9.4",
         "leaflet.locatecontrol": "^0.79.0",
         "radash": "^12.1.0",
         "react-colorful": "^5.6.1",
+        "react-dropzone": "^14.3.8",
         "react-icons": "^5.5.0",
         "react-image-crop": "^10.1.8",
         "react-inlinesvg": "^4.2.0",
@@ -3852,6 +3855,15 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3989,6 +4001,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-image-compression": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.2.tgz",
+      "integrity": "sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "uzip": "0.20201231.0"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -4333,6 +4354,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -6407,6 +6434,18 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -9586,7 +9625,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10811,7 +10849,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -10823,7 +10860,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/property-information": {
@@ -11148,6 +11184,23 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.3.8",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz",
+      "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "attr-accept": "^2.2.4",
+        "file-selector": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-from-dom": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.5.tgz",
@@ -12805,7 +12858,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/tsutils": {
@@ -13248,6 +13300,12 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==",
+      "license": "MIT"
+    },
     "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",

package.json

@@ -110,11 +110,14 @@
     "@tiptap/react": "^2.12.0",
     "@tiptap/starter-kit": "^2.12.0",
     "axios": "^1.6.5",
+    "browser-image-compression": "^2.0.2",
+    "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "radash": "^12.1.0",
     "react-colorful": "^5.6.1",
+    "react-dropzone": "^14.3.8",
     "react-icons": "^5.5.0",
     "react-image-crop": "^10.1.8",
     "react-inlinesvg": "^4.2.0",

patches/react-dropzone/attr-accept.js

@@ -0,0 +1,38 @@
+/**
+ * Patched version of attr-accept to fix compatibility issues with react-dropzone
+ */
+
+function attrAccept(file, acceptedFiles) {
+  if (file && acceptedFiles) {
+    const acceptedFilesArray = Array.isArray(acceptedFiles)
+      ? acceptedFiles
+      : acceptedFiles.split(',')
+
+    if (acceptedFilesArray.length === 0) {
+      return true
+    }
+
+    const fileName = file.name || ''
+    const mimeType = (file.type || '').toLowerCase()
+    const baseMimeType = mimeType.replace(/\/.*$/, '')
+
+    return acceptedFilesArray.some(function (type) {
+      const validType = type.trim().toLowerCase()
+
+      if (validType.charAt(0) === '.') {
+        return fileName.toLowerCase().endsWith(validType)
+      } else if (validType.endsWith('/*')) {
+        // This is something like a image/* mime type
+        return baseMimeType === validType.replace(/\/.*$/, '')
+      }
+
+      return mimeType === validType
+    })
+  }
+
+  return true
+}
+
+// Export as both default and named export to support different import styles
+export default attrAccept
+export { attrAccept }

src/Components/Profile/ItemFunctions.spec.tsx

@@ -2,6 +2,8 @@ import { describe, it, expect, vi } from 'vitest'
 
 import { linkItem } from './itemFunctions'
 
+import type { Item } from '#types/Item'
+
 const toastErrorMock: (t: string) => void = vi.fn()
 const toastSuccessMock: (t: string) => void = vi.fn()
 
@@ -14,8 +16,45 @@ vi.mock('react-toastify', () => ({
 
 describe('linkItem', () => {
   const id = 'some-id'
-  let updateApi: () => void = vi.fn()
+  let updateApi: (item: Partial<Item>) => Promise<Item> = vi.fn()
-  const item = { layer: { api: { updateItem: () => updateApi() } } }
+  const item: Item = {
+    layer: {
+      api: {
+        updateItem: (item) => updateApi(item),
+        getItems: vi.fn(),
+      },
+      name: '',
+      menuIcon: '',
+      menuColor: '',
+      menuText: '',
+      markerIcon: {
+        image: '',
+      },
+      markerShape: 'square',
+      markerDefaultColor: '',
+      itemType: {
+        name: 'Test Item Type',
+        show_name_input: true,
+        show_profile_button: false,
+        show_start_end: true,
+        show_start_end_input: true,
+        show_text: true,
+        show_text_input: true,
+        custom_text: 'This is a custom text for the item type.',
+        profileTemplate: [
+          { collection: 'users', id: null, item: {} },
+          { collection: 'posts', id: '123', item: {} },
+        ],
+        offers_and_needs: true,
+        icon_as_labels: {},
+        relations: true,
+        template: 'default',
+        questlog: false,
+      },
+    },
+    id: '',
+    name: '',
+  }
   const updateItem = vi.fn()
 
   beforeEach(() => {

src/Components/Profile/ProfileForm.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
@@ -46,6 +46,8 @@ export function ProfileForm() {
     start: '',
     end: '',
     openCollectiveSlug: '',
+    gallery: [],
+    uploadingImages: [],
   })
 
   const [updatePermission, setUpdatePermission] = useState<boolean>(false)
@@ -132,6 +134,8 @@ export function ProfileForm() {
       start: item.start ?? '',
       end: item.end ?? '',
       openCollectiveSlug: item.openCollectiveSlug ?? '',
+      gallery: item.gallery ?? [],
+      uploadingImages: [],
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item, tags, items])
@@ -147,6 +151,8 @@ export function ProfileForm() {
     }
   }, [item, layers])
 
+  const isUpdatingGallery = state.uploadingImages.length > 0
+
   return (
     <>
       <MapOverlayPage
@@ -192,15 +198,20 @@ export function ProfileForm() {
                   state={state}
                   setState={setState}
                   updatePermission={updatePermission}
-                  linkItem={(id) => linkItem(id, item, updateItem)}
+                  linkItem={(id: string) => linkItem(id, item, updateItem)}
-                  unlinkItem={(id) => unlinkItem(id, item, updateItem)}
+                  unlinkItem={(id: string) => unlinkItem(id, item, updateItem)}
                   setUrlParams={setUrlParams}
                 ></TabsForm>
               )}
 
               <div className='tw:mb-4 tw:mt-6 tw:flex-none'>
                 <button
-                  className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`}
+                  className={classNames(
+                    'tw:btn',
+                    'tw:float-right',
+                    { 'tw:loading': loading },
+                    { 'tw:cursor-not-allowed tw:opacity-50': loading || isUpdatingGallery },
+                  )}
                   type='submit'
                   style={{
                     // We could refactor this, it is used several times at different locations

src/Components/Profile/Subcomponents/AvatarWidget.tsx

@@ -13,7 +13,7 @@ import DialogModal from '#components/Templates/DialogModal'
 import type { Crop } from 'react-image-crop'
 
 interface AvatarWidgetProps {
-  avatar: string
+  avatar?: string
   setAvatar: React.Dispatch<React.SetStateAction<any>>
 }
 

src/Components/Profile/Subcomponents/ContactInfoForm.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import { TextInput } from '#components/Input'
 
 import type { FormState } from '#types/FormState'
@@ -9,7 +7,7 @@ export const ContactInfoForm = ({
   setState,
 }: {
   state: FormState
-  setState: React.Dispatch<React.SetStateAction<any>>
+  setState: React.Dispatch<React.SetStateAction<FormState>>
 }) => {
   return (
     <div className='tw:mt-2 tw:space-y-2'>

src/Components/Profile/Subcomponents/CrowdfundingForm.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import { TextInput } from '#components/Input'
 
 import type { FormState } from '#types/FormState'
@@ -9,7 +7,7 @@ export const CrowdfundingForm = ({
   setState,
 }: {
   state: FormState
-  setState: React.Dispatch<React.SetStateAction<any>>
+  setState: React.Dispatch<React.SetStateAction<FormState>>
 }) => {
   return (
     <div className='tw:mt-4 tw:space-y-4'>

src/Components/Profile/Subcomponents/FormHeader.tsx

@@ -1,14 +1,20 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
-/* eslint-disable react/prop-types */
 import { TextInput } from '#components/Input'
 
 import { AvatarWidget } from './AvatarWidget'
 import { ColorPicker } from './ColorPicker'
 
-export const FormHeader = ({ item, state, setState }) => {
+import type { FormState } from '#types/FormState'
+import type { Item } from '#types/Item'
+
+interface Props {
+  item: Item
+  state: Partial<FormState>
+  setState: React.Dispatch<React.SetStateAction<Partial<FormState>>>
+}
+
+export const FormHeader = ({ item, state, setState }: Props) => {
   return (
     <div className='tw:flex-none'>
       <div className='tw:flex'>
@@ -34,7 +40,7 @@ export const FormHeader = ({ item, state, setState }) => {
         <div className='tw:grow tw:mr-4 tw:pt-1'>
           <TextInput
             placeholder='Name'
-            defaultValue={item?.name ? item.name : ''}
+            defaultValue={item.name ? item.name : ''}
             updateFormValue={(v) =>
               setState((prevState) => ({
                 ...prevState,
@@ -47,7 +53,7 @@ export const FormHeader = ({ item, state, setState }) => {
           <TextInput
             placeholder='Subtitle'
             required={false}
-            defaultValue={item?.subname ? item.subname : ''}
+            defaultValue={item.subname ? item.subname : ''}
             updateFormValue={(v) =>
               setState((prevState) => ({
                 ...prevState,

src/Components/Profile/Subcomponents/GalleryForm.spec.tsx

@@ -0,0 +1,116 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+import { render, fireEvent, screen } from '@testing-library/react'
+import { describe, it, vi, expect } from 'vitest'
+
+import { GalleryForm } from './GalleryForm'
+
+import type { FormState } from '#types/FormState'
+import type { GalleryItem, Item } from '#types/Item'
+import type { MarkerIcon } from '#types/MarkerIcon'
+import type { Tag } from '#types/Tag'
+
+const testImagePaths = ['./tests/image1.jpg', './tests/image2.jpg', './tests/image3.jpg']
+
+const testImages = testImagePaths.map((imagePath) =>
+  // eslint-disable-next-line security/detect-non-literal-fs-filename
+  readFileSync(path.join(__dirname, '../../../../', imagePath)),
+)
+
+const setState = vi.fn()
+
+const baseState = {
+  color: '',
+  id: '',
+  group_type: 'wuerdekompass',
+  status: 'active',
+  name: '',
+  subname: '',
+  text: '',
+  contact: '',
+  telephone: '',
+  next_appointment: '',
+  image: '',
+  marker_icon: {} as MarkerIcon,
+  offers: [] as Tag[],
+  needs: [] as Tag[],
+  relations: [] as Item[],
+  start: '',
+  end: '',
+  openCollectiveSlug: '',
+  gallery: [],
+  uploadingImages: [],
+}
+
+describe('GalleryForm', () => {
+  const Wrapper = ({ gallery = [] as GalleryItem[], uploadingImages = [] as File[] } = {}) => {
+    const state: FormState = {
+      ...baseState,
+      gallery,
+      uploadingImages,
+    }
+    return render(<GalleryForm state={state} setState={setState} />)
+  }
+
+  describe('without previous images', () => {
+    it('renders', () => {
+      const wrapper = Wrapper()
+      expect(wrapper.container).toMatchSnapshot()
+    })
+  })
+
+  describe('with previous images', () => {
+    const gallery = [
+      {
+        directus_files_id: {
+          id: '1',
+          width: 800,
+          height: 600,
+        },
+      },
+      {
+        directus_files_id: {
+          id: '2',
+          width: 1024,
+          height: 768,
+        },
+      },
+    ]
+
+    it('renders', () => {
+      const wrapper = Wrapper({ gallery })
+      expect(wrapper.container).toMatchSnapshot()
+    })
+
+    it('can open and close delete modal', () => {
+      Wrapper({ gallery })
+      const deleteButton = screen.getAllByTestId('trash')[0]
+      expect(deleteButton).toBeInTheDocument()
+      fireEvent.click(deleteButton)
+      const confirmationText = screen.getByText('Do you want to delete this image?')
+      expect(confirmationText).toBeInTheDocument()
+      const confirmButton = screen.getByText('Yes')
+      expect(confirmButton).toBeInTheDocument()
+      fireEvent.click(confirmButton)
+      expect(confirmationText).not.toBeInTheDocument()
+    })
+  })
+
+  describe('with uploading images', () => {
+    it('renders', () => {
+      const wrapper = Wrapper({
+        uploadingImages: testImages.map(
+          (image, index) =>
+            new File([image], `test-image-${index + 1}.jpg`, { type: 'image/jpeg' }),
+        ),
+      })
+      wrapper.container.querySelectorAll('img').forEach((img) => {
+        expect(img.src).toMatch(/blob:/) // Ensure the image is a blob URL
+        // Replace random blob URL for consistent snapshots
+        img.src = 'blob-url-placeholder'
+      })
+      expect(wrapper.container).toMatchSnapshot()
+    })
+  })
+})

src/Components/Profile/Subcomponents/GalleryForm.tsx

@@ -0,0 +1,161 @@
+import TrashIcon from '@heroicons/react/24/solid/TrashIcon'
+import imageCompression from 'browser-image-compression'
+import { useState } from 'react'
+import { useDropzone } from 'react-dropzone'
+import { BiSolidImage } from 'react-icons/bi'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
+import DialogModal from '#components/Templates/DialogModal'
+import { getImageDimensions } from '#utils/getImageDimensions'
+
+import type { FormState } from '#types/FormState'
+
+interface Props {
+  state: FormState
+  setState: React.Dispatch<React.SetStateAction<FormState>>
+}
+
+const compressionOptions = {
+  maxSizeMB: 1,
+  maxWidthOrHeight: 1920,
+  useWebWorker: true,
+}
+
+export const GalleryForm = ({ state, setState }: Props) => {
+  const appState = useAppState()
+
+  const [imageSelectedToDelete, setImageSelectedToDelete] = useState<number | null>(null)
+
+  const closeModal = () => setImageSelectedToDelete(null)
+
+  const upload = async (acceptedFiles: File[]) => {
+    setState((prevState) => ({
+      ...prevState,
+      uploadingImages: [...prevState.uploadingImages, ...acceptedFiles],
+    }))
+
+    const uploads = acceptedFiles.map(async (file) => {
+      const compressedFile = await imageCompression(file, compressionOptions)
+      const { width, height } = await getImageDimensions(compressedFile)
+      return {
+        width,
+        height,
+        asset: await appState.assetsApi.upload(compressedFile, file.name),
+        name: file.name,
+      }
+    })
+
+    for await (const upload of uploads) {
+      setState((prevState) => ({
+        ...prevState,
+        uploadingImages: prevState.uploadingImages.filter((f) => f.name !== upload.name),
+        gallery: [
+          ...prevState.gallery,
+          {
+            directus_files_id: {
+              id: upload.asset.id,
+              width: upload.width,
+              height: upload.height,
+            },
+          },
+        ],
+      }))
+    }
+  }
+
+  const { getRootProps, getInputProps } = useDropzone({
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    onDrop: upload,
+    accept: {
+      'image/jpeg': [],
+    },
+  })
+
+  const images = state.gallery
+    .map((image) => ({
+      src: appState.assetsApi.url + `${image.directus_files_id.id}.jpg`,
+      state: 'uploaded',
+    }))
+    .concat(
+      state.uploadingImages.map((file) => ({
+        src: URL.createObjectURL(file),
+        state: 'uploading',
+      })),
+    )
+
+  const removeImage = (index: number) => {
+    setState((prevState) => ({
+      ...prevState,
+      gallery: prevState.gallery.filter((_, i) => i !== index),
+    }))
+  }
+
+  return (
+    <>
+      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
+        {images.map((image, index) => (
+          <div key={index} className='tw:relative'>
+            <img
+              src={image.src}
+              alt={`Gallery image ${index + 1}`}
+              className={`tw:w-full tw:h-full tw:object-cover tw:rounded-lg ${
+                image.state === 'uploading' ? 'tw:opacity-50' : ''
+              }`}
+            />
+            {image.state === 'uploading' && (
+              <span className='tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto'></span>
+            )}
+            {image.state === 'uploaded' && (
+              <button
+                className='tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer'
+                onClick={() => setImageSelectedToDelete(index)}
+                type='button'
+              >
+                <TrashIcon className='tw:h-5 tw:w-5' data-testid='trash' />
+              </button>
+            )}
+          </div>
+        ))}
+
+        <div
+          {...getRootProps()}
+          className='tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200'
+        >
+          <input {...getInputProps()} data-testid='gallery-upload-input' />
+          <div>
+            <BiSolidImage className='tw:h-16 tw:w-16 tw:m-auto tw:mb-2' />
+            <span className='tw:text-center'>Upload&nbsp;Image</span>
+          </div>
+        </div>
+      </div>
+      <DialogModal
+        isOpened={imageSelectedToDelete !== null}
+        title='Are you sure?'
+        showCloseButton={false}
+        onClose={closeModal}
+      >
+        <div onClick={(e) => e.stopPropagation()}>
+          <span>Do you want to delete this image?</span>
+          <div className='tw:grid'>
+            <div className='tw:flex tw:justify-between'>
+              <label
+                className='tw:btn tw:mt-4 tw:btn-error'
+                onClick={() => {
+                  if (imageSelectedToDelete !== null) {
+                    removeImage(imageSelectedToDelete)
+                  }
+                  closeModal()
+                }}
+              >
+                Yes
+              </label>
+              <label className='tw:btn tw:mt-4' onClick={closeModal}>
+                No
+              </label>
+            </div>
+          </div>
+        </div>
+      </DialogModal>
+    </>
+  )
+}

src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import { useEffect } from 'react'
 
 import ComboBoxInput from '#components/Input/ComboBoxInput'
@@ -24,7 +22,7 @@ export const GroupSubheaderForm = ({
   groupTypes,
 }: {
   state: FormState
-  setState: React.Dispatch<React.SetStateAction<any>>
+  setState: React.Dispatch<React.SetStateAction<FormState>>
   item: Item
   groupStates?: string[]
   groupTypes?: groupType[]

src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import { PopupStartEndInput } from '#components/Map/Subcomponents/ItemPopupComponents'
 
+import type { FormState } from '#types/FormState'
 import type { Item } from '#types/Item'
 
 export const ProfileStartEndForm = ({
@@ -9,7 +8,7 @@ export const ProfileStartEndForm = ({
   setState,
 }: {
   item: Item
-  setState: React.Dispatch<React.SetStateAction<any>>
+  setState: React.Dispatch<React.SetStateAction<FormState>>
 }) => {
   return (
     <PopupStartEndInput

src/Components/Profile/Subcomponents/ProfileTextForm.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
+
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { useEffect, useState } from 'react'
 
 import { RichTextEditor } from '#components/Input/RichTextEditor'
@@ -20,7 +20,7 @@ export const ProfileTextForm = ({
   hideInputLabel,
 }: {
   state: FormState
-  setState: React.Dispatch<React.SetStateAction<any>>
+  setState: React.Dispatch<React.SetStateAction<FormState>>
   dataField?: string
   heading: string
   size: string

src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap

@@ -0,0 +1,227 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`GalleryForm > with previous images > renders 1`] = `
+<div>
+  <div
+    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+  >
+    <div
+      class="tw:relative"
+    >
+      <img
+        alt="Gallery image 1"
+        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+        src="undefined1.jpg"
+      />
+      <button
+        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="tw:h-5 tw:w-5"
+          data-slot="icon"
+          data-testid="trash"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+    <div
+      class="tw:relative"
+    >
+      <img
+        alt="Gallery image 2"
+        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+        src="undefined2.jpg"
+      />
+      <button
+        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="tw:h-5 tw:w-5"
+          data-slot="icon"
+          data-testid="trash"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+    <div
+      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+      role="presentation"
+      tabindex="0"
+    >
+      <input
+        accept="image/jpeg"
+        data-testid="gallery-upload-input"
+        multiple=""
+        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        tabindex="-1"
+        type="file"
+      />
+      <div>
+        <svg
+          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+          />
+        </svg>
+        <span
+          class="tw:text-center"
+        >
+          Upload Image
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`GalleryForm > with uploading images > renders 1`] = `
+<div>
+  <div
+    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+  >
+    <div
+      class="tw:relative"
+    >
+      <img
+        alt="Gallery image 1"
+        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+        src="blob-url-placeholder"
+      />
+      <span
+        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+      />
+    </div>
+    <div
+      class="tw:relative"
+    >
+      <img
+        alt="Gallery image 2"
+        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+        src="blob-url-placeholder"
+      />
+      <span
+        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+      />
+    </div>
+    <div
+      class="tw:relative"
+    >
+      <img
+        alt="Gallery image 3"
+        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+        src="blob-url-placeholder"
+      />
+      <span
+        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+      />
+    </div>
+    <div
+      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+      role="presentation"
+      tabindex="0"
+    >
+      <input
+        accept="image/jpeg"
+        data-testid="gallery-upload-input"
+        multiple=""
+        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        tabindex="-1"
+        type="file"
+      />
+      <div>
+        <svg
+          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+          />
+        </svg>
+        <span
+          class="tw:text-center"
+        >
+          Upload Image
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`GalleryForm > without previous images > renders 1`] = `
+<div>
+  <div
+    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+  >
+    <div
+      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+      role="presentation"
+      tabindex="0"
+    >
+      <input
+        accept="image/jpeg"
+        data-testid="gallery-upload-input"
+        multiple=""
+        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        tabindex="-1"
+        type="file"
+      />
+      <div>
+        <svg
+          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+          />
+        </svg>
+        <span
+          class="tw:text-center"
+        >
+          Upload Image
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/Components/Profile/Templates/FlexForm.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
 import { ContactInfoForm } from '#components/Profile/Subcomponents/ContactInfoForm'
 import { CrowdfundingForm } from '#components/Profile/Subcomponents/CrowdfundingForm'
+import { GalleryForm } from '#components/Profile/Subcomponents/GalleryForm'
 import { GroupSubheaderForm } from '#components/Profile/Subcomponents/GroupSubheaderForm'
 import { ProfileStartEndForm } from '#components/Profile/Subcomponents/ProfileStartEndForm'
 import { ProfileTextForm } from '#components/Profile/Subcomponents/ProfileTextForm'
@@ -16,6 +16,7 @@ const componentMap = {
   contactInfos: ContactInfoForm,
   startEnd: ProfileStartEndForm,
   crowdfundings: CrowdfundingForm,
+  gallery: GalleryForm,
   // weitere Komponenten hier
 }
 
@@ -25,7 +26,7 @@ export const FlexForm = ({
   setState,
 }: {
   state: FormState
-  setState: React.Dispatch<React.SetStateAction<any>>
+  setState: React.Dispatch<React.SetStateAction<FormState>>
   item: Item
 }) => {
   return (

src/Components/Profile/Templates/OnepagerForm.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import { TextAreaInput } from '#components/Input'
 import { ContactInfoForm } from '#components/Profile/Subcomponents/ContactInfoForm'
 import { GroupSubheaderForm } from '#components/Profile/Subcomponents/GroupSubheaderForm'
@@ -13,7 +11,7 @@ export const OnepagerForm = ({
   setState,
 }: {
   state: FormState
-  setState: React.Dispatch<React.SetStateAction<any>>
+  setState: React.Dispatch<React.SetStateAction<FormState>>
   item: Item
 }) => {
   return (

src/Components/Profile/itemFunctions.ts

@@ -15,6 +15,7 @@ import { encodeTag } from '#utils/FormatTags'
 import { hashTagRegex } from '#utils/HashTagRegex'
 import { randomColor } from '#utils/RandomColor'
 
+import type { FormState } from '#types/FormState'
 import type { Item } from '#types/Item'
 
 // eslint-disable-next-line promise/avoid-new
@@ -77,8 +78,8 @@ export const submitNewItem = async (
   setAddItemPopupType('')
 }
 
-export const linkItem = async (id: string, item, updateItem) => {
+export const linkItem = async (id: string, item: Item, updateItem) => {
-  const newRelations = item.relations || []
+  const newRelations = item.relations ?? []
   newRelations?.push({ items_id: item.id, related_items_id: id })
   const updatedItem = { id: item.id, relations: newRelations }
 
@@ -96,7 +97,7 @@ export const linkItem = async (id: string, item, updateItem) => {
   }
 }
 
-export const unlinkItem = async (id: string, item, updateItem) => {
+export const unlinkItem = async (id: string, item: Item, updateItem) => {
   const newRelations = item.relations?.filter((r) => r.related_items_id !== id)
   const updatedItem = { id: item.id, relations: newRelations }
 
@@ -116,7 +117,7 @@ export const unlinkItem = async (id: string, item, updateItem) => {
 
 export const handleDelete = async (
   event: React.MouseEvent<HTMLElement>,
-  item,
+  item: Item,
   setLoading,
   removeItem,
   map,
@@ -144,8 +145,8 @@ export const handleDelete = async (
 }
 
 export const onUpdateItem = async (
-  state,
+  state: FormState,
-  item,
+  item: Item,
   tags,
   addTag,
   setLoading,
@@ -159,19 +160,20 @@ export const onUpdateItem = async (
 
   const offerUpdates: any[] = []
   // check for new offers
-  await state.offers?.map((o) => {
+  state.offers?.map((o) => {
     const existingOffer = item?.offers?.find((t) => t.tags_id === o.id)
-    existingOffer && offerUpdates.push(existingOffer.id)
+    existingOffer && offerUpdates.push(existingOffer.tags_id)
-    if (!existingOffer && !tags.some((t) => t.id === o.id)) addTag({ ...o, offer_or_need: true })
+    if (!existingOffer && !tags.some((t: { id: string }) => t.id === o.id))
+      addTag({ ...o, offer_or_need: true })
     !existingOffer && offerUpdates.push({ items_id: item?.id, tags_id: o.id })
     return null
   })
 
   const needsUpdates: any[] = []
 
-  await state.needs?.map((n) => {
+  state.needs?.map((n) => {
     const existingNeed = item?.needs?.find((t) => t.tags_id === n.id)
-    existingNeed && needsUpdates.push(existingNeed.id)
+    existingNeed && needsUpdates.push(existingNeed.tags_id)
     !existingNeed && needsUpdates.push({ items_id: item?.id, tags_id: n.id })
     !existingNeed && !tags.some((t) => t.id === n.id) && addTag({ ...n, offer_or_need: true })
     return null
@@ -197,6 +199,7 @@ export const onUpdateItem = async (
     ...(state.offers.length > 0 && { offers: offerUpdates }),
     ...(state.needs.length > 0 && { needs: needsUpdates }),
     ...(state.openCollectiveSlug && { openCollectiveSlug: state.openCollectiveSlug }),
+    gallery: state.gallery,
   }
 
   const offersState: any[] = []
@@ -216,7 +219,7 @@ export const onUpdateItem = async (
 
   setLoading(true)
 
-  await state.text
+  state.text
     .toLocaleLowerCase()
     .match(hashTagRegex)
     ?.map((tag) => {
@@ -234,7 +237,7 @@ export const onUpdateItem = async (
   await sleep(200)
 
   if (!item.new) {
-    item?.layer?.api?.updateItem &&
+    await (item?.layer?.api?.updateItem &&
       toast
         .promise(item?.layer?.api?.updateItem(changedItem), {
           pending: 'updating Item  ...',
@@ -251,10 +254,10 @@ export const onUpdateItem = async (
           setLoading(false)
           navigate(`/item/${item.id}${params && '?' + params}`)
           return null
-        })
+        }))
   } else {
     item.new = false
-    item.layer?.api?.createItem &&
+    await (item.layer?.api?.createItem &&
       toast
         .promise(item.layer?.api?.createItem(changedItem), {
           pending: 'updating Item  ...',
@@ -280,6 +283,6 @@ export const onUpdateItem = async (
           setLoading(false)
           navigate(`/${params && '?' + params}`)
           return null
-        })
+        }))
   }
 }

src/Utils/getImageDimensions.spec.ts

@@ -0,0 +1,33 @@
+/* Currently this test suite is skipped due to the need for a browser environment. We could set
+ up a headless browser test environment in the future, e.g. https://vitest.dev/guide/browser/ */
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+import { describe, it, expect } from 'vitest'
+
+import { getImageDimensions } from './getImageDimensions'
+
+const testImagePaths = ['./tests/image1.jpg', './tests/image2.jpg', './tests/image3.jpg']
+
+const testImages = testImagePaths.map((imagePath) =>
+  // eslint-disable-next-line security/detect-non-literal-fs-filename
+  readFileSync(path.join(__dirname, '../../', imagePath)),
+)
+
+describe('getImageDimensions', () => {
+  it.skip('returns the correct dimensions for a valid image file', async () => {
+    const file = new File([testImages[0]], 'image1.jpg', { type: 'image/jpeg' })
+    const dimensions = await getImageDimensions(file)
+    expect(dimensions).toEqual({ width: 800, height: 600 }) // Adjust expected values based on actual test image dimensions
+  })
+
+  it.skip('throws an error for an invalid file type', async () => {
+    const file = new File(['not an image'], 'invalid.txt', { type: 'text/plain' })
+    await expect(getImageDimensions(file)).rejects.toThrow('Error reading image file')
+  })
+
+  it.skip('throws an error if the image cannot be loaded', async () => {
+    const file = new File([''], 'empty.jpg', { type: 'image/jpeg' })
+    await expect(getImageDimensions(file)).rejects.toThrow('Error loading image')
+  })
+})

src/Utils/getImageDimensions.ts

@@ -0,0 +1,30 @@
+export const getImageDimensions = (
+  file: File,
+): Promise<{
+  width: number
+  height: number
+}> =>
+  // eslint-disable-next-line promise/avoid-new
+  new Promise((resolve, reject) => {
+    try {
+      const fileReader = new FileReader()
+
+      fileReader.onload = () => {
+        try {
+          const img = new Image()
+
+          img.onload = () => resolve({ width: img.width, height: img.height })
+
+          img.src = fileReader.result as string // is the data URL because called with readAsDataURL
+        } catch (error) {
+          reject(error)
+          throw new Error('Error loading image')
+        }
+      }
+
+      fileReader.readAsDataURL(file)
+    } catch (error) {
+      reject(error)
+      throw new Error('Error reading image file')
+    }
+  })

src/assets/css/custom-file-upload.css

@@ -14,5 +14,5 @@ input[type="file"] {
     transition: .5s ease;
     opacity: 0;
     position: absolute;
-    transform: translate(8px, 8px);
+    transform: translate(16px, 16px);
 }

src/assets/image-placeholder.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="_x32_" fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<path class="st0" d="M99.281,399.469h320.094c6.172,0,11.844-3.422,14.719-8.875c2.844-5.469,2.438-12.078-1.063-17.141   l-69.156-100.094c-6.313-9.125-16.781-14.516-27.906-14.297s-21.406,5.969-27.375,15.359l-19.719,30.984l-54.828-79.359   c-6.313-9.172-16.797-14.531-27.922-14.328s-21.406,5.969-27.375,15.359L85.281,373.984c-3.25,5.109-3.469,11.578-0.531,16.875   C87.656,396.172,93.219,399.469,99.281,399.469z"/>
+	<path class="st0" d="M322.672,223.906c23.688,0,42.922-19.219,42.922-42.922c0-23.688-19.234-42.906-42.922-42.906   c-23.703,0-42.922,19.219-42.922,42.906C279.75,204.688,298.969,223.906,322.672,223.906z"/>
+	<path class="st0" d="M0,19.703v472.594h512v-25.313V19.703H0z M461.375,441.672H50.625V70.328h410.75V441.672z"/>
+</g>
+</svg>

src/types/FormState.d.ts

@@ -1,5 +1,5 @@
 import type { markerIcon } from '#utils/MarkerIconFactory'
-import type { Item } from './Item'
+import type { GalleryItem, Item } from './Item'
 import type { Tag } from './Tag'
 
 export interface FormState {
@@ -21,4 +21,6 @@ export interface FormState {
   start: string
   end: string
   openCollectiveSlug: string
+  gallery: GalleryItem[]
+  uploadingImages: File[]
 }

src/types/Item.d.ts

@@ -9,7 +9,7 @@ type TagIds = { tags_id: string }[]
 
 interface GalleryItem {
   directus_files_id: {
-    id: number
+    id: string
     width: number
     height: number
   }