From 577e79c4b90714f59fe4241aa1df85cece4debb9 Mon Sep 17 00:00:00 2001
From: Cheng Shi <cks5520psu@gmail.com>
Date: Fri, 6 Feb 2026 16:27:11 -0500
Subject: [PATCH 1/4] feat: upload limit intergation

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 public/locales/en/shared.json                 |  3 +
 public/locales/es/shared.json                 |  3 +
 .../domain/models/DatasetUploadLimits.ts      |  4 +
 .../domain/useCases/getDatasetUploadLimits.ts |  8 ++
 .../file-upload-input/FileUploadInput.tsx     | 25 +++++++
 .../file-upload-input/useUploadLimit.ts       | 65 +++++++++++++++++
 .../FileUploadInputUploadLimits.spec.tsx      | 73 +++++++++++++++++++
 .../file-uploader/useUploadLimit.spec.tsx     | 43 +++++++++++
 10 files changed, 229 insertions(+), 5 deletions(-)
 create mode 100644 src/dataset/domain/models/DatasetUploadLimits.ts
 create mode 100644 src/dataset/domain/useCases/getDatasetUploadLimits.ts
 create mode 100644 src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
 create mode 100644 tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx
 create mode 100644 tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx

diff --git a/package-lock.json b/package-lock.json
index cf249ad1d..f63cd72ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@dnd-kit/sortable": "8.0.0",
         "@dnd-kit/utilities": "3.2.2",
         "@faker-js/faker": "7.6.0",
-        "@iqss/dataverse-client-javascript": "2.0.0-alpha.85",
+        "@iqss/dataverse-client-javascript": "v2.1.0-pr421.6d795bb",
         "@iqss/dataverse-design-system": "*",
         "@istanbuljs/nyc-config-typescript": "1.0.2",
         "@tanstack/react-table": "8.9.2",
