feat: add 300mb file upload limit for admins

ONEARMY · Oct 30, 2024 · 0c91bb6 · 0c91bb6
1 parent 0d97970
commit 0c91bb6
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 12 deletions.
diff --git a/src/common/Form/FileInput.field.tsx b/src/common/Form/FileInput.field.tsx
@@ -2,7 +2,10 @@ import { FileInput } from './FileInput/FileInput'
 
 import type { FieldProps } from './types'
 
-export const FileInputField = ({ input, ...rest }: FieldProps) => (
+export const FileInputField = ({
+  input,
+  ...rest
+}: FieldProps & { admin: boolean }) => (
   <FileInput
     {...rest}
     onFilesChange={(files) => {

diff --git a/src/common/Form/FileInput/FileInput.tsx b/src/common/Form/FileInput/FileInput.tsx
@@ -6,6 +6,7 @@ import { Button, DownloadStaticFile } from 'oa-components'
 import { Flex } from 'theme-ui'
 
 import { UPPY_CONFIG } from './UppyConfig'
+import { UPPY_CONFIG_ADMIN } from './UppyConfigAdmin'
 
 import type { UppyFile } from '@uppy/core'
 
@@ -18,14 +19,20 @@ interface IUppyFiles {
 interface IProps {
   onFilesChange?: (files: (Blob | File)[]) => void
   'data-cy'?: string
+  admin: boolean
 }
 interface IState {
   open: boolean
 }
 export const FileInput = (props: IProps) => {
   const [state, setState] = useState<IState>({ open: false })
+  const uploadConfig = props.admin ? UPPY_CONFIG_ADMIN : UPPY_CONFIG
   const [uppy] = useState(
-    () => new Uppy({ ...UPPY_CONFIG, onBeforeUpload: () => uploadTriggered() }),
+    () =>
+      new Uppy({
+        ...uploadConfig,
+        onBeforeUpload: () => uploadTriggered(),
+      }),
   )
 
   useEffect(() => {

diff --git a/src/common/Form/FileInput/UppyConfigAdmin.ts b/src/common/Form/FileInput/UppyConfigAdmin.ts
@@ -0,0 +1,26 @@
+import type { UppyOptions } from '@uppy/core'
+
+export const UPPY_CONFIG_ADMIN: Partial<UppyOptions> = {
+  restrictions: {
+    // max upload file size in bytes (i.e. 300 x 1048576 => 300 MB)
+    maxFileSize: 300 * 1048576,
+    maxNumberOfFiles: 5,
+    minNumberOfFiles: null,
+    allowedFileTypes: null,
+  },
+  locale: {
+    strings: {
+      youCanOnlyUploadX: {
+        0: 'You can only upload %{smart_count} file',
+        1: 'You can only upload %{smart_count} files',
+      },
+      youHaveToAtLeastSelectX: {
+        0: 'You have to select at least %{smart_count} file',
+        1: 'You have to select at least %{smart_count} files',
+      },
+      exceedsSize: 'This file exceeds maximum allowed size of %{size}',
+      youCanOnlyUploadFileTypes: 'You can only upload: %{types}',
+      companionError: 'Connection with Companion failed',
+    },
+  },
+}
diff --git a/src/pages/Howto/Content/Common/HowtoFieldFileUpload.tsx b/src/pages/Howto/Content/Common/HowtoFieldFileUpload.tsx
@@ -1,4 +1,6 @@
 import { Field } from 'react-final-form'
+import { UserRole } from 'oa-shared'
+import { AuthWrapper } from 'src/common/AuthWrapper'
 import { FileInputField } from 'src/common/Form/FileInput.field'
 import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
 import { Text } from 'theme-ui'
@@ -10,11 +12,34 @@ export const HowtoFieldFileUpload = () => {
   const name = 'files'
 
   return (
-    <FormFieldWrapper htmlFor={name} text={title}>
-      <Field id={name} name={name} data-cy={name} component={FileInputField} />
-      <Text color={'grey'} mt={4} sx={{ fontSize: 1 }}>
-        {description}
-      </Text>
-    </FormFieldWrapper>
+    <AuthWrapper
+      roleRequired={UserRole.ADMIN}
+      fallback={
+        <FormFieldWrapper htmlFor={name} text={title}>
+          <Field
+            id={name}
+            name={name}
+            data-cy={name}
+            component={FileInputField}
+          />
+          <Text color={'grey'} mt={4} sx={{ fontSize: 1 }}>
+            {description}
+          </Text>
+        </FormFieldWrapper>
+      }
+    >
+      <FormFieldWrapper htmlFor={name} text={title}>
+        <Field
+          id={name}
+          name={name}
+          data-cy={name}
+          admin={true}
+          component={FileInputField}
+        />
+        <Text color={'grey'} mt={4} sx={{ fontSize: 1 }}>
+          {'Maximum file size 300MB'}
+        </Text>
+      </FormFieldWrapper>
+    </AuthWrapper>
   )
 }
diff --git a/src/pages/Research/Content/CreateResearch/Form/FilesFields.tsx b/src/pages/Research/Content/CreateResearch/Form/FilesFields.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { Field } from 'react-final-form'
 import { Button, DownloadStaticFile, FieldInput } from 'oa-components'
+import { UserRole } from 'oa-shared'
+import { AuthWrapper } from 'src/common/AuthWrapper'
 import { FileInputField } from 'src/common/Form/FileInput.field'
 import { MAX_LINK_LENGTH } from 'src/pages/constants'
 import { buttons, update as updateLabels } from 'src/pages/Research/labels'
@@ -77,10 +79,33 @@ const UploadNewFiles = () => {
         <Label mb={2} htmlFor={identity} style={{ fontSize: '12px' }}>
           {files.title}
         </Label>
-        <Field hasText={false} name={'files'} component={FileInputField} />
-        <Text color={'grey'} mt={4} sx={{ fontSize: 1 }}>
-          {files.description}
-        </Text>
+        <AuthWrapper
+          roleRequired={UserRole.ADMIN}
+          fallback={
+            <>
+              <Field
+                hasText={false}
+                name={'files'}
+                component={FileInputField}
+              />
+              <Text color={'grey'} mt={4} sx={{ fontSize: 1 }}>
+                {files.description}
+              </Text>
+            </>
+          }
+        >
+          <>
+            <Field
+              hasText={false}
+              name={'files'}
+              admin={true}
+              component={FileInputField}
+            />
+            <Text color={'grey'} mt={4} sx={{ fontSize: 1 }}>
+              {'Maximum file size 300MB'}
+            </Text>
+          </>
+        </AuthWrapper>
       </Flex>
     </>
   )