Merge pull request #286 from DevinoSolutions/remove-10mb-limit

 Add Support for Custom maxFileSize Upload Limit

Author: MedAmine1212

package.json

@@ -2,7 +2,7 @@
     "name": "upup-react-file-uploader",
     "author": "Devino Solutions",
     "license": "MIT",
-    "version": "1.5.0",
+    "version": "1.5.1",
     "publishConfig": {
         "access": "public"
     },

pnpm-lock.yaml

@@ -2,8 +2,6 @@ import checkFileType from '../../../shared/lib/checkFileType'
 import { UploadError, UploadErrorType } from '../../../shared/types'
 import { FileParams } from '../../types'
 
-const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB;
-
 export default function fileValidateParams(file: FileParams) {
     // Validate required file params
     const requiredFileParams = ['name', 'type', 'size'] as const
@@ -20,7 +18,7 @@ export default function fileValidateParams(file: FileParams) {
         type: fileType,
         accept = '*',
         size,
-        maxFileSize = DEFAULT_MAX_FILE_SIZE,
+        maxFileSize = file.maxFileSize,
     } = file
 
     // Validate file type against accept pattern
@@ -33,7 +31,7 @@ export default function fileValidateParams(file: FileParams) {
         )
 
     // Validate file size
-    if (size > maxFileSize)
+    if (maxFileSize && size > maxFileSize)
         throw new UploadError(
             `File size: ${size} exceeds maximum limit of ${
                 maxFileSize / (1024 * 1024)

src/backend/lib/files/file-validate-params.ts

@@ -122,8 +122,12 @@ export default function AdapterSelector() {
                         },
                     )}
                 >
-                    Max {maxFileSize.size} {maxFileSize.unit} file
-                    {limit > 1 ? 's are ' : ' is '} allowed
+                    {maxFileSize?.size && maxFileSize?.unit && (
+                        <>
+                            Max {maxFileSize.size} {maxFileSize.unit} file
+                            {limit > 1 ? 's are ' : ' is '}allowed
+                        </>
+                    )}
                 </p>
             </div>
         </div>

src/frontend/components/AdapterSelector.tsx

@@ -41,7 +41,6 @@ type ContextProps = Required<
         | 'isProcessing'
         | 'allowPreview'
         | 'mini'
-        | 'maxFileSize'
         | 'onFileClick'
         | 'onIntegrationClick'
         | 'onFilesDragOver'
@@ -52,10 +51,11 @@ type ContextProps = Required<
         | 'classNames'
         | 'icons'
     >
-> & {
-    multiple: boolean
-    icons: Required<UpupUploaderPropsIcons>
-}
+> &
+    Pick<UpupUploaderProps, 'maxFileSize'> & {
+        multiple: boolean
+        icons: Required<UpupUploaderPropsIcons>
+    }
 
 export interface IRootContext {
     inputRef: RefObject<HTMLInputElement | null>

src/frontend/context/RootContext.ts

@@ -36,7 +36,7 @@ export default function useRootProvider({
     limit: propLimit = 1,
     isProcessing = false,
     allowPreview = true,
-    maxFileSize = { size: 10, unit: 'MB' },
+    maxFileSize,
     shouldCompress = false,
     uploadAdapters = [UploadAdapter.INTERNAL, UploadAdapter.LINK],
     onError: errorHandler,
@@ -151,7 +151,11 @@ export default function useRootProvider({
             if (!checkFileType(accept, file)) {
                 onError(`${file.name} has an unsupported type!`)
                 onFileTypeMismatch(file, accept)
-            } else if (!checkFileSize(file, maxFileSize))
+            } else if (
+                maxFileSize?.size &&
+                maxFileSize?.unit &&
+                !checkFileSize(file, maxFileSize)
+            )
                 onError(
                     `${file.name} is larger than ${maxFileSize.size} ${maxFileSize.unit}!`,
                 )
@@ -240,10 +244,13 @@ export default function useRootProvider({
                     constraints: {
                         multiple,
                         accept,
-                        maxFileSize: sizeToBytes(
-                            maxFileSize.size,
-                            maxFileSize.unit,
-                        ),
+                        maxFileSize:
+                            maxFileSize?.size && maxFileSize?.unit
+                                ? sizeToBytes(
+                                      maxFileSize.size,
+                                      maxFileSize.unit,
+                                  )
+                                : undefined,
                     },
                     customProps,
                     enableAutoCorsConfig,
@@ -296,8 +303,8 @@ export default function useRootProvider({
             tokenEndpoint,
             multiple,
             accept,
-            maxFileSize.size,
-            maxFileSize.unit,
+            maxFileSize?.size,
+            maxFileSize?.unit,
             customProps,
             enableAutoCorsConfig,
             onFilesUploadComplete,

src/frontend/hooks/useRootProvider.ts

@@ -53,6 +53,10 @@ const meta = {
                     onFilesSelected={files => {
                         console.log(files)
                     }}
+                    maxFileSize={{
+                        size: 1,
+                        unit: 'KB',
+                    }}
                     onError={error => {
                         console.error('UpupUploader Error:', error)
                     }}