@@ -1954,9 +1954,9 @@
     },
     "node_modules/@iqss/dataverse-client-javascript": {
       "name": "@IQSS/dataverse-client-javascript",
-      "version": "2.0.0-alpha.85",
-      "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-alpha.85/9f7d8be5c1fbe022c11fcc6d956bbf1cc4821776",
-      "integrity": "sha512-2aEA0MdkhFjugxImJ3a334jlVbwmNMDVsFXnwPutbbkqn89UMXClMxADkqlmLQ3/4dOMtOrdVDitxYsYmYZ6RQ==",
+      "version": "2.1.0-pr421.6d795bb",
+      "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.1.0-pr421.6d795bb/f4fcb31c1f3f1fe4fd84c3f81bdab8d00555d83a",
+      "integrity": "sha512-EGWgECeBuemUswYnxgJiZtVw+XVYC/V6R/mC4qtvFMsFwqBmvX84JBqgoEVUnLLJ1PHPd+oYEbmUgJt0Vqc0hg==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "^18.15.11",
diff --git a/package.json b/package.json
index 3b8b27edf..4a647ea32 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.85",
+    "@iqss/dataverse-client-javascript": "v2.1.0-pr421.6d795bb",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
diff --git a/public/locales/en/shared.json b/public/locales/en/shared.json
index d4dbc4e26..e00b67b0b 100644
--- a/public/locales/en/shared.json
+++ b/public/locales/en/shared.json
@@ -220,6 +220,9 @@
     "selectFileMultiple": "Select files to add",
     "dragDropSingle": "Drag and drop file here.",
     "dragDropMultiple": "Drag and drop files and/or directories here.",
+    "uploadWidgetHelp": "Select files or drag and drop into the upload widget. Maximum of {{maxFilesPerUpload}} files per upload.",
+    "uploadWidgetMaxFilesHelp": "Maximum of {{maxFilesAvailableToUpload}} files available to upload.",
+    "uploadWidgetStorageQuotaHelp": "Storage quota: {{storageQuotaRemaining}} remaining.",
     "cancelUpload": "Cancel upload",
     "uploadFailed": "There was an error uploading this file.",
     "loadingConfiguration": "Loading configuration",
diff --git a/public/locales/es/shared.json b/public/locales/es/shared.json
index a3010a550..d22e10dcd 100644
--- a/public/locales/es/shared.json
+++ b/public/locales/es/shared.json
@@ -220,6 +220,9 @@
     "selectFileMultiple": "Seleccionar ficheros para agregar",
     "dragDropSingle": "Arrastra y suelta el fichero aquí.",
     "dragDropMultiple": "Arrastra y suelta ficheros y/o directorios aquí.",
+    "uploadWidgetHelp": "Selecciona ficheros o arrástralos y suéltalos en el widget de carga. Máximo de {{maxFilesPerUpload}} ficheros por carga.",
+    "uploadWidgetMaxFilesHelp": "Máximo de {{maxFilesAvailableToUpload}} ficheros disponibles para cargar.",
+    "uploadWidgetStorageQuotaHelp": "Cuota de almacenamiento: {{storageQuotaRemaining}} restantes.",
     "cancelUpload": "Cancelar carga",
     "uploadFailed": "Ocurrió un error al cargar este fichero.",
     "loadingConfiguration": "Cargando configuración",
diff --git a/src/dataset/domain/models/DatasetUploadLimits.ts b/src/dataset/domain/models/DatasetUploadLimits.ts
new file mode 100644
index 000000000..6dbf22205
--- /dev/null
+++ b/src/dataset/domain/models/DatasetUploadLimits.ts
@@ -0,0 +1,4 @@
+export interface DatasetUploadLimits {
+  numberOfFilesRemaining?: number
+  storageQuotaRemaining?: number
+}
diff --git a/src/dataset/domain/useCases/getDatasetUploadLimits.ts b/src/dataset/domain/useCases/getDatasetUploadLimits.ts
new file mode 100644
index 000000000..e28bbebe4
--- /dev/null
+++ b/src/dataset/domain/useCases/getDatasetUploadLimits.ts
@@ -0,0 +1,8 @@
+import { getDatasetUploadLimits as jsGetDatasetUploadLimits } from '@iqss/dataverse-client-javascript'
+import { DatasetUploadLimits } from '../models/DatasetUploadLimits'
+
+export async function getDatasetUploadLimits(
+  datasetId: string | number
+): Promise<DatasetUploadLimits> {
+  return jsGetDatasetUploadLimits.execute(datasetId)
+}
diff --git a/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx b/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
index e24995e0c..b1bf0c072 100644
--- a/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
+++ b/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
@@ -14,6 +14,7 @@ import { OperationType } from '../FileUploader'
 import { FileUploaderHelper } from '../FileUploaderHelper'
 import { SwalModal } from '../../swal-modal/SwalModal'
 import styles from './FileUploadInput.module.scss'
+import { useUploadLimit } from './useUploadLimit'
 
 type FileUploadInputProps = {
   fileRepository: FileRepository
@@ -23,6 +24,8 @@ type FileUploadInputProps = {
 const limit = 6
 const semaphore = new Semaphore(limit)
 
+const maxFilesPerUpload = 1000
+
 const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInputProps) => {
   const {
     fileUploaderState,
@@ -44,6 +47,7 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [isDragging, setIsDragging] = useState(false)
+  const { uploadLimit } = useUploadLimit(datasetPersistentId)
 
   const totalFiles = Object.keys(fileUploaderState.files).length
 
@@ -267,6 +271,27 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
         <Accordion.Item eventKey="0">
           <Accordion.Header>{t('fileUploader.accordionTitle')}</Accordion.Header>
           <Accordion.Body>
+            <p className={styles.helper_text}>
+              {t('fileUploader.uploadWidgetHelp', {
+                maxFilesPerUpload: maxFilesPerUpload.toLocaleString()
+              })}
+              {uploadLimit.maxFilesAvailableToUploadFormatted && (
+                <>
+                  {' '}
+                  {t('fileUploader.uploadWidgetMaxFilesHelp', {
+                    maxFilesAvailableToUpload: uploadLimit.maxFilesAvailableToUploadFormatted
+                  })}
+                </>
+              )}
+              {uploadLimit.storageQuotaRemainingFormatted && (
+                <>
+                  {' '}
+                  {t('fileUploader.uploadWidgetStorageQuotaHelp', {
+                    storageQuotaRemaining: uploadLimit.storageQuotaRemainingFormatted
+                  })}
+                </>
+              )}
+            </p>
             <Card>
               <Card.Header>
                 <Button
diff --git a/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts b/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
new file mode 100644
index 000000000..08186c5b4
--- /dev/null
+++ b/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useState } from 'react'
+import { ReadError } from '@iqss/dataverse-client-javascript'
+import { FileSize, FileSizeUnit } from '@/files/domain/models/FileMetadata'
+import { getDatasetUploadLimits } from '@/dataset/domain/useCases/getDatasetUploadLimits'
+import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
+
+interface UploadLimit {
+  maxFilesAvailableToUploadFormatted?: string
+  storageQuotaRemainingFormatted?: string
+}
+
+export function useUploadLimit(datasetPersistentId: string) {
+  const [uploadLimit, setUploadLimit] = useState<UploadLimit>({})
+  const [isLoadingUploadLimits, setIsLoadingUploadLimits] = useState<boolean>(true)
+  const [errorUploadLimits, setErrorUploadLimits] = useState<string | null>(null)
+
+  const fetchUploadLimits = useCallback(async () => {
+    setIsLoadingUploadLimits(true)
+    setErrorUploadLimits(null)
+
+    try {
+      const limits = await getDatasetUploadLimits(datasetPersistentId)
+
+      if (Object.keys(limits).length === 0) {
+        setUploadLimit({})
+        return
+      }
+
+      setUploadLimit({
+        maxFilesAvailableToUploadFormatted:
+          limits.numberOfFilesRemaining !== undefined
+            ? limits.numberOfFilesRemaining.toLocaleString()
+            : undefined,
+        storageQuotaRemainingFormatted:
+          limits.storageQuotaRemaining !== undefined
+            ? new FileSize(limits.storageQuotaRemaining, FileSizeUnit.BYTES).toString()
+            : undefined
+      })
+    } catch (error) {
+      setUploadLimit({})
+      if (error instanceof ReadError) {
+        const readError = new JSDataverseReadErrorHandler(error)
+        const formattedError =
+          readError.getReasonWithoutStatusCode() ??
+          /* istanbul ignore next */ readError.getErrorMessage()
+        setErrorUploadLimits(formattedError)
+      } else {
+        setErrorUploadLimits('Something went wrong getting the upload limits. Try again later.')
+      }
+    } finally {
+      setIsLoadingUploadLimits(false)
+    }
+  }, [datasetPersistentId])
+
+  useEffect(() => {
+    void fetchUploadLimits()
+  }, [fetchUploadLimits])
+
+  return {
+    uploadLimit,
+    isLoadingUploadLimits,
+    errorUploadLimits,
+    fetchUploadLimits
+  }
+}
diff --git a/tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx b/tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx
new file mode 100644
index 000000000..54bc4fad8
--- /dev/null
+++ b/tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx
@@ -0,0 +1,73 @@
+import FileUploadInput from '@/sections/shared/file-uploader/file-upload-input/FileUploadInput'
+import { FileMockRepository } from '@/stories/file/FileMockRepository'
+import { WithFileUploaderContext } from '@/stories/shared/file-uploader/WithFileUploaderContext'
+import { OperationType } from '@/sections/shared/file-uploader/FileUploader'
+import * as uploadLimitsUseCase from '@/dataset/domain/useCases/getDatasetUploadLimits'
+
+const DATASET_PERSISTENT_ID = 'doi:10.5072/FK2/8YOKQI'
+
+describe('FileUploadInput upload limits', () => {
+  let getDatasetUploadLimitsStub: sinon.SinonStub
+
+  const mountComponent = () => {
+    cy.customMount(
+      <WithFileUploaderContext mode={OperationType.ADD_FILES_TO_DATASET}>
+        <FileUploadInput
+          datasetPersistentId={DATASET_PERSISTENT_ID}
+          fileRepository={new FileMockRepository()}
+        />
+      </WithFileUploaderContext>
+    )
+  }
+
+  beforeEach(() => {
+    getDatasetUploadLimitsStub = cy.stub(uploadLimitsUseCase, 'getDatasetUploadLimits')
+  })
+
+  afterEach(() => {
+    getDatasetUploadLimitsStub.restore()
+  })
+
+  it('renders both limit messages when both limits are present', () => {
+    getDatasetUploadLimitsStub.resolves({
+      numberOfFilesRemaining: 20,
+      storageQuotaRemaining: 1048576
+    })
+
+    mountComponent()
+
+    cy.findByText('Maximum of 20 files available to upload.').should('exist')
+    cy.findByText('Storage quota: 1 MB remaining.').should('exist')
+  })
+
+  it('renders only max files message when storage quota is missing', () => {
+    getDatasetUploadLimitsStub.resolves({
+      numberOfFilesRemaining: 10
+    })
+
+    mountComponent()
+
+    cy.findByText('Maximum of 10 files available to upload.').should('exist')
+    cy.findByText('Storage quota:').should('not.exist')
+  })
+
+  it('renders only storage quota message when max files is missing', () => {
+    getDatasetUploadLimitsStub.resolves({
+      storageQuotaRemaining: 2048
+    })
+
+    mountComponent()
+
+    cy.findByText('Storage quota: 2 KB remaining.').should('exist')
+    cy.findByText('files available to upload.').should('not.exist')
+  })
+
+  it('renders no limit messages when no limits are present', () => {
+    getDatasetUploadLimitsStub.resolves({})
+
+    mountComponent()
+
+    cy.findByText('files available to upload.').should('not.exist')
+    cy.findByText('Storage quota:').should('not.exist')
+  })
+})
diff --git a/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx b/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
new file mode 100644
index 000000000..53e7b34ea
--- /dev/null
+++ b/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
@@ -0,0 +1,43 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { useUploadLimit } from '@/sections/shared/file-uploader/file-upload-input/useUploadLimit'
+import * as uploadLimitsUseCase from '@/dataset/domain/useCases/getDatasetUploadLimits'
+
+const DATASET_PERSISTENT_ID = 'doi:10.5072/FK2/8YOKQI'
+
+describe('useUploadLimit', () => {
+  let getDatasetUploadLimitsStub: sinon.SinonStub
+
+  beforeEach(() => {
+    getDatasetUploadLimitsStub = cy.stub(uploadLimitsUseCase, 'getDatasetUploadLimits')
+  })
+
+  afterEach(() => {
+    getDatasetUploadLimitsStub.restore()
+  })
+
+  it('formats upload limit values when limits are present', async () => {
+    getDatasetUploadLimitsStub.resolves({
+      numberOfFilesRemaining: 1200,
+      storageQuotaRemaining: 1048576
+    })
+
+    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID))
+
+    await waitFor(() => {
+      expect(result.current.isLoadingUploadLimits).to.equal(false)
+      expect(result.current.uploadLimit.maxFilesAvailableToUploadFormatted).to.equal('1,200')
+      expect(result.current.uploadLimit.storageQuotaRemainingFormatted).to.equal('1 MB')
+    })
+  })
+
+  it('returns empty uploadLimit when no limits are present', async () => {
+    getDatasetUploadLimitsStub.resolves({})
+
+    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID))
+
+    await waitFor(() => {
+      expect(result.current.isLoadingUploadLimits).to.equal(false)
+      expect(result.current.uploadLimit).to.deep.equal({})
+    })
+  })
+})

