Fix uploads

.github/workflows/nextjs-build.yml

@@ -2,10 +2,6 @@ name: Builds Nextjs site
 
 on:
   pull_request:
-    types:
-      - opened
-      - ready_for_review
-      - review_requested
 
 jobs:
   build:

nodemon.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/nodemon.json",
-  "ext": "ts",
+  "ext": "ts,tsx,scss",
   "exec": "ts-node src/server.ts -- -I",
   "stdin": false,
   "ignore" : [

src/app/(pages)/nominations/[electionId]/[positionId]/NominationForm/index.tsx

@@ -109,7 +109,14 @@ const NominationForm: React.FC<{ electionId?: string; positionId?: string }> = p
           error={errors.nickname}
           type="text"
         />
-        <input type="file" {...register('image')} onChange={onChangePicture} />
+        <Input
+          name={'image'}
+          label={'Profile Picture'}
+          register={register}
+          error={errors.image}
+          type="file"
+          onChange={onChangePicture}
+        />
         {errors.image && <p>Please select an image</p>}
         {picture && <img className="image" src={picture} alt="" />}
         <Input

src/app/(pages)/nominations/[electionId]/edit/NominationForm/index.tsx

@@ -54,6 +54,10 @@
     setPicture(URL.createObjectURL(pictureWatch[0]))
   }, [pictureWatch])
 
