keydata upload form and route

Author: tfhuhtal

client/components/UsersPage/index.jsx

@@ -1,16 +1,18 @@
 import React, { useEffect } from 'react'
+import axios from 'axios'
 import { useDispatch, useSelector } from 'react-redux'
 import { Tab } from 'semantic-ui-react'
 import { useTranslation } from 'react-i18next'
 import { getAllUsersAction } from '../../util/redux/usersReducer'
-import { isSuperAdmin } from '../../../config/common'
+import { basePath, isSuperAdmin } from '../../../config/common'
 import UserTable from './UserTable'
 import IamTable from './IamTable'
 import DeadlineInfo from './DeadlineInfo'
 import DeadlineSetting from './DeadlineSetting'
 import UpdateStudyprogrammes from './UpdateStudyprogrammes'
 import TempAccess from './TempAccess'
 import Debug from './Debug'
+import { uploadKeyData } from '@/client/util/redux/keyDataReducer'
 
 export default () => {
   const { t } = useTranslation()
@@ -65,28 +67,44 @@ export default () => {
     panes = [
       ...panes,
       {
-        menuItem: t('users:updateStudyprogrammes'),
-        render: () => (
-          <Tab.Pane>
-            <UpdateStudyprogrammes />
-          </Tab.Pane>
-        ),
+      menuItem: t('users:updateStudyprogrammes'),
+      render: () => (
+        <Tab.Pane>
+        <UpdateStudyprogrammes />
+        </Tab.Pane>
+      ),
+      },
+      {
+      menuItem: t('users:deadlineSettings'),
+      render: () => (
+        <Tab.Pane>
+        <DeadlineSetting />
+        </Tab.Pane>
+      ),
       },
       {
-        menuItem: t('users:deadlineSettings'),
-        render: () => (
-          <Tab.Pane>
-            <DeadlineSetting />
-          </Tab.Pane>
-        ),
+      menuItem: 'Debug',
+      render: () => (
+        <Tab.Pane>
+        <Debug />
+        </Tab.Pane>
+      ),
       },
       {
-        menuItem: 'Debug',
-        render: () => (
-          <Tab.Pane>
-            <Debug />
-          </Tab.Pane>
-        ),
+      menuItem: t('users:uploadKeydata'),
+      render: () => (
+        <Tab.Pane>
+        <form
+          onSubmit={async e => {
+          e.preventDefault()
+          const file = e.target.elements.file.files[0]
+          dispatch(uploadKeyData(file))}}
+        >
+          <input type="file" name="file" />
+          <button type="submit">Upload</button>
+        </form>
+        </Tab.Pane>
+      ),
       },
     ]
   }

client/util/redux/keyDataReducer.ts

@@ -1,4 +1,7 @@
+import axios from 'axios'
 import callBuilder from '../apiConnection'
+import { inProduction, basePath } from '../common'
+import { getHeaders } from '../../../config/mockHeaders'
 interface State {
   data: any;
   pending?: boolean;
@@ -16,6 +19,30 @@ export const fetchKeyData = () => {
   return callBuilder(route, prefix)
 }
 
+export const uploadKeyData = (file: any) => {
+  return async (dispatch: any) => {
+    const route = `${basePath}api/keydata`
+    const defaultHeaders = !inProduction ? getHeaders() : {}
+    const prefix = 'POST_KEY_DATA'
+    const formData = new FormData()
+    formData.append('file', file)
+
+    dispatch({ type: `${prefix}_ATTEMPT` })
+
+    try {
+      await axios.post(route, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          ...defaultHeaders,
+        },
+      })
+      dispatch({ type: `${prefix}_SUCCESS` })
+    } catch (error) {
+      console.error(error);
+      dispatch({ type: `${prefix}_FAILURE` })
+    }
+  };
+};
 export default (state: State = { data: null }, action: Action) => {
   switch (action.type) {
     case 'GET_KEY_DATA_ATTEMPT':

package-lock.json

@@ -53,6 +53,7 @@
     "module-alias": "^2.2.2",
     "moment": "^2.29.4",
     "morgan": "^1.10.0",
+    "multer": "^1.4.5-lts.1",
     "node-cron": "^3.0.3",
     "pg": "^8.6.0",
     "pg-hstore": "^2.3.3",
@@ -91,6 +92,7 @@
   "devDependencies": {
     "@types/compression": "^1.7.5",
     "@types/lodash": "^4.17.14",
+    "@types/multer": "^1.4.12",
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",