From 19017c5301a55a5b64e5fd7fccb68925882df81a Mon Sep 17 00:00:00 2001
From: Cheng Shi <cks5520psu@gmail.com>
Date: Mon, 9 Feb 2026 11:03:40 -0500
Subject: [PATCH 2/4] feat: upload limit test

---
 .../shared/file-uploader/FileUploader.tsx     |  7 +-
 .../file-uploader/FileUploaderPanel.tsx       | 11 ++-
 .../file-upload-input/FileUploadInput.tsx     | 10 ++-
 .../file-upload-input/useUploadLimit.ts       | 18 +++--
 .../FileUploadInputUploadLimits.spec.tsx      | 73 -------------------
 .../file-uploader/FileUploader.spec.tsx       | 58 +++++++++++++++
 .../file-uploader/useUploadLimit.spec.tsx     | 37 +++++-----
 7 files changed, 109 insertions(+), 105 deletions(-)
 delete mode 100644 tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx

diff --git a/src/sections/shared/file-uploader/FileUploader.tsx b/src/sections/shared/file-uploader/FileUploader.tsx
index b49a5101e..0ad2eec6f 100644
--- a/src/sections/shared/file-uploader/FileUploader.tsx
+++ b/src/sections/shared/file-uploader/FileUploader.tsx
@@ -1,5 +1,6 @@
 import { File as FileModel } from '@/files/domain/models/File'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 import { ReplaceFileReferrer } from '@/sections/replace-file/ReplaceFile'
 import { FileUploaderProvider } from './context/FileUploaderContext'
 import { useGetFixityAlgorithm } from './useGetFixityAlgorithm'
@@ -15,6 +16,7 @@ type FileUploaderProps =
       operationType: OperationType.REPLACE_FILE
       originalFile: FileModel
       referrer?: ReplaceFileReferrer
+      fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
     }
   | {
       fileRepository: FileRepository
@@ -23,6 +25,7 @@ type FileUploaderProps =
       operationType: OperationType.ADD_FILES_TO_DATASET
       originalFile?: never
       referrer?: never
+      fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
     }
 
 export type StorageType = 'S3'