+  const onChangePicture = e => {
+    setPicture(URL.createObjectURL(e.target.files[0]))
+  }
+
   useEffect(() => {
     const findNomination = async () => {
       if (!nomination) {
@@ -152,13 +156,14 @@
           type="text"
         />
         <Input
-          type="file"
           name={'image'}
           label={'Profile Picture'}
           register={register}
           error={errors.image}
+          type="file"
+          onChange={onChangePicture}
         />
         {picture && <img className="image" src={picture} alt="" />}
         {!picture && currentPicture && (
           <Media resource={currentPicture} imgClassName={classes.image} />
         )}

src/app/_components/Input/InputTypes/Default/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { FieldValues, UseFormRegister } from 'react-hook-form'
+
+import classes from '../../index.module.scss'
+
+type Props = {
+  name: string
+  register: UseFormRegister<FieldValues & any>
+  required?: boolean
+  error: any
+  type?: 'text' | 'textarea' | 'number' | 'password' | 'email' | 'file'
+  validate?: (value: string) => boolean | string
+  placeholder?: string
+  disabled?: boolean
+}
+
+export const InputTypeDefault: React.FC<Props> = ({
+  name,
+  required,
+  register,
+  error,
+  type = 'text',
+  validate,
+  placeholder,
+  disabled,
+}) => {
+  return (
+    <input
+      className={[classes.input, error && classes.error].filter(Boolean).join(' ')}
+      type={type}
+      placeholder={placeholder}
+      {...register(name, {
+        required,
+        validate,
+      })}
+      disabled={disabled}
+    />
+  )
+}

src/app/_components/Input/InputTypes/Email/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { FieldValues, UseFormRegister } from 'react-hook-form'
+
+import classes from '../../index.module.scss'
+
+type Props = {
+  name: string
+  register: UseFormRegister<FieldValues & any>
+  required?: boolean
+  error: any
+  validate?: (value: string) => boolean | string
+  placeholder?: string
+  disabled?: boolean
+}
+
+export const InputTypeEmail: React.FC<Props> = ({
+  name,
+  required,
+  register,
+  error,
+  validate,
+  placeholder,
+  disabled,
+}) => {
+  return (
+    <input
+      className={[classes.input, error && classes.error].filter(Boolean).join(' ')}
+      type={'email'}
+      placeholder={placeholder}
+      {...register(name, {
+        required,
+        validate,
+        pattern: {
+          value: /\S+@\S+\.\S+/,
+          message: 'Please enter a valid email',
+        },
+      })}
+      disabled={disabled}
+    />
+  )
+}

src/app/_components/Input/InputTypes/File/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { FieldValues, UseFormRegister } from 'react-hook-form'
+
+import classes from '../../index.module.scss'
+
+type Props = {
+  name: string
+  register: UseFormRegister<FieldValues & any>
+  required?: boolean
+  error: any
+  validate?: (value: string) => boolean | string
+  placeholder?: string
+  disabled?: boolean
+  onChange?: (value: any) => void
+}
+
+export const InputTypeFile: React.FC<Props> = ({
+  name,
+  required,
+  register,
+  error,
+  validate,
+  placeholder,
+  disabled,
+  onChange,
+}) => {
+  return (
+    <input
+      className={[classes.input, error && classes.error].filter(Boolean).join(' ')}
+      type={'file'}
+      placeholder={placeholder}
+      {...register(name, {
+        required,
+        validate,
+      })}
+      disabled={disabled}
+      // Maybe expand in the future, see https://www.iana.org/assignments/media-types/media-types.xhtml#image
+      // Images are displayed using https://nextjs.org/docs/app/building-your-application/optimizing/images
+      accept={'image/png, image/jpeg'}
+      onChange={onChange}
+    />
+  )
+}

src/app/_components/Input/InputTypes/Textarea/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { FieldValues, UseFormRegister } from 'react-hook-form'
+
+import classes from '../../index.module.scss'
+
+type Props = {
+  name: string
+  register: UseFormRegister<FieldValues & any>
+  required?: boolean
+  error: any
+  validate?: (value: string) => boolean | string
+  placeholder?: string
+  disabled?: boolean
+}
+
+export const InputTypeTextarea: React.FC<Props> = ({
+  name,
+  required,
+  register,
+  error,
+  validate,
+  placeholder,
+  disabled,
+}) => {
+  return (
+    <textarea
+      className={[classes.input, classes.textarea, error && classes.error]
+        .filter(Boolean)
+        .join(' ')}
+      rows={3}
+      placeholder={placeholder}
+      {...register(name, {
+        required,
+        validate,
+      })}
+      disabled={disabled}
+    />
+  )
+}

src/app/_components/Input/index.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
 import { FieldValues, UseFormRegister } from 'react-hook-form'
 
+import { InputTypeDefault } from './InputTypes/Default'
+import { InputTypeEmail } from './InputTypes/Email'
+import { InputTypeFile } from './InputTypes/File'
+import { InputTypeTextarea } from './InputTypes/Textarea'
+
 import classes from './index.module.scss'
 
 type Props = {
@@ -13,6 +18,7 @@ type Props = {
   validate?: (value: string) => boolean | string
   placeholder?: string
   disabled?: boolean
+  onChange?: (value: any) => void
 }
 
 export const Input: React.FC<Props> = ({
@@ -25,46 +31,74 @@ export const Input: React.FC<Props> = ({
   validate,
   placeholder,
   disabled,
+  onChange,
 }) => {
-  return (
-    <div className={classes.inputWrap}>
-      <label htmlFor="name" className={classes.label}>
-        {label}
-        {required ? <span className={classes.asterisk}>&nbsp;*</span> : ''}
-      </label>
-      {type === 'textarea' ? (
-        <textarea
-          className={[classes.input, classes.textarea, error && classes.error]
-            .filter(Boolean)
-            .join(' ')}
-          rows={3}
+  let inputType: JSX.Element
+
+  switch (type) {
+    case 'email':
+      inputType = (
+        <InputTypeEmail
+          name={name}
+          required={required}
+          register={register}
+          error={error}
+          validate={validate}
+          placeholder={placeholder}
+          disabled={disabled}
+        />
+      )
+      break
+    case 'textarea':
+      inputType = (
+        <InputTypeTextarea
+          name={name}
+          required={required}
+          register={register}
+          error={error}
+          validate={validate}
           placeholder={placeholder}
-          {...register(name, {
-            required,
-            validate,
-          })}
           disabled={disabled}
         />
-      ) : (
-        <input
-          className={[classes.input, error && classes.error].filter(Boolean).join(' ')}
+      )
+      break
+    case 'file':
+      inputType = (
+        <InputTypeFile
+          name={name}
+          required={required}
+          register={register}
+          error={error}
+          validate={validate}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      )
+      break
+    default:
+      inputType = (
+        <InputTypeDefault
+          name={name}
+          required={required}
+          register={register}
+          error={error}
           type={type}
+          validate={validate}
           placeholder={placeholder}
-          {...register(name, {
-            required,
-            validate,
-            ...(type === 'email'
-              ? {
-                  pattern: {
-                    value: /\S+@\S+\.\S+/,
-                    message: 'Please enter a valid email',
-                  },
-                }
-              : {}),
-          })}
           disabled={disabled}
         />
-      )}
+      )
+      break
+  }
+
+  return (
+    <div className={classes.inputWrap}>
+      <label htmlFor="name" className={classes.label}>
+        {label}
+        {required ? <span className={classes.asterisk}>&nbsp;*</span> : ''}
+      </label>
+      {inputType}
       {error && (
         <div className={classes.errorMessage}>
           {!error?.message && error?.type === 'required'

src/payload/collections/Media.ts

@@ -6,6 +6,7 @@ export const Media: CollectionConfig = {
   slug: 'media',
   upload: {
     staticDir: path.resolve(__dirname, '../../../media'),
+    mimeTypes: ['image/*', 'application/pdf'],
   },
   access: {
     read: () => true,

src/payload/collections/Nominations/index.ts

@@ -118,6 +118,9 @@ const Nominations: CollectionConfig = {
       label: 'Picture of the nominees',
       type: 'upload',
       relationTo: 'media',
+      filterOptions: {
+        mimeType: { contains: 'image' },
+      },
     },
     {
       name: 'droppedOut',