@@ -41,7 +44,8 @@ export const FileUploader = ({
   storageType,
   operationType,
   originalFile,
-  referrer
+  referrer,
+  fetchUploadLimits
 }: FileUploaderProps) => {
   const { fixityAlgorithm, isLoadingFixityAlgorithm } = useGetFixityAlgorithm(fileRepository)
 
@@ -68,6 +72,7 @@ export const FileUploader = ({
       <FileUploaderPanel
         fileRepository={fileRepository}
         datasetPersistentId={datasetPersistentId}
+        fetchUploadLimits={fetchUploadLimits}
         referrer={referrer}
       />
     </FileUploaderProvider>
diff --git a/src/sections/shared/file-uploader/FileUploaderPanel.tsx b/src/sections/shared/file-uploader/FileUploaderPanel.tsx
index 5fbb1986b..88909f352 100644
--- a/src/sections/shared/file-uploader/FileUploaderPanel.tsx
+++ b/src/sections/shared/file-uploader/FileUploaderPanel.tsx
@@ -12,17 +12,20 @@ import { useFileUploaderContext } from './context/FileUploaderContext'
 import FileUploadInput from './file-upload-input/FileUploadInput'
 import { UploadedFilesList } from './uploaded-files-list/UploadedFilesList'
 import { ConfirmLeaveModal } from './confirm-leave-modal/ConfirmLeaveModal'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 
 interface FileUploaderPanelProps {
   fileRepository: FileRepository
   datasetPersistentId: string
   referrer?: ReplaceFileReferrer
+  fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
 }
 
 const FileUploaderPanel = ({
   fileRepository,
   datasetPersistentId,
-  referrer
+  referrer,
+  fetchUploadLimits
 }: FileUploaderPanelProps) => {
   const { t } = useTranslation('shared')
   const navigate = useNavigate()
@@ -101,7 +104,11 @@ const FileUploaderPanel = ({
 
   return (
     <Stack gap={4}>
-      <FileUploadInput fileRepository={fileRepository} datasetPersistentId={datasetPersistentId} />
+      <FileUploadInput
+        fileRepository={fileRepository}
+        datasetPersistentId={datasetPersistentId}
+        fetchUploadLimits={fetchUploadLimits}
+      />
 
       {uploadedFiles.length > 0 && (
         <UploadedFilesList
diff --git a/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx b/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
index b1bf0c072..893f0e496 100644
--- a/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
+++ b/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
@@ -8,6 +8,7 @@ import cn from 'classnames'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import MimeTypeDisplay from '@/files/domain/models/FileTypeToFriendlyTypeMap'
 import { uploadFile } from '@/files/domain/useCases/uploadFile'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 import { useFileUploaderContext } from '../context/FileUploaderContext'
 import { FileUploadState, FileUploadStatus } from '../context/fileUploaderReducer'
 import { OperationType } from '../FileUploader'
@@ -19,6 +20,7 @@ import { useUploadLimit } from './useUploadLimit'
 type FileUploadInputProps = {
   fileRepository: FileRepository
   datasetPersistentId: string
+  fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
 }
 
 const limit = 6
@@ -26,7 +28,11 @@ const semaphore = new Semaphore(limit)
 
 const maxFilesPerUpload = 1000
 
-const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInputProps) => {
+const FileUploadInput = ({
+  fileRepository,
+  datasetPersistentId,
+  fetchUploadLimits
+}: FileUploadInputProps) => {
   const {
     fileUploaderState,
     addFile,
@@ -47,7 +53,7 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [isDragging, setIsDragging] = useState(false)
-  const { uploadLimit } = useUploadLimit(datasetPersistentId)
+  const { uploadLimit } = useUploadLimit(datasetPersistentId, fetchUploadLimits)
 
   const totalFiles = Object.keys(fileUploaderState.files).length
 
diff --git a/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts b/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
index 08186c5b4..37a257dbc 100644
--- a/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
+++ b/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { ReadError } from '@iqss/dataverse-client-javascript'
 import { FileSize, FileSizeUnit } from '@/files/domain/models/FileMetadata'
 import { getDatasetUploadLimits } from '@/dataset/domain/useCases/getDatasetUploadLimits'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
 
 interface UploadLimit {
@@ -9,17 +10,20 @@ interface UploadLimit {
   storageQuotaRemainingFormatted?: string
 }
 
-export function useUploadLimit(datasetPersistentId: string) {
+export function useUploadLimit(
+  datasetPersistentId: string,
+  fetchUploadLimits: (datasetId: string) => Promise<DatasetUploadLimits> = getDatasetUploadLimits
+) {
   const [uploadLimit, setUploadLimit] = useState<UploadLimit>({})
   const [isLoadingUploadLimits, setIsLoadingUploadLimits] = useState<boolean>(true)
   const [errorUploadLimits, setErrorUploadLimits] = useState<string | null>(null)
 
-  const fetchUploadLimits = useCallback(async () => {
+  const fetchUploadLimitsCallback = useCallback(async () => {
     setIsLoadingUploadLimits(true)
     setErrorUploadLimits(null)
 
     try {
-      const limits = await getDatasetUploadLimits(datasetPersistentId)
+      const limits = await fetchUploadLimits(datasetPersistentId)
 
       if (Object.keys(limits).length === 0) {
         setUploadLimit({})
@@ -50,16 +54,16 @@ export function useUploadLimit(datasetPersistentId: string) {
     } finally {
       setIsLoadingUploadLimits(false)
     }
-  }, [datasetPersistentId])
+  }, [datasetPersistentId, fetchUploadLimits])
 
   useEffect(() => {
-    void fetchUploadLimits()
-  }, [fetchUploadLimits])
+    void fetchUploadLimitsCallback()
+  }, [fetchUploadLimitsCallback])
 
   return {
     uploadLimit,
     isLoadingUploadLimits,
     errorUploadLimits,
-    fetchUploadLimits
+    fetchUploadLimits: fetchUploadLimitsCallback
   }
 }
diff --git a/tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx b/tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx
deleted file mode 100644
index 54bc4fad8..000000000
--- a/tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import FileUploadInput from '@/sections/shared/file-uploader/file-upload-input/FileUploadInput'
-import { FileMockRepository } from '@/stories/file/FileMockRepository'
-import { WithFileUploaderContext } from '@/stories/shared/file-uploader/WithFileUploaderContext'
-import { OperationType } from '@/sections/shared/file-uploader/FileUploader'
-import * as uploadLimitsUseCase from '@/dataset/domain/useCases/getDatasetUploadLimits'
-
-const DATASET_PERSISTENT_ID = 'doi:10.5072/FK2/8YOKQI'
-
-describe('FileUploadInput upload limits', () => {
-  let getDatasetUploadLimitsStub: sinon.SinonStub
-
-  const mountComponent = () => {
-    cy.customMount(
-      <WithFileUploaderContext mode={OperationType.ADD_FILES_TO_DATASET}>
-        <FileUploadInput
-          datasetPersistentId={DATASET_PERSISTENT_ID}
-          fileRepository={new FileMockRepository()}
-        />
-      </WithFileUploaderContext>
-    )
-  }
-
-  beforeEach(() => {
-    getDatasetUploadLimitsStub = cy.stub(uploadLimitsUseCase, 'getDatasetUploadLimits')
-  })
-
-  afterEach(() => {
-    getDatasetUploadLimitsStub.restore()
-  })
-
-  it('renders both limit messages when both limits are present', () => {
-    getDatasetUploadLimitsStub.resolves({
-      numberOfFilesRemaining: 20,
-      storageQuotaRemaining: 1048576
-    })
-
-    mountComponent()
-
-    cy.findByText('Maximum of 20 files available to upload.').should('exist')
-    cy.findByText('Storage quota: 1 MB remaining.').should('exist')
-  })
-
-  it('renders only max files message when storage quota is missing', () => {
-    getDatasetUploadLimitsStub.resolves({
-      numberOfFilesRemaining: 10
-    })
-
-    mountComponent()
-
-    cy.findByText('Maximum of 10 files available to upload.').should('exist')
-    cy.findByText('Storage quota:').should('not.exist')
-  })
-
-  it('renders only storage quota message when max files is missing', () => {
-    getDatasetUploadLimitsStub.resolves({
-      storageQuotaRemaining: 2048
-    })
-
-    mountComponent()
-
-    cy.findByText('Storage quota: 2 KB remaining.').should('exist')
-    cy.findByText('files available to upload.').should('not.exist')
-  })
-
-  it('renders no limit messages when no limits are present', () => {
-    getDatasetUploadLimitsStub.resolves({})
-
-    mountComponent()
-
-    cy.findByText('files available to upload.').should('not.exist')
-    cy.findByText('Storage quota:').should('not.exist')
-  })
-})
diff --git a/tests/component/sections/shared/file-uploader/FileUploader.spec.tsx b/tests/component/sections/shared/file-uploader/FileUploader.spec.tsx
index e4d43a08f..1faebfb88 100644
--- a/tests/component/sections/shared/file-uploader/FileUploader.spec.tsx
+++ b/tests/component/sections/shared/file-uploader/FileUploader.spec.tsx
@@ -1007,4 +1007,62 @@ describe('FileUploader', () => {
       })
     })
   })
+
+  describe.only('upload limits UI', () => {
+    it('shows both upload limit messages when both limits are present', () => {
+      const fetchUploadLimits = cy.stub().resolves({
+        numberOfFilesRemaining: 20,
+        storageQuotaRemaining: 1048576
+      })
+
+      cy.customMount(
+        <FileUploader
+          fileRepository={fileMockRepository}
+          datasetPersistentId=":latest"
+          storageType="S3"
+          operationType={OperationType.ADD_FILES_TO_DATASET}
+          fetchUploadLimits={fetchUploadLimits}
+        />
+      )
+
+      cy.findByText(/Maximum of 20 files available to upload./i).should('exist')
+      cy.findByText(/Storage quota: 1 MB remaining./i).should('exist')
+    })
+
+    it('shows only the available limit message when one limit is missing', () => {
+      const fetchUploadLimits = cy.stub().resolves({
+        numberOfFilesRemaining: 5
+      })
+
+      cy.customMount(
+        <FileUploader
+          fileRepository={fileMockRepository}
+          datasetPersistentId=":latest"
+          storageType="S3"
+          operationType={OperationType.ADD_FILES_TO_DATASET}
+          fetchUploadLimits={fetchUploadLimits}
+        />
+      )
+
+      cy.findByText(/Maximum of 5 files available to upload./i).should('exist')
+      cy.findByText(/Storage quota:/i).should('not.exist')
+    })
+
+    it('does not show limits message when limits are not present', () => {
+      const fetchUploadLimits = cy.stub().resolves({})
+
+      cy.customMount(
+        <FileUploader
+          fileRepository={fileMockRepository}
+          datasetPersistentId=":latest"
+          storageType="S3"
+          operationType={OperationType.ADD_FILES_TO_DATASET}
+          fetchUploadLimits={fetchUploadLimits}
+        />
+      )
+
+      cy.findByText(/Maximum of \d+ files available to upload./i).should('not.exist')
+      cy.findByText(/Storage quota:/i).should('not.exist')
+    })
+  })
 })
diff --git a/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx b/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
index 53e7b34ea..beea74256 100644
--- a/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
+++ b/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
@@ -1,39 +1,36 @@
-import { renderHook, waitFor } from '@testing-library/react'
+import { act, renderHook, waitFor } from '@testing-library/react'
 import { useUploadLimit } from '@/sections/shared/file-uploader/file-upload-input/useUploadLimit'
-import * as uploadLimitsUseCase from '@/dataset/domain/useCases/getDatasetUploadLimits'
 
 const DATASET_PERSISTENT_ID = 'doi:10.5072/FK2/8YOKQI'
 
 describe('useUploadLimit', () => {
-  let getDatasetUploadLimitsStub: sinon.SinonStub
-
-  beforeEach(() => {
-    getDatasetUploadLimitsStub = cy.stub(uploadLimitsUseCase, 'getDatasetUploadLimits')
-  })
-
-  afterEach(() => {
-    getDatasetUploadLimitsStub.restore()
-  })
-
   it('formats upload limit values when limits are present', async () => {
-    getDatasetUploadLimitsStub.resolves({
+    const fetchUploadLimits = cy.stub().resolves({
       numberOfFilesRemaining: 1200,
       storageQuotaRemaining: 1048576
     })
 
-    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID))
+    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID, fetchUploadLimits))
 
-    await waitFor(() => {
-      expect(result.current.isLoadingUploadLimits).to.equal(false)
-      expect(result.current.uploadLimit.maxFilesAvailableToUploadFormatted).to.equal('1,200')
-      expect(result.current.uploadLimit.storageQuotaRemainingFormatted).to.equal('1 MB')
+    await act(() => {
+      expect(result.current.isLoadingUploadLimits).to.deep.equal(true)
+      return expect(result.current.uploadLimit).to.deep.equal({})
+    })
+
+    await act(() => {
+      expect(result.current.isLoadingUploadLimits).to.deep.equal(false)
+
+      return expect(result.current.uploadLimit).to.deep.equal({
+        maxFilesAvailableToUploadFormatted: '1,200',
+        storageQuotaRemainingFormatted: '1 MB'
+      })
     })
   })
 
   it('returns empty uploadLimit when no limits are present', async () => {
-    getDatasetUploadLimitsStub.resolves({})
+    const fetchUploadLimits = cy.stub().resolves({})
 
-    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID))
+    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID, fetchUploadLimits))
 
     await waitFor(() => {
       expect(result.current.isLoadingUploadLimits).to.equal(false)

From cce5d6cc7863d86ba27eabba2bca41cfe8d575e9 Mon Sep 17 00:00:00 2001
From: Cheng Shi <cks5520psu@gmail.com>
Date: Thu, 12 Feb 2026 12:29:04 -0500
Subject: [PATCH 3/4] fix: add storybook and replace the call from jsdataverse

---
 .../domain/repositories/DatasetRepository.ts  |  2 ++
 .../domain/useCases/getDatasetUploadLimits.ts |  7 +++---
 .../DatasetJSDataverseRepository.ts           |  8 +++++-
 src/sections/replace-file/ReplaceFile.tsx     |  4 +++
 .../replace-file/ReplaceFileFactory.tsx       |  3 +++
 .../shared/file-uploader/FileUploader.tsx     | 15 +++++++++--
 .../file-uploader/FileUploaderPanel.tsx       |  9 ++++++-
 .../file-upload-input/FileUploadInput.tsx     | 14 ++++++++---
 .../file-upload-input/useUploadLimit.ts       | 11 +++++---
 .../UploadDatasetFiles.tsx                    |  8 +++++-
 .../UploadDatasetFilesFactory.tsx             |  2 +-
 .../dataset/DatasetErrorMockRepository.ts     |  9 +++++++
 src/stories/dataset/DatasetMockRepository.ts  | 12 +++++++++
 .../replace-file/ReplaceFile.stories.tsx      |  2 ++
 .../file-uploader/FileUploadInput.stories.tsx | 25 +++++++++++++++++--
 .../file-uploader/FileUploader.stories.tsx    |  3 +++
 .../UploadDatasetFiles.stories.tsx            |  8 +++++-
 17 files changed, 123 insertions(+), 19 deletions(-)

diff --git a/src/dataset/domain/repositories/DatasetRepository.ts b/src/dataset/domain/repositories/DatasetRepository.ts
index 4a3e332dd..1bd783499 100644
--- a/src/dataset/domain/repositories/DatasetRepository.ts
+++ b/src/dataset/domain/repositories/DatasetRepository.ts
@@ -11,6 +11,7 @@ import { FormattedCitation, CitationFormat } from '../models/DatasetCitation'
 import { DatasetLicenseUpdateRequest } from '../models/DatasetLicenseUpdateRequest'
 import { CollectionSummary } from '@/collection/domain/models/CollectionSummary'
 import { DatasetVersionPaginationInfo } from '../models/DatasetVersionPaginationInfo'
+import { DatasetUploadLimits } from '../models/DatasetUploadLimits'
 
 export interface DatasetRepository {
   getByPersistentId: (
@@ -68,4 +69,5 @@ export interface DatasetRepository {
   link(datasetId: string | number, collectionIdOrAlias: string | number): Promise<void>
   unlink(datasetId: string | number, collectionIdOrAlias: string | number): Promise<void>
   getDatasetLinkedCollections: (datasetId: string | number) => Promise<CollectionSummary[]>
+  getDatasetUploadLimits: (datasetId: string | number) => Promise<DatasetUploadLimits>
 }
diff --git a/src/dataset/domain/useCases/getDatasetUploadLimits.ts b/src/dataset/domain/useCases/getDatasetUploadLimits.ts
index e28bbebe4..fb9a5f63f 100644
--- a/src/dataset/domain/useCases/getDatasetUploadLimits.ts
+++ b/src/dataset/domain/useCases/getDatasetUploadLimits.ts
@@ -1,8 +1,9 @@
-import { getDatasetUploadLimits as jsGetDatasetUploadLimits } from '@iqss/dataverse-client-javascript'
+import { DatasetRepository } from '../repositories/DatasetRepository'
 import { DatasetUploadLimits } from '../models/DatasetUploadLimits'
 
 export async function getDatasetUploadLimits(
-  datasetId: string | number
+  datasetId: string | number,
+  datasetRepository: DatasetRepository
 ): Promise<DatasetUploadLimits> {
-  return jsGetDatasetUploadLimits.execute(datasetId)
+  return datasetRepository.getDatasetUploadLimits(datasetId)
 }
diff --git a/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts b/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts
index 7dd2f3354..a26660169 100644
--- a/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts
+++ b/src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts
@@ -43,7 +43,8 @@ import {
   unlinkDataset,
   getDatasetLinkedCollections,
   updateTermsOfAccess,
-  updateDatasetLicense
+  updateDatasetLicense,
+  getDatasetUploadLimits
 } from '@iqss/dataverse-client-javascript'
 import { JSDatasetMapper } from '../mappers/JSDatasetMapper'
 import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo'
@@ -62,6 +63,7 @@ import { requireAppConfig } from '../../../config'
 import { AxiosResponse } from 'axios'
 import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
 import { CollectionSummary } from '@/collection/domain/models/CollectionSummary'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 
 const includeDeaccessioned = true
 
@@ -468,4 +470,8 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
   updateTermsOfAccess(datasetId: string | number, termsOfAccess: TermsOfAccess): Promise<void> {
     return updateTermsOfAccess.execute(datasetId, termsOfAccess)
   }
+
+  getDatasetUploadLimits(datasetId: string | number): Promise<DatasetUploadLimits> {
+    return getDatasetUploadLimits.execute(datasetId)
+  }
 }
diff --git a/src/sections/replace-file/ReplaceFile.tsx b/src/sections/replace-file/ReplaceFile.tsx
index ea8382456..401782721 100644
--- a/src/sections/replace-file/ReplaceFile.tsx
+++ b/src/sections/replace-file/ReplaceFile.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import { useFile } from '../file/useFile'
 import { useLoading } from '../../shared/contexts/loading/LoadingContext'
@@ -13,6 +14,7 @@ import styles from './ReplaceFile.module.scss'
 
 interface ReplaceFileProps {
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
   fileIdFromParams: number
   datasetPidFromParams: string
   datasetVersionFromParams: string
@@ -27,6 +29,7 @@ export enum ReplaceFileReferrer {
 
 export const ReplaceFile = ({
   fileRepository,
+  datasetRepository,
   fileIdFromParams,
   datasetPidFromParams,
   datasetVersionFromParams,
@@ -78,6 +81,7 @@ export const ReplaceFile = ({
           <div className={styles.tab_container}>
             <FileUploader
               fileRepository={fileRepository}
+              datasetRepository={datasetRepository}
               datasetPersistentId={datasetPidFromParams}
               storageType="S3"
               operationType={OperationType.REPLACE_FILE}
diff --git a/src/sections/replace-file/ReplaceFileFactory.tsx b/src/sections/replace-file/ReplaceFileFactory.tsx
index 15ac547af..49f4bd1c5 100644
--- a/src/sections/replace-file/ReplaceFileFactory.tsx
+++ b/src/sections/replace-file/ReplaceFileFactory.tsx
@@ -1,11 +1,13 @@
 import { ReactElement } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { FileJSDataverseRepository } from '@/files/infrastructure/FileJSDataverseRepository'
+import { DatasetJSDataverseRepository } from '@/dataset/infrastructure/repositories/DatasetJSDataverseRepository'
 import { ReplaceFile, ReplaceFileReferrer } from './ReplaceFile'
 import { QueryParamKey } from '../Route.enum'
 import { searchParamVersionToDomainVersion } from '@/router'
 
 const fileRepository = new FileJSDataverseRepository()
+const datasetRepository = new DatasetJSDataverseRepository()
 
 export class ReplaceFileFactory {
   static create(): ReactElement {
@@ -37,6 +39,7 @@ function ReplaceFileWithParams() {
   return (
     <ReplaceFile
       fileRepository={fileRepository}
+      datasetRepository={datasetRepository}
       fileIdFromParams={fileId}
       datasetPidFromParams={datasetId}
       datasetVersionFromParams={datasetVersionNumber}
diff --git a/src/sections/shared/file-uploader/FileUploader.tsx b/src/sections/shared/file-uploader/FileUploader.tsx
index 0ad2eec6f..7c914d2cf 100644
--- a/src/sections/shared/file-uploader/FileUploader.tsx
+++ b/src/sections/shared/file-uploader/FileUploader.tsx
@@ -1,6 +1,7 @@
 import { File as FileModel } from '@/files/domain/models/File'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { ReplaceFileReferrer } from '@/sections/replace-file/ReplaceFile'
 import { FileUploaderProvider } from './context/FileUploaderContext'
 import { useGetFixityAlgorithm } from './useGetFixityAlgorithm'
@@ -11,21 +12,29 @@ import FileUploaderPanel from './FileUploaderPanel'
 type FileUploaderProps =
   | {
       fileRepository: FileRepository
+      datasetRepository: DatasetRepository
       datasetPersistentId: string
       storageType: StorageType
       operationType: OperationType.REPLACE_FILE
       originalFile: FileModel
       referrer?: ReplaceFileReferrer
-      fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
+      fetchUploadLimits?: (
+        datasetId: string | number,
+        datasetRepository: DatasetRepository
+      ) => Promise<DatasetUploadLimits>
     }
   | {
       fileRepository: FileRepository
+      datasetRepository: DatasetRepository
       datasetPersistentId: string
       storageType: StorageType
       operationType: OperationType.ADD_FILES_TO_DATASET
       originalFile?: never
       referrer?: never
-      fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
+      fetchUploadLimits?: (
+        datasetId: string | number,
+        datasetRepository: DatasetRepository
+      ) => Promise<DatasetUploadLimits>
     }
 
 export type StorageType = 'S3'
@@ -40,6 +49,7 @@ export enum OperationType {
 
 export const FileUploader = ({
   fileRepository,
+  datasetRepository,
   datasetPersistentId,
   storageType,
   operationType,
@@ -71,6 +81,7 @@ export const FileUploader = ({
     <FileUploaderProvider initialConfig={initialConfig}>
       <FileUploaderPanel
         fileRepository={fileRepository}
+        datasetRepository={datasetRepository}
         datasetPersistentId={datasetPersistentId}
         fetchUploadLimits={fetchUploadLimits}
         referrer={referrer}
diff --git a/src/sections/shared/file-uploader/FileUploaderPanel.tsx b/src/sections/shared/file-uploader/FileUploaderPanel.tsx
index 88909f352..899f94bd8 100644
--- a/src/sections/shared/file-uploader/FileUploaderPanel.tsx
+++ b/src/sections/shared/file-uploader/FileUploaderPanel.tsx
@@ -7,6 +7,7 @@ import { Stack } from '@iqss/dataverse-design-system'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import { QueryParamKey, Route } from '@/sections/Route.enum'
 import { DatasetNonNumericVersionSearchParam } from '@/dataset/domain/models/Dataset'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { ReplaceFileReferrer } from '@/sections/replace-file/ReplaceFile'
 import { useFileUploaderContext } from './context/FileUploaderContext'
 import FileUploadInput from './file-upload-input/FileUploadInput'
@@ -16,13 +17,18 @@ import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits
 
 interface FileUploaderPanelProps {
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
   datasetPersistentId: string
   referrer?: ReplaceFileReferrer
-  fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
+  fetchUploadLimits?: (
+    datasetId: string | number,
+    datasetRepository: DatasetRepository
+  ) => Promise<DatasetUploadLimits>
 }
 
 const FileUploaderPanel = ({
   fileRepository,
+  datasetRepository,
   datasetPersistentId,
   referrer,
   fetchUploadLimits
@@ -106,6 +112,7 @@ const FileUploaderPanel = ({
     <Stack gap={4}>
       <FileUploadInput
         fileRepository={fileRepository}
+        datasetRepository={datasetRepository}
         datasetPersistentId={datasetPersistentId}
         fetchUploadLimits={fetchUploadLimits}
       />
diff --git a/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx b/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
index 893f0e496..4c385da67 100644
--- a/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
+++ b/src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx
@@ -1,4 +1,4 @@
-import { ChangeEventHandler, DragEventHandler, memo, useRef, useState } from 'react'
+import { ChangeEventHandler, DragEventHandler, useRef, useState } from 'react'
 import { Accordion, Button, Card, ProgressBar } from '@iqss/dataverse-design-system'
 import { ExclamationTriangle, Plus, XLg } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import MimeTypeDisplay from '@/files/domain/models/FileTypeToFriendlyTypeMap'
 import { uploadFile } from '@/files/domain/useCases/uploadFile'
 import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { useFileUploaderContext } from '../context/FileUploaderContext'
 import { FileUploadState, FileUploadStatus } from '../context/fileUploaderReducer'
 import { OperationType } from '../FileUploader'
@@ -19,8 +20,12 @@ import { useUploadLimit } from './useUploadLimit'
 
 type FileUploadInputProps = {
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
   datasetPersistentId: string
-  fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
+  fetchUploadLimits?: (
+    datasetId: string | number,
+    datasetRepository: DatasetRepository
+  ) => Promise<DatasetUploadLimits>
 }
 
 const limit = 6
@@ -30,6 +35,7 @@ const maxFilesPerUpload = 1000
 
 const FileUploadInput = ({
   fileRepository,
+  datasetRepository,
   datasetPersistentId,
   fetchUploadLimits
 }: FileUploadInputProps) => {
@@ -53,7 +59,7 @@ const FileUploadInput = ({
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [isDragging, setIsDragging] = useState(false)
-  const { uploadLimit } = useUploadLimit(datasetPersistentId, fetchUploadLimits)
+  const { uploadLimit } = useUploadLimit(datasetPersistentId, datasetRepository, fetchUploadLimits)
 
   const totalFiles = Object.keys(fileUploaderState.files).length
 
@@ -391,4 +397,4 @@ const FileUploadInput = ({
   )
 }
 
-export default memo(FileUploadInput)
+export default FileUploadInput
diff --git a/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts b/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
index 37a257dbc..399f8e126 100644
--- a/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
+++ b/src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts
@@ -3,6 +3,7 @@ import { ReadError } from '@iqss/dataverse-client-javascript'
 import { FileSize, FileSizeUnit } from '@/files/domain/models/FileMetadata'
 import { getDatasetUploadLimits } from '@/dataset/domain/useCases/getDatasetUploadLimits'
 import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
 
 interface UploadLimit {
@@ -12,7 +13,11 @@ interface UploadLimit {
 
 export function useUploadLimit(
   datasetPersistentId: string,
-  fetchUploadLimits: (datasetId: string) => Promise<DatasetUploadLimits> = getDatasetUploadLimits
+  datasetRepository: DatasetRepository,
+  fetchUploadLimits: (
+    datasetId: string | number,
+    datasetRepository: DatasetRepository
+  ) => Promise<DatasetUploadLimits> = getDatasetUploadLimits
 ) {
   const [uploadLimit, setUploadLimit] = useState<UploadLimit>({})
   const [isLoadingUploadLimits, setIsLoadingUploadLimits] = useState<boolean>(true)
@@ -23,7 +28,7 @@ export function useUploadLimit(
     setErrorUploadLimits(null)
 
     try {
-      const limits = await fetchUploadLimits(datasetPersistentId)
+      const limits = await fetchUploadLimits(datasetPersistentId, datasetRepository)
 
       if (Object.keys(limits).length === 0) {
         setUploadLimit({})
@@ -54,7 +59,7 @@ export function useUploadLimit(
     } finally {
       setIsLoadingUploadLimits(false)
     }
-  }, [datasetPersistentId, fetchUploadLimits])
+  }, [datasetPersistentId, datasetRepository, fetchUploadLimits])
 
   useEffect(() => {
     void fetchUploadLimitsCallback()
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 0f828b99d..6457a1c7d 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Tabs } from '@iqss/dataverse-design-system'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
 import { useLoading } from '../../shared/contexts/loading/LoadingContext'
 import { useDataset } from '../dataset/DatasetContext'
@@ -12,9 +13,13 @@ import styles from './UploadDatasetFiles.module.scss'
 
 interface UploadDatasetFilesProps {
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
 }
 
-export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDatasetFilesProps) => {
+export const UploadDatasetFiles = ({
+  fileRepository: fileRepository,
+  datasetRepository
+}: UploadDatasetFilesProps) => {
   const { setIsLoading } = useLoading()
   const { dataset, isLoading: isLoadingDataset } = useDataset()
   const { t } = useTranslation('uploadDatasetFiles')
@@ -44,6 +49,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
           <div className={styles.tab_container}>
             <FileUploader
               fileRepository={fileRepository}
+              datasetRepository={datasetRepository}
               datasetPersistentId={dataset.persistentId}
               storageType="S3"
               operationType={OperationType.ADD_FILES_TO_DATASET}
diff --git a/src/sections/upload-dataset-files/UploadDatasetFilesFactory.tsx b/src/sections/upload-dataset-files/UploadDatasetFilesFactory.tsx
index b5bb2c6dd..8938ba66a 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFilesFactory.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFilesFactory.tsx
@@ -25,7 +25,7 @@ function UploadDatasetFilesWithSearchParams() {
     <DatasetProvider
       repository={datasetRepository}
       searchParams={{ persistentId: persistentId, version: version }}>
-      <UploadDatasetFiles fileRepository={fileRepository} />
+      <UploadDatasetFiles fileRepository={fileRepository} datasetRepository={datasetRepository} />
     </DatasetProvider>
   )
 }
diff --git a/src/stories/dataset/DatasetErrorMockRepository.ts b/src/stories/dataset/DatasetErrorMockRepository.ts
index 86ab9df91..08b93f2f0 100644
--- a/src/stories/dataset/DatasetErrorMockRepository.ts
+++ b/src/stories/dataset/DatasetErrorMockRepository.ts
@@ -13,6 +13,7 @@ import { CitationFormat, FormattedCitation } from '@/dataset/domain/models/Datas
 import { DatasetLicenseUpdateRequest } from '@/dataset/domain/models/DatasetLicenseUpdateRequest'
 import { CollectionSummary } from '@/collection/domain/models/CollectionSummary'
 import { DatasetVersionPaginationInfo } from '@/dataset/domain/models/DatasetVersionPaginationInfo'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 
 export class DatasetErrorMockRepository implements DatasetMockRepository {
   getAllWithCount: (
@@ -196,4 +197,12 @@ export class DatasetErrorMockRepository implements DatasetMockRepository {
       }, FakerHelper.loadingTimout())
     })
   }
+
+  getDatasetUploadLimits(_datasetId: string | number): Promise<DatasetUploadLimits> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject('Error thrown from mock')
+      }, FakerHelper.loadingTimout())
+    })
+  }
 }
diff --git a/src/stories/dataset/DatasetMockRepository.ts b/src/stories/dataset/DatasetMockRepository.ts
index cfda50654..388852563 100644
--- a/src/stories/dataset/DatasetMockRepository.ts
+++ b/src/stories/dataset/DatasetMockRepository.ts
@@ -19,6 +19,7 @@ import { DatasetLicenseUpdateRequest } from '@/dataset/domain/models/DatasetLice
 import { CollectionSummary } from '@/collection/domain/models/CollectionSummary'
 import { CollectionSummaryMother } from '@tests/component/collection/domain/models/CollectionSummaryMother'
 import { DatasetVersionPaginationInfo } from '@/dataset/domain/models/DatasetVersionPaginationInfo'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 
 export class DatasetMockRepository implements DatasetRepository {
   getAllWithCount: (
@@ -222,4 +223,15 @@ export class DatasetMockRepository implements DatasetRepository {
       }, FakerHelper.loadingTimout())
     })
   }
+
+  getDatasetUploadLimits(_datasetId: string | number): Promise<DatasetUploadLimits> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          numberOfFilesRemaining: 10,
+          storageQuotaRemaining: 10737418240 // 10 GB in bytes
+        })
+      }, FakerHelper.loadingTimout())
+    })
+  }
 }
diff --git a/src/stories/replace-file/ReplaceFile.stories.tsx b/src/stories/replace-file/ReplaceFile.stories.tsx
index 3a1dbb585..63c2f586c 100644
--- a/src/stories/replace-file/ReplaceFile.stories.tsx
+++ b/src/stories/replace-file/ReplaceFile.stories.tsx
@@ -4,6 +4,7 @@ import { WithLayout } from '../WithLayout'
 import { FileMockRepository } from '../file/FileMockRepository'
 import { WithDataset } from '../dataset/WithDataset'
 import { ReplaceFile } from '@/sections/replace-file/ReplaceFile'
+import { DatasetMockRepository } from '@/stories/dataset/DatasetMockRepository'
 import { WithToasts } from '../WithToasts'
 
 const meta: Meta<typeof ReplaceFile> = {
@@ -24,6 +25,7 @@ export const Default: Story = {
   render: () => (
     <ReplaceFile
       fileRepository={new FileMockRepository()}
+      datasetRepository={new DatasetMockRepository()}
       fileIdFromParams={1}
       datasetPidFromParams="doi:10.5072/FK2/8YOKQI"
       datasetVersionFromParams=":draft"
diff --git a/src/stories/shared/file-uploader/FileUploadInput.stories.tsx b/src/stories/shared/file-uploader/FileUploadInput.stories.tsx
index 3ed647599..688dee937 100644
--- a/src/stories/shared/file-uploader/FileUploadInput.stories.tsx
+++ b/src/stories/shared/file-uploader/FileUploadInput.stories.tsx
@@ -1,11 +1,12 @@
 import FileUploadInput from '@/sections/shared/file-uploader/file-upload-input/FileUploadInput'
+import { FileUploadStatus } from '@/sections/shared/file-uploader/context/fileUploaderReducer'
+import { OperationType } from '@/sections/shared/file-uploader/FileUploader'
+import { DatasetMockRepository } from '@/stories/dataset/DatasetMockRepository'
 import { FileMockRepository } from '@/stories/file/FileMockRepository'
 import { WithI18next } from '@/stories/WithI18next'
 import { WithToasts } from '@/stories/WithToasts'
 import { Meta, StoryObj } from '@storybook/react'
 import { WithFileUploaderContext } from './WithFileUploaderContext'
-import { FileUploadStatus } from '@/sections/shared/file-uploader/context/fileUploaderReducer'
-import { OperationType } from '@/sections/shared/file-uploader/FileUploader'
 
 const meta: Meta<typeof FileUploadInput> = {
   title: 'Sections/Shared/File Uploader/File Upload Input',
@@ -27,6 +28,7 @@ export const ReplaceMode: Story = {
       <FileUploadInput
         datasetPersistentId="doi:10.5072/FK2/8YOKQI"
         fileRepository={new FileMockRepository()}
+        datasetRepository={new DatasetMockRepository()}
       />
     </WithFileUploaderContext>
   )
@@ -39,6 +41,23 @@ export const AddMode: Story = {
       <FileUploadInput
         datasetPersistentId="doi:10.5072/FK2/8YOKQI"
         fileRepository={new FileMockRepository()}
+        datasetRepository={new DatasetMockRepository()}
+      />
+    </WithFileUploaderContext>
+  )
+}
+
+export const WithUploadLimits: Story = {
+  decorators: [WithToasts],
+  render: () => (
+    <WithFileUploaderContext mode={OperationType.ADD_FILES_TO_DATASET}>
+      <FileUploadInput
+        datasetPersistentId="doi:10.5072/FK2/8YOKQI"
+        fileRepository={new FileMockRepository()}
+        datasetRepository={new DatasetMockRepository()}
+        fetchUploadLimits={() =>
+          Promise.resolve({ numberOfFilesRemaining: 5, storageQuotaRemaining: 1024 * 1024 * 1024 })
+        }
       />
     </WithFileUploaderContext>
   )
@@ -83,6 +102,7 @@ export const WithUploadingFiles: Story = {
       <FileUploadInput
         datasetPersistentId="doi:10.5072/FK2/8YOKQI"
         fileRepository={new FileMockRepository()}
+        datasetRepository={new DatasetMockRepository()}
       />
     </WithFileUploaderContext>
   )
@@ -111,6 +131,7 @@ export const WithFailedFile: Story = {
       <FileUploadInput
         datasetPersistentId="doi:10.5072/FK2/8YOKQI"
         fileRepository={new FileMockRepository()}
+        datasetRepository={new DatasetMockRepository()}
       />
     </WithFileUploaderContext>
   )
diff --git a/src/stories/shared/file-uploader/FileUploader.stories.tsx b/src/stories/shared/file-uploader/FileUploader.stories.tsx
index 394d16d48..4646eedeb 100644
--- a/src/stories/shared/file-uploader/FileUploader.stories.tsx
+++ b/src/stories/shared/file-uploader/FileUploader.stories.tsx
@@ -1,4 +1,5 @@
 import { FileUploader, OperationType } from '@/sections/shared/file-uploader/FileUploader'
+import { DatasetMockRepository } from '@/stories/dataset/DatasetMockRepository'
 import { FileMockRepository } from '@/stories/file/FileMockRepository'
 import { WithI18next } from '@/stories/WithI18next'
 import { WithToasts } from '@/stories/WithToasts'
@@ -27,6 +28,7 @@ export const ReplaceMode: Story = {
       storageType="S3"
       operationType={OperationType.REPLACE_FILE}
       originalFile={FileMother.createRealistic()}
+      datasetRepository={new DatasetMockRepository()}
     />
   )
 }
@@ -39,6 +41,7 @@ export const AddFilesToDataset: Story = {
       datasetPersistentId="doi:10.5072/FK2/8YOKQI"
       storageType="S3"
       operationType={OperationType.ADD_FILES_TO_DATASET}
+      datasetRepository={new DatasetMockRepository()}
     />
   )
 }
diff --git a/src/stories/upload-dataset-files/UploadDatasetFiles.stories.tsx b/src/stories/upload-dataset-files/UploadDatasetFiles.stories.tsx
index 7fcc53459..8d3bf35d1 100644
--- a/src/stories/upload-dataset-files/UploadDatasetFiles.stories.tsx
+++ b/src/stories/upload-dataset-files/UploadDatasetFiles.stories.tsx
@@ -3,6 +3,7 @@ import { WithI18next } from '../WithI18next'
 import { WithLayout } from '../WithLayout'
 import { UploadDatasetFiles } from '../../sections/upload-dataset-files/UploadDatasetFiles'
 import { FileMockRepository } from '../file/FileMockRepository'
+import { DatasetMockRepository } from '../dataset/DatasetMockRepository'
 import { WithDataset } from '../dataset/WithDataset'
 
 const meta: Meta<typeof UploadDatasetFiles> = {
@@ -20,5 +21,10 @@ type Story = StoryObj<typeof UploadDatasetFiles>
 
 export const Default: Story = {
   decorators: [WithLayout, WithDataset],
-  render: () => <UploadDatasetFiles fileRepository={new FileMockRepository()} />
+  render: () => (
+    <UploadDatasetFiles
+      fileRepository={new FileMockRepository()}
+      datasetRepository={new DatasetMockRepository()}
+    />
+  )
 }

From a3f6218c477bce2f63f376d05a30f5215b38ffe0 Mon Sep 17 00:00:00 2001
From: Cheng Shi <cks5520psu@gmail.com>
Date: Thu, 12 Feb 2026 13:18:14 -0500
Subject: [PATCH 4/4] fix: test error

---
 .../shared/file-uploader/useUploadLimit.spec.tsx       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx b/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
index beea74256..3616422d9 100644
--- a/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
+++ b/tests/component/sections/shared/file-uploader/useUploadLimit.spec.tsx
@@ -1,7 +1,9 @@
 import { act, renderHook, waitFor } from '@testing-library/react'
 import { useUploadLimit } from '@/sections/shared/file-uploader/file-upload-input/useUploadLimit'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 
 const DATASET_PERSISTENT_ID = 'doi:10.5072/FK2/8YOKQI'
+const datasetRepository: DatasetRepository = {} as DatasetRepository
 
 describe('useUploadLimit', () => {
   it('formats upload limit values when limits are present', async () => {
@@ -10,7 +12,9 @@ describe('useUploadLimit', () => {
       storageQuotaRemaining: 1048576
     })
 
-    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID, fetchUploadLimits))
+    const { result } = renderHook(() =>
+      useUploadLimit(DATASET_PERSISTENT_ID, datasetRepository, fetchUploadLimits)
+    )
 
     await act(() => {
       expect(result.current.isLoadingUploadLimits).to.deep.equal(true)
@@ -30,7 +34,9 @@ describe('useUploadLimit', () => {
   it('returns empty uploadLimit when no limits are present', async () => {
     const fetchUploadLimits = cy.stub().resolves({})
 
-    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID, fetchUploadLimits))
+    const { result } = renderHook(() =>
+      useUploadLimit(DATASET_PERSISTENT_ID, datasetRepository, fetchUploadLimits)
+    )
 
     await waitFor(() => {
       expect(result.current.isLoadingUploadLimits).to.equal(false)