From bd9c8740a57d4ed49772fd17f13bf7f0a47ad6d4 Mon Sep 17 00:00:00 2001
From: Alisson Patricio <eu@alisson.net>
Date: Fri, 9 Oct 2026 02:30:17 +0000
Subject: [PATCH] feat(comments): file attachments on mobile comments

Mobile comments can attach photos (library, multi-select) and PDFs (document picker),
show uploads above the composer, and list a comment's files under it.

The web upload pipeline is reused rather than reimplemented: an UploadSource seam
(name/size/type/readChunk) replaces File in the uploader, read lazily inside the
concurrency slot so native never holds more than MAX_CONCURRENT_CHUNKS chunks.
Selection rules, attachment limits and upload-item state are shared by both legs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013LkamMd6XMPeYNHbAV1DZ9
---
 .changeset/native-comment-attachments.md      |  34 +++++
 .../__shared__/native/SocialInput/index.tsx   |   6 +-
 .../__shared__/native/SocialInput/types.ts    |   3 +-
 .../native/SocialInputDrawer/Drawer/index.tsx |  33 ++++-
 .../native/SocialInputDrawer/Drawer/types.ts  |   5 +
 .../SocialInputDrawer/Placeholder/index.tsx   |   8 +-
 .../SocialInputDrawer/Placeholder/types.ts    |   2 +
 .../native/SocialUpsertActions/index.tsx      |   5 +-
 .../native/SocialUpsertActions/types.ts       |   3 +
 .../modules/comments/common/constants.ts      |  10 ++
 .../comments/native/BaseComments/index.tsx    |  26 +++-
 .../BaseComments/useCommentComposer/index.ts  |  25 +++-
 .../BaseComments/useCommentComposer/types.ts  |  10 ++
 .../CommentFilesUpsertActions/index.tsx       |  61 ++++++++
 .../CommentFilesUpsertActions/styles.ts       |  13 ++
 .../native/CommentFilesUpsertActions/types.ts |   8 ++
 .../comments/native/CommentItem/index.tsx     |   2 +
 .../comments/web/CommentCreate/index.tsx      |  13 +-
 .../CommentFilesUpsertActions/index.tsx       |  12 +-
 packages/components/modules/files/README.md   |  89 +++++-------
 .../context/FileUploadProvider/index.tsx      |   9 +-
 .../context/FileUploadProvider/types.ts       |   4 +-
 .../context/__tests__/fileUploadStore.test.ts |  36 +++++
 .../__tests__/useChunkedUpload.test.ts        |  18 ++-
 .../common/hooks/useChunkedUpload/index.ts    |  38 +++--
 .../hooks/useDeferredFileAttachments/index.ts |   3 +-
 .../hooks/useDeferredFileAttachments/types.ts |   4 +-
 .../__tests__/useFileSelect.test.ts           |  14 ++
 .../files/common/hooks/useFileSelect/index.ts |   9 +-
 .../files/common/hooks/useFileSelect/types.ts |   4 +-
 .../common/hooks/useFileUploadLogic/index.ts  |   3 +-
 .../common/hooks/useFileUploadLogic/types.ts  |   4 +-
 .../components/modules/files/common/types.ts  |  26 +++-
 .../__tests__/filterSelectedFiles.test.ts     |  84 +++++++++++
 .../common/utils/__tests__/formatters.test.ts |  12 ++
 .../utils/__tests__/uploadChunk.test.ts       |  21 +++
 .../utils/__tests__/uploadChunks.test.ts      |  82 +++++++++++
 .../utils/__tests__/uploadItemState.test.ts   |  42 ++++++
 .../utils/__tests__/uploadSource.test.ts      |  33 +++++
 .../modules/files/common/utils/chunkFile.ts   |   4 +
 .../files/common/utils/filterSelectedFiles.ts |  91 ++++++++++++
 .../modules/files/common/utils/formatters.ts  |   8 ++
 .../modules/files/common/utils/index.ts       |   3 +
 .../modules/files/common/utils/uploadChunk.ts |  10 +-
 .../files/common/utils/uploadChunks.ts        |  67 ++++++---
 .../files/common/utils/uploadItemState.ts     |  37 +++++
 .../files/common/utils/uploadSource.ts        |  20 +++
 .../AttachedFileChip/index.tsx                |  45 ++++++
 .../AttachedFileChip/types.ts                 |   6 +
 .../files/native/AttachedFilesList/index.tsx  |  45 ++++++
 .../files/native/AttachedFilesList/styles.ts  |  12 ++
 .../files/native/AttachedFilesList/types.ts   |   6 +
 .../modules/files/native/FileChip/index.tsx   |  64 +++++++++
 .../modules/files/native/FileChip/styles.ts   |  44 ++++++
 .../modules/files/native/FileChip/types.ts    |  14 ++
 .../UploadingFileChip/index.tsx               |  88 ++++++++++++
 .../UploadingFileChip/styles.ts               |  25 ++++
 .../UploadingFileChip/types.ts                |   8 ++
 .../files/native/UploadingFilesList/index.tsx |  48 +++++++
 .../files/native/UploadingFilesList/styles.ts |   9 ++
 .../files/native/UploadingFilesList/types.ts  |   7 +
 .../__tests__/useNativeFilePicker.test.ts     | 127 ++++++++++++++++
 .../native/hooks/useNativeFilePicker/index.ts | 135 ++++++++++++++++++
 .../native/hooks/useNativeFilePicker/types.ts |  16 +++
 .../components/modules/files/native/index.ts  |  18 ++-
 .../createNativeUploadSource.test.ts          | 119 +++++++++++++++
 .../native/utils/createNativeUploadSource.ts  |  64 +++++++++
 .../files/web/AttachedFileItem/index.tsx      |  15 +-
 .../UploadingFileItem/index.tsx               |  28 +---
 .../native/icons/AttachmentIcon/index.tsx     |  37 +++++
 .../components/native/icons/index.ts          |   1 +
 71 files changed, 1869 insertions(+), 166 deletions(-)
 create mode 100644 .changeset/native-comment-attachments.md
 create mode 100644 packages/components/modules/__shared__/native/SocialUpsertActions/types.ts
 create mode 100644 packages/components/modules/comments/native/CommentFilesUpsertActions/index.tsx
 create mode 100644 packages/components/modules/comments/native/CommentFilesUpsertActions/styles.ts
 create mode 100644 packages/components/modules/comments/native/CommentFilesUpsertActions/types.ts
 create mode 100644 packages/components/modules/files/common/utils/__tests__/filterSelectedFiles.test.ts
 create mode 100644 packages/components/modules/files/common/utils/__tests__/formatters.test.ts
 create mode 100644 packages/components/modules/files/common/utils/__tests__/uploadChunk.test.ts
 create mode 100644 packages/components/modules/files/common/utils/__tests__/uploadItemState.test.ts
 create mode 100644 packages/components/modules/files/common/utils/__tests__/uploadSource.test.ts
 create mode 100644 packages/components/modules/files/common/utils/filterSelectedFiles.ts
 create mode 100644 packages/components/modules/files/common/utils/uploadItemState.ts
 create mode 100644 packages/components/modules/files/common/utils/uploadSource.ts
 create mode 100644 packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/index.tsx
 create mode 100644 packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/types.ts
 create mode 100644 packages/components/modules/files/native/AttachedFilesList/index.tsx
 create mode 100644 packages/components/modules/files/native/AttachedFilesList/styles.ts
 create mode 100644 packages/components/modules/files/native/AttachedFilesList/types.ts
 create mode 100644 packages/components/modules/files/native/FileChip/index.tsx
 create mode 100644 packages/components/modules/files/native/FileChip/styles.ts
 create mode 100644 packages/components/modules/files/native/FileChip/types.ts
 create mode 100644 packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/index.tsx
 create mode 100644 packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/styles.ts
 create mode 100644 packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/types.ts
 create mode 100644 packages/components/modules/files/native/UploadingFilesList/index.tsx
 create mode 100644 packages/components/modules/files/native/UploadingFilesList/styles.ts
 create mode 100644 packages/components/modules/files/native/UploadingFilesList/types.ts
 create mode 100644 packages/components/modules/files/native/hooks/useNativeFilePicker/__tests__/useNativeFilePicker.test.ts
 create mode 100644 packages/components/modules/files/native/hooks/useNativeFilePicker/index.ts
 create mode 100644 packages/components/modules/files/native/hooks/useNativeFilePicker/types.ts
 create mode 100644 packages/components/modules/files/native/utils/__tests__/createNativeUploadSource.test.ts
 create mode 100644 packages/components/modules/files/native/utils/createNativeUploadSource.ts
 create mode 100644 packages/design-system/components/native/icons/AttachmentIcon/index.tsx

diff --git a/.changeset/native-comment-attachments.md b/.changeset/native-comment-attachments.md
new file mode 100644
index 000000000..9818647ab
--- /dev/null
+++ b/.changeset/native-comment-attachments.md
@@ -0,0 +1,34 @@
+---
+'@baseapp-frontend/components': major
+'@baseapp-frontend/design-system': minor
+---
+
+Comments on mobile can carry file attachments, like on web: attach photos from the library or PDFs
+from the document picker, watch them upload above the composer, and see (and open) a comment's
+files under it.
+
+**Breaking:** `FileUploadProgress.file` is now typed `UploadSource` instead of `File`, because a
+native upload has no `File`. A web `File` passed in is wrapped automatically and its `name`, `size`
+and `type` read the same; code that read `File`-only members off `fileProgress.file` (`slice`,
+`lastModified`, passing it to `URL.createObjectURL`) has to keep its own reference to the original
+file instead.
+
+The upload pipeline is now shared across platforms instead of being web-only:
+
+- **`UploadSource`**: every upload entry point (`uploadFile`, `addFile`, `handleFilesSelected`)
+  accepts a web `File` or an `UploadSource` (`name`, `size`, `type`, `readChunk(start, end)`,
+  optional `dispose()`). Chunks are read lazily inside the concurrency slot, so a native upload holds
+  at most `MAX_CONCURRENT_CHUNKS` chunks in memory, and a retried chunk reuses the bytes it already
+  read. `dispose` runs when an upload leaves the store.
+- A chunk whose upload was paused or removed during a retry backoff no longer starts a new request,
+  and `clearScope` now aborts the uploads it removes.
+- **`filterSelectedFiles`** / **`describeRejectedFiles`**: the size/count/type rules both pickers
+  apply. The web file input now also drops files whose type is outside `acceptedFileTypes` (the
+  `accept` attribute alone can be bypassed from the OS picker).
+- **`COMMENT_FILE_ATTACHMENT_LIMITS`** (`comments/common`): the comment attachment limits, shared by
+  web and mobile.
+- **`files/native`**: `useNativeFilePicker`, `createNativeUploadSource`, `UploadingFilesList`,
+  `AttachedFilesList`, `FileChip`.
+- Native `SocialInput` takes `SocialUpsertActionsProps`, and `SocialInputDrawer` takes a `Footer`
+  that the sheet grows to fit (`Placeholder` gets the matching `footerHeight`).
+- `@baseapp-frontend/design-system`: native `AttachmentIcon`.
diff --git a/packages/components/modules/__shared__/native/SocialInput/index.tsx b/packages/components/modules/__shared__/native/SocialInput/index.tsx
index 80c7a4fd1..77f045fe2 100644
--- a/packages/components/modules/__shared__/native/SocialInput/index.tsx
+++ b/packages/components/modules/__shared__/native/SocialInput/index.tsx
@@ -15,6 +15,7 @@ const SocialInput = forwardRef<NativeTextInput, SocialInputProps>(
       SocialTextInput = DefaultSocialTextInput,
       SocialTextInputProps = {},
       SocialUpsertActions = DefaultSocialUpsertActions,
+      SocialUpsertActionsProps = {},
       SubmitActions = DefaultSubmitActions,
       SubmitActionsProps = {},
       form,
@@ -41,7 +42,10 @@ const SocialInput = forwardRef<NativeTextInput, SocialInputProps>(
         replyVariables={replyVariables}
         {...SocialTextInputProps}
       >
-        <SocialUpsertActions />
+        <SocialUpsertActions
+          shouldUseBottomSheetSafeComponents={shouldUseBottomSheetSafeComponents}
+          {...SocialUpsertActionsProps}
+        />
         <SubmitActions
           disabled={submissionDisabled}
           handleSubmit={submit}
diff --git a/packages/components/modules/__shared__/native/SocialInput/types.ts b/packages/components/modules/__shared__/native/SocialInput/types.ts
index a903d3346..a9ee4f0be 100644
--- a/packages/components/modules/__shared__/native/SocialInput/types.ts
+++ b/packages/components/modules/__shared__/native/SocialInput/types.ts
@@ -14,7 +14,8 @@ import { SubmitActionsProps } from './SubmitActions/types'
 export interface SocialInputProps {
   SocialTextInput?: FC<SocialTextInputProps>
   SocialTextInputProps?: Partial<SocialTextInputProps>
-  SocialUpsertActions?: FC
+  SocialUpsertActions?: FC<any>
+  SocialUpsertActionsProps?: Record<string, any>
   SubmitActions?: FC<SubmitActionsProps>
   SubmitActionsProps?: Partial<SubmitActionsProps>
   form: UseFormReturn<SocialUpsertForm, any, SocialUpsertForm>
diff --git a/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/index.tsx b/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/index.tsx
index 116cef7a5..db6427644 100644
--- a/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/index.tsx
+++ b/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/index.tsx
@@ -1,10 +1,10 @@
-import { forwardRef, useCallback, useRef } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 
 import { View } from '@baseapp-frontend/design-system/components/native/views'
 import { useTheme } from '@baseapp-frontend/design-system/providers/native'
 
 import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'
-import { TextInput as NativeTextInput } from 'react-native'
+import { LayoutChangeEvent, TextInput as NativeTextInput } from 'react-native'
 
 import DefaultSocialInput from '../../SocialInput'
 import DefaultDrawerHandle from './DrawerHandle'
@@ -17,6 +17,9 @@ const Drawer = forwardRef<NativeTextInput, DrawerProps>(
       DrawerHandle = DefaultDrawerHandle,
       SocialInput = DefaultSocialInput,
       SocialInputProps = {},
+      Footer,
+      FooterProps = {},
+      onFooterHeightChange,
       form,
       isLoading,
       keyboardHeight = 0,
@@ -32,6 +35,22 @@ const Drawer = forwardRef<NativeTextInput, DrawerProps>(
   ) => {
     const bottomSheetRef = useRef<BottomSheet>(null)
     const theme = useTheme()
+    const [footerHeight, setFooterHeight] = useState(0)
+
+    const handleFooterLayout = useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        const height = Math.ceil(nativeEvent.layout.height)
+        setFooterHeight(height)
+        onFooterHeightChange?.(height)
+      },
+      [onFooterHeightChange],
+    )
+    // A removed footer fires no layout event, so its last height must not linger.
+    const activeFooterHeight = Footer ? footerHeight : 0
+    const hasFooter = !!Footer
+    useEffect(() => {
+      if (!hasFooter) onFooterHeightChange?.(0)
+    }, [hasFooter, onFooterHeightChange])
 
     const handleSheetChange = useCallback(
       (index: number) => {
@@ -66,13 +85,21 @@ const Drawer = forwardRef<NativeTextInput, DrawerProps>(
       <BottomSheet
         ref={bottomSheetRef}
         index={1}
-        snapPoints={[80 + keyboardHeight, 200 + keyboardHeight]}
+        snapPoints={[
+          80 + keyboardHeight + activeFooterHeight,
+          200 + keyboardHeight + activeFooterHeight,
+        ]}
         onChange={handleSheetChange}
         onAnimate={handleAnimate}
         handleComponent={showHandle ? DrawerHandle : null}
         backgroundStyle={styles.background}
       >
         <BottomSheetView style={[styles.bottomSheetContainer, style]}>
+          {Footer ? (
+            <View onLayout={handleFooterLayout}>
+              <Footer {...FooterProps} />
+            </View>
+          ) : null}
           <SocialInput
             form={form}
             isLoading={isLoading}
diff --git a/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/types.ts b/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/types.ts
index fc3ce9d97..dc945b7cd 100644
--- a/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/types.ts
+++ b/packages/components/modules/__shared__/native/SocialInputDrawer/Drawer/types.ts
@@ -15,6 +15,11 @@ export interface DrawerProps {
   DrawerHandle?: FC
   SocialInput?: FC<SocialInputProps>
   SocialInputProps?: Partial<SocialInputProps>
+  /** Rendered above the input inside the sheet (e.g. attachment chips); the sheet grows to fit it. */
+  Footer?: FC<any>
+  FooterProps?: Record<string, any>
+  /** Reports the footer's height so a `Placeholder` can reserve the same space. */
+  onFooterHeightChange?: (height: number) => void
   form: UseFormReturn<SocialUpsertForm, any, SocialUpsertForm>
   isLoading: boolean
   keyboardHeight?: number
diff --git a/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/index.tsx b/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/index.tsx
index e0a404d3f..3a4111ee5 100644
--- a/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/index.tsx
+++ b/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/index.tsx
@@ -8,12 +8,18 @@ const Placeholder: FC<PlaceholderProps> = ({
   handleHeight = 38,
   keyboardHeight = 0,
   layoutOverheadHeight = 88,
+  footerHeight = 0,
   showHandle,
   textHeight = 0,
 }) => (
   <View
     style={{
-      height: textHeight + (showHandle ? handleHeight : 0) + layoutOverheadHeight + keyboardHeight,
+      height:
+        textHeight +
+        (showHandle ? handleHeight : 0) +
+        layoutOverheadHeight +
+        keyboardHeight +
+        footerHeight,
     }}
   />
 )
diff --git a/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/types.ts b/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/types.ts
index a99691e54..2898a3196 100644
--- a/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/types.ts
+++ b/packages/components/modules/__shared__/native/SocialInputDrawer/Placeholder/types.ts
@@ -2,6 +2,8 @@ export interface PlaceholderProps {
   handleHeight?: number
   keyboardHeight?: number
   layoutOverheadHeight?: number
+  /** Height of the Drawer's footer (see `onFooterHeightChange`). */
+  footerHeight?: number
   showHandle: boolean
   textHeight?: number
 }
diff --git a/packages/components/modules/__shared__/native/SocialUpsertActions/index.tsx b/packages/components/modules/__shared__/native/SocialUpsertActions/index.tsx
index 0b2a46da7..4f724f5d8 100644
--- a/packages/components/modules/__shared__/native/SocialUpsertActions/index.tsx
+++ b/packages/components/modules/__shared__/native/SocialUpsertActions/index.tsx
@@ -4,7 +4,10 @@ import { IconButton } from '@baseapp-frontend/design-system/components/native/bu
 import { EmojiIcon } from '@baseapp-frontend/design-system/components/native/icons'
 import { useTheme } from '@baseapp-frontend/design-system/providers/native'
 
-const SocialUpsertActions: FC = () => {
+import { SocialUpsertActionsProps } from './types'
+
+// The placeholder emoji button ignores shouldUseBottomSheetSafeComponents; it has no action yet.
+const SocialUpsertActions: FC<SocialUpsertActionsProps> = () => {
   const theme = useTheme()
 
   return (
diff --git a/packages/components/modules/__shared__/native/SocialUpsertActions/types.ts b/packages/components/modules/__shared__/native/SocialUpsertActions/types.ts
new file mode 100644
index 000000000..37be94bbc
--- /dev/null
+++ b/packages/components/modules/__shared__/native/SocialUpsertActions/types.ts
@@ -0,0 +1,3 @@
+export interface SocialUpsertActionsProps {
+  shouldUseBottomSheetSafeComponents?: boolean
+}
diff --git a/packages/components/modules/comments/common/constants.ts b/packages/components/modules/comments/common/constants.ts
index 5fe4f8e87..902a84859 100644
--- a/packages/components/modules/comments/common/constants.ts
+++ b/packages/components/modules/comments/common/constants.ts
@@ -7,3 +7,13 @@ export const COMMENTS_LIST_CONNECTION_KEY = 'CommentsList_comments'
 export const DEFAULT_COMMENTS_ORDER_BY = '-is_pinned,-created'
 
 export const DEFAULT_MAX_THREAD_DEPTH = 5
+
+// One source for both platforms, so web and mobile refuse the same attachments.
+export const COMMENT_FILE_ATTACHMENT_LIMITS = {
+  maxFiles: 5,
+  maxFileSize: 100 * 1024 * 1024, // 100MB
+  acceptedFileTypes: {
+    'image/*': ['.png', '.jpg'],
+    'application/pdf': ['.pdf'],
+  },
+}
diff --git a/packages/components/modules/comments/native/BaseComments/index.tsx b/packages/components/modules/comments/native/BaseComments/index.tsx
index a365bc9fc..5b0f262db 100644
--- a/packages/components/modules/comments/native/BaseComments/index.tsx
+++ b/packages/components/modules/comments/native/BaseComments/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useRef, useTransition } from 'react'
+import { FC, useCallback, useEffect, useRef, useState, useTransition } from 'react'
 
 import { View } from '@baseapp-frontend/design-system/components/native/views'
 
@@ -6,7 +6,9 @@ import { TextInput as NativeTextInput, ScrollView } from 'react-native'
 import { useFragment } from 'react-relay'
 
 import { SocialInputDrawer as DefaultSocialInputDrawer } from '../../../__shared__/native'
+import { UploadingFilesList } from '../../../files/native'
 import { CommentsFragmentQuery, DEFAULT_MAX_THREAD_DEPTH, useCommentReply } from '../../common'
+import CommentFilesUpsertActions from '../CommentFilesUpsertActions'
 import DefaultCommentsList from '../CommentsList'
 import CommentActionsProvider from '../context/CommentActionsProvider'
 import { createStyles } from './styles'
@@ -35,15 +37,17 @@ const BaseComments: FC<BaseCommentsProps> = ({
   const commentCreateRef = useRef<NativeTextInput>(null)
   const commentsListRefetchRef = useRef<(() => void) | null>(null)
   const [, startTransition] = useTransition()
+  const [footerHeight, setFooterHeight] = useState(0)
   const { resetCommentReply, resetCommentEdit } = useCommentReply()
 
   const { isFocused, onFocusChange, textHeight, onTextHeightChange, keyboardHeight } =
     SocialInputDrawer.useTextInputProperties()
 
-  const { form, submit, isLoading, editVariables, replyVariables } = useCommentComposer({
-    targetObjectId: target.id,
-    onSubmitSuccess: () => commentCreateRef.current?.blur(),
-  })
+  const { form, submit, isLoading, editVariables, replyVariables, attachments } =
+    useCommentComposer({
+      targetObjectId: target.id,
+      onSubmitSuccess: () => commentCreateRef.current?.blur(),
+    })
 
   const body = form.watch('body')
   const showHandle = isFocused || body !== ''
@@ -92,6 +96,7 @@ const BaseComments: FC<BaseCommentsProps> = ({
             keyboardHeight={keyboardHeight}
             showHandle={showHandle}
             textHeight={textHeight}
+            footerHeight={footerHeight}
             {...SocialInputDrawerProps.PlaceholderProps}
           />
         </View>
@@ -107,7 +112,18 @@ const BaseComments: FC<BaseCommentsProps> = ({
           submit={submit}
           editVariables={editVariables}
           replyVariables={replyVariables}
+          Footer={attachments.isEnabled ? UploadingFilesList : undefined}
+          FooterProps={{ scope: attachments.scope, shouldUseBottomSheetSafeComponents: true }}
+          onFooterHeightChange={setFooterHeight}
           {...SocialInputDrawerProps.DrawerProps}
+          SocialInputProps={{
+            SocialUpsertActions: CommentFilesUpsertActions,
+            SocialUpsertActionsProps: {
+              onFilesSelected: attachments.onFilesSelected,
+              disabled: !attachments.isEnabled,
+            },
+            ...SocialInputDrawerProps.DrawerProps?.SocialInputProps,
+          }}
         />
       </View>
     </CommentActionsProvider>
diff --git a/packages/components/modules/comments/native/BaseComments/useCommentComposer/index.ts b/packages/components/modules/comments/native/BaseComments/useCommentComposer/index.ts
index 22b01b1c6..6a3c59e32 100644
--- a/packages/components/modules/comments/native/BaseComments/useCommentComposer/index.ts
+++ b/packages/components/modules/comments/native/BaseComments/useCommentComposer/index.ts
@@ -6,6 +6,7 @@ import {
   SOCIAL_UPSERT_FORM_VALIDATION_SCHEMA,
   SocialUpsertForm,
 } from '../../../../__shared__/common'
+import { useDeferredFileAttachments } from '../../../../files/common'
 import { useCommentCreateForm, useCommentReply, useCommentUpdateForm } from '../../../common'
 import { UseCommentComposerOptions, UseCommentComposerReturn } from './types'
 
@@ -24,6 +25,12 @@ const useCommentComposer = ({
   onSubmitSuccess,
 }: UseCommentComposerOptions): UseCommentComposerReturn => {
   const { editingComment, resetCommentEdit } = useCommentReply()
+  const {
+    handleFilesSelected,
+    attachTo,
+    hasPendingFiles,
+    scope: filesScope,
+  } = useDeferredFileAttachments()
 
   // The single form behind the drawer, shared by both modes.
   const form = useForm<SocialUpsertForm>({
@@ -42,7 +49,13 @@ const useCommentComposer = ({
     form,
     expandRepliesOnSuccess: true,
     resetFormOnReplyTargetChange: true,
-    onSuccess: () => onSubmitSuccess?.(),
+    onSuccess: ({ commentId }) => {
+      if (commentId) {
+        // Fire-and-forget: attachTo reports mutation failures through its own onError.
+        attachTo(commentId).catch(() => undefined)
+      }
+      onSubmitSuccess?.()
+    },
   })
 
   const {
@@ -74,12 +87,20 @@ const useCommentComposer = ({
   return {
     form,
     submit,
-    isLoading: isCreating || isUpdating,
+    // Block a new comment until every attachment has finished, so a paused or failed
+    // upload is never silently left off it. Edits do not carry attachments.
+    isLoading: isCreating || isUpdating || (!isEditMode && hasPendingFiles),
     editVariables: {
       isEditMode,
       label: 'Editing your comment',
       onEditCancel: cancelEdit,
     },
+    attachments: {
+      // Attachments go on new comments only; while editing, the draft's files wait.
+      isEnabled: !isEditMode,
+      onFilesSelected: handleFilesSelected,
+      scope: filesScope,
+    },
     replyVariables: {
       isReplyMode: isReply,
       label: 'Replying to ',
diff --git a/packages/components/modules/comments/native/BaseComments/useCommentComposer/types.ts b/packages/components/modules/comments/native/BaseComments/useCommentComposer/types.ts
index 946d9b101..16573854b 100644
--- a/packages/components/modules/comments/native/BaseComments/useCommentComposer/types.ts
+++ b/packages/components/modules/comments/native/BaseComments/useCommentComposer/types.ts
@@ -1,6 +1,7 @@
 import { UseFormReturn } from 'react-hook-form'
 
 import { SocialUpsertForm } from '../../../../__shared__/common'
+import type { UploadSource } from '../../../../files/common'
 
 export interface UseCommentComposerOptions {
   targetObjectId: string
@@ -21,11 +22,20 @@ export interface CommentComposerReplyVariables {
   targetName: string
 }
 
+export interface CommentComposerAttachments {
+  /** False while editing: attachments are added to new comments only. */
+  isEnabled: boolean
+  onFilesSelected: (files: UploadSource[]) => Promise<void>
+  /** Upload-store scope holding this composer's pending files. */
+  scope: string
+}
+
 export interface UseCommentComposerReturn {
   /** The active form: the update form while editing, the create form otherwise. */
   form: UseFormReturn<SocialUpsertForm>
   submit: () => void
   isLoading: boolean
   editVariables: CommentComposerEditVariables
+  attachments: CommentComposerAttachments
   replyVariables: CommentComposerReplyVariables
 }
diff --git a/packages/components/modules/comments/native/CommentFilesUpsertActions/index.tsx b/packages/components/modules/comments/native/CommentFilesUpsertActions/index.tsx
new file mode 100644
index 000000000..b63d5623a
--- /dev/null
+++ b/packages/components/modules/comments/native/CommentFilesUpsertActions/index.tsx
@@ -0,0 +1,61 @@
+import type { FC } from 'react'
+
+import { AttachmentIcon, ImageIcon } from '@baseapp-frontend/design-system/components/native/icons'
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { TouchableOpacity } from '@gorhom/bottom-sheet'
+import { Pressable } from 'react-native'
+
+import { useNativeFilePicker } from '../../../files/native'
+import { COMMENT_FILE_ATTACHMENT_LIMITS } from '../../common'
+import { createStyles } from './styles'
+import type { CommentFilesUpsertActionsProps } from './types'
+
+/**
+ * Native upsert-action bar for the comment composer: photos come from the photo
+ * library, other files from the document picker. Uploads start right away and are
+ * attached once the comment is created.
+ */
+const CommentFilesUpsertActions: FC<CommentFilesUpsertActionsProps> = ({
+  onFilesSelected,
+  disabled = false,
+  shouldUseBottomSheetSafeComponents = false,
+}) => {
+  const theme = useTheme()
+  const styles = createStyles()
+  const { pickImages, pickDocuments, isPreparing } = useNativeFilePicker({
+    onFilesSelected,
+    disabled,
+    ...COMMENT_FILE_ATTACHMENT_LIMITS,
+  })
+  const Touchable = shouldUseBottomSheetSafeComponents ? TouchableOpacity : Pressable
+  const isDisabled = disabled || isPreparing
+  const color = isDisabled ? theme.colors.object.disabled : theme.colors.object.low
+
+  return (
+    <View style={styles.container}>
+      <Touchable
+        onPress={pickImages}
+        disabled={isDisabled}
+        accessibilityRole="button"
+        accessibilityLabel="Attach photos"
+        style={styles.button}
+      >
+        <ImageIcon width={20} height={20} color={color} />
+      </Touchable>
+      <Touchable
+        onPress={pickDocuments}
+        disabled={isDisabled}
+        accessibilityRole="button"
+        accessibilityLabel="Attach files"
+        style={styles.button}
+      >
+        <AttachmentIcon width={20} height={20} color={color} />
+      </Touchable>
+    </View>
+  )
+}
+
+export default CommentFilesUpsertActions
+export type { CommentFilesUpsertActionsProps } from './types'
diff --git a/packages/components/modules/comments/native/CommentFilesUpsertActions/styles.ts b/packages/components/modules/comments/native/CommentFilesUpsertActions/styles.ts
new file mode 100644
index 000000000..29c71b08d
--- /dev/null
+++ b/packages/components/modules/comments/native/CommentFilesUpsertActions/styles.ts
@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native'
+
+export const createStyles = () =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+    },
+    button: {
+      padding: 8,
+    },
+  })
diff --git a/packages/components/modules/comments/native/CommentFilesUpsertActions/types.ts b/packages/components/modules/comments/native/CommentFilesUpsertActions/types.ts
new file mode 100644
index 000000000..4eadcac67
--- /dev/null
+++ b/packages/components/modules/comments/native/CommentFilesUpsertActions/types.ts
@@ -0,0 +1,8 @@
+import type { UploadSource } from '../../../files/common'
+
+export interface CommentFilesUpsertActionsProps {
+  /** Uploads the picked files (deferred attach happens after the comment is created). */
+  onFilesSelected: (files: UploadSource[]) => void
+  disabled?: boolean
+  shouldUseBottomSheetSafeComponents?: boolean
+}
diff --git a/packages/components/modules/comments/native/CommentItem/index.tsx b/packages/components/modules/comments/native/CommentItem/index.tsx
index cd77c9872..401cecb9d 100644
--- a/packages/components/modules/comments/native/CommentItem/index.tsx
+++ b/packages/components/modules/comments/native/CommentItem/index.tsx
@@ -8,6 +8,7 @@ import { type Href, useRouter } from 'expo-router'
 import { Pressable } from 'react-native'
 
 import { Timestamp as DefaultTimestamp } from '../../../__shared__/native'
+import { AttachedFilesList } from '../../../files/native'
 import { DEFAULT_MAX_THREAD_DEPTH, useCommentItem } from '../../common'
 import CommentShowRepliesButton from '../CommentShowRepliesButton'
 import { useCommentActionsContext } from '../context/CommentActionsProvider'
@@ -116,6 +117,7 @@ const CommentItem: FC<CommentItemProps> = ({
                 ''
               )}
             </Text>
+            <AttachedFilesList target={comment} shouldUseBottomSheetSafeComponents />
             <View style={styles.footerContainer}>
               <View style={styles.buttonContainer}>
                 <CommentReactionButton target={comment} shouldUseBottomSheetSafeComponents />
diff --git a/packages/components/modules/comments/web/CommentCreate/index.tsx b/packages/components/modules/comments/web/CommentCreate/index.tsx
index 509679ab7..01f822284 100644
--- a/packages/components/modules/comments/web/CommentCreate/index.tsx
+++ b/packages/components/modules/comments/web/CommentCreate/index.tsx
@@ -11,17 +11,10 @@ import {
   useFormMentions,
   withMentionsInSocialInputProps,
 } from '../../../__shared__/web'
-import { useCommentCreateForm, useCommentReply } from '../../common'
+import { COMMENT_FILE_ATTACHMENT_LIMITS, useCommentCreateForm, useCommentReply } from '../../common'
 import CommentFilesUpsertActions from './CommentFilesUpsertActions'
 import { CommentCreateProps } from './types'
 
-const MAX_FILES = 5
-const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB
-const ACCEPTED_FILE_TYPES = {
-  'image/*': ['.png', '.jpg'],
-  'application/pdf': ['.pdf'],
-}
-
 /**
  * ### CommentCreate Component
  *
@@ -152,9 +145,7 @@ const CommentCreate = forwardRef<HTMLInputElement, CommentCreateProps>(
         SocialUpsertActionsProps={{
           onFilesSelected: handleFilesSelected,
           isUploading,
-          maxFiles: MAX_FILES,
-          maxFileSize: MAX_FILE_SIZE,
-          acceptedFileTypes: ACCEPTED_FILE_TYPES,
+          ...COMMENT_FILE_ATTACHMENT_LIMITS,
         }}
         // Inside the form, not after it: the form is sticky, so a sibling would sit
         // below the pinned composer and stay off-screen until the list is scrolled.
diff --git a/packages/components/modules/comments/web/CommentUpdate/CommentFilesUpsertActions/index.tsx b/packages/components/modules/comments/web/CommentUpdate/CommentFilesUpsertActions/index.tsx
index e8d927b44..8678133c9 100644
--- a/packages/components/modules/comments/web/CommentUpdate/CommentFilesUpsertActions/index.tsx
+++ b/packages/components/modules/comments/web/CommentUpdate/CommentFilesUpsertActions/index.tsx
@@ -6,16 +6,10 @@ import { FileUploadTrigger } from '@baseapp-frontend/components/files/web'
 import { IconButton } from '@baseapp-frontend/design-system/components/web/buttons'
 import { AttachmentIcon, MentionIcon } from '@baseapp-frontend/design-system/components/web/icons'
 
+import { COMMENT_FILE_ATTACHMENT_LIMITS } from '../../../common'
 import { ActionsContainer } from './styled'
 import type { CommentFilesUpsertActionsProps } from './types'
 
-const MAX_FILES = 5
-const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB
-const ACCEPTED_FILE_TYPES = {
-  'image/*': ['.png', '.jpg'],
-  'application/pdf': ['.pdf'],
-}
-
 /**
  * SocialInput upsert-action bar for the comment editor: the attach icon is the
  * real file upload trigger; the mention icon stays a placeholder until wired.
@@ -26,9 +20,7 @@ const CommentFilesUpsertActions: FC<CommentFilesUpsertActionsProps> = ({ target
       target={target}
       as="button"
       icon={<AttachmentIcon />}
-      maxFiles={MAX_FILES}
-      maxFileSize={MAX_FILE_SIZE}
-      acceptedFileTypes={ACCEPTED_FILE_TYPES}
+      {...COMMENT_FILE_ATTACHMENT_LIMITS}
       autoAttach
     />
     <IconButton disabled aria-label="mention">
diff --git a/packages/components/modules/files/README.md b/packages/components/modules/files/README.md
index 0e4f7ad75..eb2605a94 100644
--- a/packages/components/modules/files/README.md
+++ b/packages/components/modules/files/README.md
@@ -45,7 +45,13 @@ Web-specific UI components built with React and Material-UI:
 
 ### Native
 
-React Native UI components (use the same common hooks and utilities).
+React Native UI components over the same common hooks and upload pipeline.
+
+- `useNativeFilePicker` - Photo library / document picker with the shared selection rules
+- `createNativeUploadSource` - Wraps a picked file as an `UploadSource` (chunks read on demand)
+- `UploadingFilesList` - In-progress uploads for one store scope
+- `AttachedFilesList` - Files attached to a target; tapping one opens it
+- `FileChip` - Compact tile both lists use
 
 ## Quick Start
 
@@ -351,63 +357,44 @@ fragment FileItem_file on File {
 | file | `FileItem_file$key` | required | Relay fragment reference for the file |
 | targetObjectId | `string` | - | Target object ID for deletion (enables delete button) |
 
-## Implementing React Native Components
+## Platform Seam: `UploadSource`
 
-To create React Native file components, use the common hooks with native UI:
+The uploader only needs a file's `name`, `size`, `type` and a way to read bytes `[start, end)`:
 
 ```typescript
-// native/AttachedFileItem/index.tsx
-import React from 'react'
-import { View, Text, Image, TouchableOpacity } from 'react-native'
-import { useFragment } from 'react-relay'
-import * as FileSystem from 'expo-file-system'
-
-import {
-  FileItemFragment,
-  useFileDeleteLogic,
-  useFileDownloadLogic,
-  formatFileSize,
-  formatDate,
-  isImageFile,
-} from '../../common'
-
-export const AttachedFileItem = ({ file: fileRef, targetObjectId }) => {
-  const file = useFragment(FileItemFragment, fileRef)
-
-  const { handleDelete, isDeletingFile } = useFileDeleteLogic({ targetObjectId })
-
-  const { handleDownload } = useFileDownloadLogic({
-    downloadHandler: async (url, fileName) => {
-      const downloadPath = FileSystem.documentDirectory + fileName
-      await FileSystem.downloadAsync(url, downloadPath)
-    },
-  })
+interface UploadSource {
+  name: string
+  size: number
+  type: string
+  readChunk: (start: number, end: number) => Promise<Blob | Uint8Array>
+  dispose?: () => void
+}
+```
 
-  const isImage = isImageFile(file.fileContentType)
+Every upload entry point (`uploadFile`, `addFile`, `handleFilesSelected`) accepts a web `File` or an
+`UploadSource`. A `File` is wrapped automatically (`Blob.slice`); native builds one with
+`createNativeUploadSource`, which reads each chunk through a short-lived expo-file-system
+`FileHandle`. Chunks are read lazily inside the upload concurrency slot, so at most
+`MAX_CONCURRENT_CHUNKS` chunks are in memory at once, and a retry reuses the bytes it already read.
+`dispose` runs when the upload leaves the store (removed, attached, or its scope cleared), which is
+how native deletes the cache copy it makes of an Android `content://` file.
 
-  return (
-    <View>
-      {isImage && file.thumbnail && (
-        <Image source={{ uri: file.thumbnail }} style={{ width: 100, height: 100 }} />
-      )}
-      <Text>{file.fileName}</Text>
-      <Text>{formatFileSize(file.fileSize)}</Text>
-      <Text>{formatDate(file.created)}</Text>
-
-      <TouchableOpacity onPress={() => handleDownload(file.file, file.fileName)}>
-        <Text>Download</Text>
-      </TouchableOpacity>
-
-      {file.hasPerm && (
-        <TouchableOpacity onPress={() => handleDelete(file.id)} disabled={isDeletingFile}>
-          <Text>Delete</Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  )
-}
+```typescript
+import { useDeferredFileAttachments } from '@baseapp-frontend/components/files/common'
+import { UploadingFilesList, useNativeFilePicker } from '@baseapp-frontend/components/files/native'
+
+const { handleFilesSelected, attachTo, scope } = useDeferredFileAttachments()
+const { pickImages, pickDocuments } = useNativeFilePicker({
+  onFilesSelected: handleFilesSelected,
+  maxFiles: 5,
+  maxFileSize: 100 * 1024 * 1024,
+  acceptedFileTypes: { 'image/*': ['.png', '.jpg'], 'application/pdf': ['.pdf'] },
+})
+// ...render <UploadingFilesList scope={scope} />, then attachTo(newTargetId) once it exists.
 ```
 
+Selection rules (`filterSelectedFiles`) are shared, so web and native accept and refuse the same files.
+
 ## Features in Detail
 
 ### Chunked Upload
diff --git a/packages/components/modules/files/common/context/FileUploadProvider/index.tsx b/packages/components/modules/files/common/context/FileUploadProvider/index.tsx
index 64ba0d900..7493eb35e 100644
--- a/packages/components/modules/files/common/context/FileUploadProvider/index.tsx
+++ b/packages/components/modules/files/common/context/FileUploadProvider/index.tsx
@@ -1,14 +1,16 @@
 import { create } from 'zustand'
 
 import { FileUploadStatus } from '../../constants'
-import type { FileUploadProgress } from '../../types'
+import type { FileUploadProgress, UploadInput } from '../../types'
 import { nextLocalId } from '../../utils/localId'
+import { toUploadSource } from '../../utils/uploadSource'
 import type { FileUploadState } from './types'
 
 export const useFileUploadStore = create<FileUploadState>((set, get) => ({
   files: new Map(),
 
-  addFile: (file: File, scope?: string) => {
+  addFile: (input: UploadInput, scope?: string) => {
+    const file = toUploadSource(input)
     const id = `${nextLocalId()}-${file.name}`
     const fileProgress: FileUploadProgress = {
       id,
@@ -99,6 +101,7 @@ export const useFileUploadStore = create<FileUploadState>((set, get) => ({
       if (file?.abortController) {
         file.abortController.abort()
       }
+      file?.file.dispose?.()
 
       newFiles.delete(id)
       return { files: newFiles }
@@ -200,6 +203,8 @@ export const useFileUploadStore = create<FileUploadState>((set, get) => ({
 
       Array.from(newFiles.entries()).forEach(([id, file]) => {
         if (file.scope === scope) {
+          file.abortController?.abort()
+          file.file.dispose?.()
           newFiles.delete(id)
         }
       })
diff --git a/packages/components/modules/files/common/context/FileUploadProvider/types.ts b/packages/components/modules/files/common/context/FileUploadProvider/types.ts
index d0c177c1e..1e7c131c5 100644
--- a/packages/components/modules/files/common/context/FileUploadProvider/types.ts
+++ b/packages/components/modules/files/common/context/FileUploadProvider/types.ts
@@ -1,8 +1,8 @@
-import type { FileUploadProgress } from '../../types'
+import type { FileUploadProgress, UploadInput } from '../../types'
 
 export interface FileUploadState {
   files: Map<string, FileUploadProgress>
-  addFile: (file: File, scope?: string) => string
+  addFile: (input: UploadInput, scope?: string) => string
   updateFileProgress: (id: string, progress: Partial<FileUploadProgress>) => void
   updateChunkProgress: (fileId: string, chunkIndex: number, loaded: number, total: number) => void
   recordChunkEtag: (fileId: string, chunkIndex: number, etag: string) => void
diff --git a/packages/components/modules/files/common/context/__tests__/fileUploadStore.test.ts b/packages/components/modules/files/common/context/__tests__/fileUploadStore.test.ts
index 76831c1a3..929823b24 100644
--- a/packages/components/modules/files/common/context/__tests__/fileUploadStore.test.ts
+++ b/packages/components/modules/files/common/context/__tests__/fileUploadStore.test.ts
@@ -1,3 +1,5 @@
+import { vi } from 'vitest'
+
 import { FileUploadStatus } from '../../constants'
 import { useFileUploadStore } from '../FileUploadProvider'
 
@@ -107,4 +109,38 @@ describe('useFileUploadStore', () => {
 
     expect(getCompletedFileIds()).toEqual(['relay-1'])
   })
+
+  it('disposes a source when its upload is removed or its scope cleared', () => {
+    const { addFile, removeFile, clearScope } = useFileUploadStore.getState()
+    const source = (dispose: () => void) => ({
+      name: 'a.pdf',
+      size: 1,
+      type: 'application/pdf',
+      readChunk: async () => new Uint8Array([1]),
+      dispose,
+    })
+    const disposeRemoved = vi.fn()
+    const disposeScoped = vi.fn()
+    const disposeOther = vi.fn()
+
+    removeFile(addFile(source(disposeRemoved)))
+    addFile(source(disposeScoped), 'composer')
+    addFile(source(disposeOther), 'other')
+    clearScope('composer')
+
+    expect(disposeRemoved).toHaveBeenCalledTimes(1)
+    expect(disposeScoped).toHaveBeenCalledTimes(1)
+    expect(disposeOther).not.toHaveBeenCalled()
+  })
+
+  it('clearScope aborts uploads still in flight', () => {
+    const { addFile, updateFileProgress, clearScope } = useFileUploadStore.getState()
+    const controller = new AbortController()
+    const id = addFile(makeFile(), 'composer')
+    updateFileProgress(id, { status: FileUploadStatus.UPLOADING, abortController: controller })
+
+    clearScope('composer')
+
+    expect(controller.signal.aborted).toBe(true)
+  })
 })
diff --git a/packages/components/modules/files/common/hooks/useChunkedUpload/__tests__/useChunkedUpload.test.ts b/packages/components/modules/files/common/hooks/useChunkedUpload/__tests__/useChunkedUpload.test.ts
index ad93afd87..aadf39b1a 100644
--- a/packages/components/modules/files/common/hooks/useChunkedUpload/__tests__/useChunkedUpload.test.ts
+++ b/packages/components/modules/files/common/hooks/useChunkedUpload/__tests__/useChunkedUpload.test.ts
@@ -26,7 +26,14 @@ const mockUploadChunks = uploadChunks as MockedFunction<typeof uploadChunks>
 
 const CHUNK_SIZE = 5 * 1024 * 1024
 const makeFile = (chunks: number) =>
-  new File([new Uint8Array(chunks * CHUNK_SIZE)], 'video.mp4', { type: 'video/mp4' })
+  new File(
+    Array.from({ length: chunks }, (_, index) => new Uint8Array(CHUNK_SIZE).fill(index)),
+    'video.mp4',
+    { type: 'video/mp4' },
+  )
+
+const readByteAt = async (blob: Blob, offset: number) =>
+  new Uint8Array(await blob.slice(offset, offset + 1).arrayBuffer())[0]
 
 const initiateResponse = (numParts: number, expiresIn = 3600) => ({
   id: 'file-public-id',
@@ -107,10 +114,13 @@ describe('useChunkedUpload', () => {
     const { result } = renderHook(() => useChunkedUpload())
     await result.current.resumeUpload(fileId)
 
-    // Only the missing chunk was uploaded, against its original URL.
+    // Only the missing chunk was uploaded, against its original URL — and the lazy
+    // reader for that single slot reads original chunk 1's byte range, not chunk 0's.
     const call = mockUploadChunks.mock.calls[0]![0]
-    expect(call.chunks).toHaveLength(1)
     expect(call.presignedUrls).toEqual(['https://s3/part-1'])
+    const chunk = (await call.readChunk!(0)) as Blob
+    expect(chunk.size).toBe(CHUNK_SIZE)
+    expect(await readByteAt(chunk, 0)).toBe(1)
 
     expect(mockAxiosPost).toHaveBeenCalledWith('files/uploads/file-public-id/complete', {
       parts: [
@@ -150,7 +160,7 @@ describe('useChunkedUpload', () => {
     // Stale upload aborted server-side, then a fresh initiate + full upload.
     expect(mockAxiosDelete).toHaveBeenCalledWith('files/uploads/stale-id')
     expect(mockAxiosPost).toHaveBeenNthCalledWith(1, 'files/uploads', expect.any(Object))
-    expect(mockUploadChunks.mock.calls[0]![0].chunks).toHaveLength(2)
+    expect(mockUploadChunks.mock.calls[0]![0].presignedUrls).toHaveLength(2)
     expect(mockAxiosPost).toHaveBeenNthCalledWith(2, 'files/uploads/file-public-id/complete', {
       parts: [
         { partNumber: 1, etag: 'fresh-0' },
diff --git a/packages/components/modules/files/common/hooks/useChunkedUpload/index.ts b/packages/components/modules/files/common/hooks/useChunkedUpload/index.ts
index 6441d0138..d2754f991 100644
--- a/packages/components/modules/files/common/hooks/useChunkedUpload/index.ts
+++ b/packages/components/modules/files/common/hooks/useChunkedUpload/index.ts
@@ -4,8 +4,13 @@ import { axios } from '@baseapp-frontend/utils'
 
 import { CHUNK_SIZE, FileUploadStatus, URL_EXPIRY_SAFETY_MARGIN_MS } from '../../constants'
 import { useFileUploadStore } from '../../context/FileUploadProvider'
-import type { CompleteUploadPart, InitiateUploadResponse } from '../../types'
-import { chunkFile, uploadChunks } from '../../utils'
+import type {
+  CompleteUploadPart,
+  InitiateUploadResponse,
+  UploadInput,
+  UploadSource,
+} from '../../types'
+import { getChunkCount, toUploadSource, uploadChunks } from '../../utils'
 import type { UseChunkedUploadOptions } from './types'
 
 const areUrlsExpired = (initiatedAt?: number, expiresIn?: number): boolean => {
@@ -13,6 +18,12 @@ const areUrlsExpired = (initiatedAt?: number, expiresIn?: number): boolean => {
   return Date.now() >= initiatedAt + expiresIn * 1000 - URL_EXPIRY_SAFETY_MARGIN_MS
 }
 
+/** Read part `index` of `source` — the same byte range `chunkFile` would slice. */
+const readChunkAt = (source: UploadSource, index: number) => {
+  const start = index * CHUNK_SIZE
+  return source.readChunk(start, Math.min(start + CHUNK_SIZE, source.size))
+}
+
 const buildParts = (etags: (string | undefined)[]): CompleteUploadPart[] =>
   etags.map((etag, idx) => {
     if (!etag) {
@@ -60,14 +71,14 @@ export const useChunkedUpload = (options?: UseChunkedUploadOptions) => {
    * presigned URLs have expired).
    */
   const startUpload = useCallback(
-    async (fileId: string, file: File) => {
+    async (fileId: string, file: UploadSource) => {
       const { recordChunkEtag } = useFileUploadStore.getState()
-      const chunks = chunkFile(file)
+      const totalChunks = getChunkCount(file.size)
       const abortController = new AbortController()
 
       updateFileProgress(fileId, {
         status: FileUploadStatus.PENDING,
-        totalChunks: chunks.length,
+        totalChunks,
         completedChunks: 0,
         uploadedBytes: 0,
         chunkProgress: new Map(),
@@ -80,7 +91,7 @@ export const useChunkedUpload = (options?: UseChunkedUploadOptions) => {
         fileName: file.name,
         fileSize: file.size,
         fileContentType: file.type,
-        numParts: chunks.length,
+        numParts: totalChunks,
         partSize: CHUNK_SIZE,
       })
 
@@ -95,7 +106,7 @@ export const useChunkedUpload = (options?: UseChunkedUploadOptions) => {
       })
 
       const etags = await uploadChunks({
-        chunks,
+        readChunk: (index) => readChunkAt(file, index),
         presignedUrls: data.presignedUrls.map((p) => p.url),
         abortSignal: abortController.signal,
         onProgress: (chunkIndex, loaded, total) => {
@@ -122,7 +133,8 @@ export const useChunkedUpload = (options?: UseChunkedUploadOptions) => {
   )
 
   const uploadFile = useCallback(
-    async (file: File, scope?: string) => {
+    async (input: UploadInput, scope?: string) => {
+      const file = toUploadSource(input)
       const fileId = addFile(file, scope)
 
       try {
@@ -154,12 +166,12 @@ export const useChunkedUpload = (options?: UseChunkedUploadOptions) => {
       resumeFile(fileId)
 
       try {
-        const chunks = chunkFile(fileProgress.file)
+        const totalChunks = getChunkCount(fileProgress.file.size)
         // Chunks complete out of order (parallel uploads), so resume from the
         // per-index ETag record rather than assuming a contiguous prefix.
-        const pendingIndexes = chunks
-          .map((_, index) => index)
-          .filter((index) => !fileProgress.etags[index])
+        const pendingIndexes = Array.from({ length: totalChunks }, (_, index) => index).filter(
+          (index) => !fileProgress.etags[index],
+        )
 
         // Every chunk already uploaded: only the (URL-free) complete call is
         // left, so URL expiry is irrelevant — go straight to complete instead
@@ -188,7 +200,7 @@ export const useChunkedUpload = (options?: UseChunkedUploadOptions) => {
         if (pendingIndexes.length > 0) {
           const presignedUrls = fileProgress.presignedUrls ?? []
           const etags = await uploadChunks({
-            chunks: pendingIndexes.map((index) => chunks[index]!),
+            readChunk: (i) => readChunkAt(fileProgress.file, pendingIndexes[i]!),
             presignedUrls: pendingIndexes.map((index) => presignedUrls[index]!.url),
             abortSignal: abortController.signal,
             onProgress: (chunkIndex, loaded, total) => {
diff --git a/packages/components/modules/files/common/hooks/useDeferredFileAttachments/index.ts b/packages/components/modules/files/common/hooks/useDeferredFileAttachments/index.ts
index deaea8392..dd500beef 100644
--- a/packages/components/modules/files/common/hooks/useDeferredFileAttachments/index.ts
+++ b/packages/components/modules/files/common/hooks/useDeferredFileAttachments/index.ts
@@ -5,6 +5,7 @@ import { ConnectionHandler } from 'react-relay'
 import { FileUploadStatus } from '../../constants'
 import { useFileUploadStore } from '../../context/FileUploadProvider'
 import { useFileAttachToTargetMutation } from '../../graphql/mutations/FileAttachToTarget'
+import type { UploadInput } from '../../types'
 import { nextLocalId } from '../../utils/localId'
 import { useChunkedUpload } from '../useChunkedUpload'
 import type { UseDeferredFileAttachmentsReturn } from './types'
@@ -32,7 +33,7 @@ export const useDeferredFileAttachments = (): UseDeferredFileAttachmentsReturn =
   )
 
   const handleFilesSelected = useCallback(
-    async (files: File[]) => {
+    async (files: UploadInput[]) => {
       if (!files.length) return
 
       const promises = files.map((file) => uploadFile(file, scopeRef.current))
diff --git a/packages/components/modules/files/common/hooks/useDeferredFileAttachments/types.ts b/packages/components/modules/files/common/hooks/useDeferredFileAttachments/types.ts
index adf6527d0..125d93675 100644
--- a/packages/components/modules/files/common/hooks/useDeferredFileAttachments/types.ts
+++ b/packages/components/modules/files/common/hooks/useDeferredFileAttachments/types.ts
@@ -1,6 +1,8 @@
+import type { UploadInput } from '../../types'
+
 export interface UseDeferredFileAttachmentsReturn {
   /** Upload the selected files immediately; their ids are held for a later attachTo. */
-  handleFilesSelected: (files: File[]) => Promise<void>
+  handleFilesSelected: (files: UploadInput[]) => Promise<void>
   /**
    * Attach every successfully uploaded file to a target that now exists (e.g. a
    * freshly created comment). Waits for any in-flight uploads first, so a fast
diff --git a/packages/components/modules/files/common/hooks/useFileSelect/__tests__/useFileSelect.test.ts b/packages/components/modules/files/common/hooks/useFileSelect/__tests__/useFileSelect.test.ts
index 98b40810a..966c7c78d 100644
--- a/packages/components/modules/files/common/hooks/useFileSelect/__tests__/useFileSelect.test.ts
+++ b/packages/components/modules/files/common/hooks/useFileSelect/__tests__/useFileSelect.test.ts
@@ -54,6 +54,20 @@ describe('useFileSelect', () => {
     expect(onFilesSelected).toHaveBeenCalledWith([ok1, ok2])
   })
 
+  it('drops files outside acceptedFileTypes, even when the OS picker let them through', () => {
+    const onFilesSelected = vi.fn()
+    const { result } = renderHook(() =>
+      useFileSelect({ onFilesSelected, acceptedFileTypes: { 'application/pdf': ['.pdf'] } }),
+    )
+
+    const pdf = makeFile('doc.PDF', 10)
+    const exe = makeFile('setup.exe', 10)
+
+    fireChange(result.current.getInputProps().onChange, [exe, pdf])
+
+    expect(onFilesSelected).toHaveBeenCalledWith([pdf])
+  })
+
   it('does not fire the callback when nothing valid was selected, and resets the input', () => {
     const onFilesSelected = vi.fn()
     const { result } = renderHook(() => useFileSelect({ onFilesSelected, maxFileSize: 100 }))
diff --git a/packages/components/modules/files/common/hooks/useFileSelect/index.ts b/packages/components/modules/files/common/hooks/useFileSelect/index.ts
index ec5e0efbe..841285e13 100644
--- a/packages/components/modules/files/common/hooks/useFileSelect/index.ts
+++ b/packages/components/modules/files/common/hooks/useFileSelect/index.ts
@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react'
 
+import { filterSelectedFiles } from '../../utils/filterSelectedFiles'
 import type { Accept, UseFileSelectParams, UseFileSelectReturn } from './types'
 
 const buildAcceptAttr = (acceptedFileTypes?: Accept): string | undefined => {
@@ -40,9 +41,11 @@ export const useFileSelect = ({
       style: { display: 'none' },
       onChange: (event) => {
         const { target } = event
-        const selected = Array.from(target.files ?? [])
-          .filter((file) => file.size <= maxFileSize)
-          .slice(0, maxFiles)
+        const { accepted: selected } = filterSelectedFiles(Array.from(target.files ?? []), {
+          maxFiles,
+          maxFileSize,
+          acceptedFileTypes,
+        })
         // Reset so selecting the same file again re-triggers onChange.
         target.value = ''
         if (selected.length) {
diff --git a/packages/components/modules/files/common/hooks/useFileSelect/types.ts b/packages/components/modules/files/common/hooks/useFileSelect/types.ts
index 63c449805..24c56378b 100644
--- a/packages/components/modules/files/common/hooks/useFileSelect/types.ts
+++ b/packages/components/modules/files/common/hooks/useFileSelect/types.ts
@@ -1,6 +1,8 @@
 import type { ChangeEventHandler } from 'react'
 
-export type Accept = Record<string, string[]>
+import type { Accept } from '../../types'
+
+export type { Accept }
 
 export interface UseFileSelectParams {
   onFilesSelected: (files: File[]) => void
diff --git a/packages/components/modules/files/common/hooks/useFileUploadLogic/index.ts b/packages/components/modules/files/common/hooks/useFileUploadLogic/index.ts
index 7fde13133..fa2c84ace 100644
--- a/packages/components/modules/files/common/hooks/useFileUploadLogic/index.ts
+++ b/packages/components/modules/files/common/hooks/useFileUploadLogic/index.ts
@@ -5,6 +5,7 @@ import { ConnectionHandler } from 'react-relay'
 import { FileUploadStatus } from '../../constants'
 import { useFileUploadStore } from '../../context/FileUploadProvider'
 import { useFileAttachToTargetMutation } from '../../graphql/mutations/FileAttachToTarget'
+import type { UploadInput } from '../../types'
 import { useChunkedUpload } from '../useChunkedUpload'
 import type { AttachOptions, UseFileUploadLogicParams, UseFileUploadLogicReturn } from './types'
 
@@ -74,7 +75,7 @@ export const useFileUploadLogic = ({
   })
 
   const handleFilesSelected = useCallback(
-    async (selectedFiles: File[]) => {
+    async (selectedFiles: UploadInput[]) => {
       if (!targetObjectId) {
         onError?.(new Error('Target object ID is required'))
         return
diff --git a/packages/components/modules/files/common/hooks/useFileUploadLogic/types.ts b/packages/components/modules/files/common/hooks/useFileUploadLogic/types.ts
index deaaa6fc4..a1af48dba 100644
--- a/packages/components/modules/files/common/hooks/useFileUploadLogic/types.ts
+++ b/packages/components/modules/files/common/hooks/useFileUploadLogic/types.ts
@@ -1,3 +1,5 @@
+import type { UploadInput } from '../../types'
+
 export interface UseFileUploadLogicParams {
   targetObjectId?: string
   autoAttach?: boolean
@@ -7,7 +9,7 @@ export interface UseFileUploadLogicParams {
 }
 
 export interface UseFileUploadLogicReturn {
-  handleFilesSelected: (selectedFiles: File[]) => Promise<void>
+  handleFilesSelected: (selectedFiles: UploadInput[]) => Promise<void>
   isAttaching: boolean
   resetKey: number
 }
diff --git a/packages/components/modules/files/common/types.ts b/packages/components/modules/files/common/types.ts
index 2fd5b2533..140385876 100644
--- a/packages/components/modules/files/common/types.ts
+++ b/packages/components/modules/files/common/types.ts
@@ -10,9 +10,33 @@ export interface PresignedUrl {
   url: string
 }
 
+/** A chunk body XHR can send on both platforms (RN base64-bridges typed arrays). */
+export type UploadChunkBody = Blob | Uint8Array
+
+/**
+ * What the uploader needs from a file, independent of platform. A web `File` is
+ * wrapped automatically; a native leg builds one over its own file API. `readChunk`
+ * is called lazily, one chunk at a time, so a large file is never held in memory.
+ */
+export interface UploadSource {
+  name: string
+  size: number
+  type: string
+  /** Read bytes `[start, end)`. */
+  readChunk: (start: number, end: number) => Promise<UploadChunkBody>
+  /** Frees anything the source created (e.g. a temp copy); called when the upload leaves the store. */
+  dispose?: () => void
+}
+
+/** Anything the uploader accepts: a web `File`, or a platform-built source. */
+export type UploadInput = File | UploadSource
+
+/** Accepted types, keyed by MIME pattern (`image/*`) with extensions (`.png`) as values. */
+export type Accept = Record<string, string[]>
+
 export interface FileUploadProgress {
   id: string // Local ID for tracking
-  file: File // Original File object
+  file: UploadSource
   fileName: string
   fileSize: number
   /** Owner of this upload (e.g. a target id, or a composer instance) — lets each list show only its own uploads. */
diff --git a/packages/components/modules/files/common/utils/__tests__/filterSelectedFiles.test.ts b/packages/components/modules/files/common/utils/__tests__/filterSelectedFiles.test.ts
new file mode 100644
index 000000000..3a45e66b4
--- /dev/null
+++ b/packages/components/modules/files/common/utils/__tests__/filterSelectedFiles.test.ts
@@ -0,0 +1,84 @@
+import {
+  describeRejectedFiles,
+  filterSelectedFiles,
+  isAcceptedFileType,
+} from '../filterSelectedFiles'
+
+const file = (name: string, type = '', size = 10) => ({ name, type, size })
+
+const ACCEPT = { 'image/*': ['.png', '.jpg'], 'application/pdf': ['.pdf'] }
+
+describe('isAcceptedFileType', () => {
+  it('accepts everything when no types are configured', () => {
+    expect(isAcceptedFileType(file('a.bin'))).toBe(true)
+    expect(isAcceptedFileType(file('a.bin'), {})).toBe(true)
+  })
+
+  it('matches wildcard and exact MIME patterns', () => {
+    expect(isAcceptedFileType(file('photo', 'image/heic'), ACCEPT)).toBe(true)
+    expect(isAcceptedFileType(file('doc', 'application/pdf'), ACCEPT)).toBe(true)
+    expect(isAcceptedFileType(file('clip', 'video/mp4'), ACCEPT)).toBe(false)
+  })
+
+  it('falls back to a case-insensitive extension when the MIME type is missing', () => {
+    expect(isAcceptedFileType(file('scan.PDF'), ACCEPT)).toBe(true)
+    expect(isAcceptedFileType(file('notes.txt'), ACCEPT)).toBe(false)
+    expect(isAcceptedFileType(file('.pdf'), ACCEPT)).toBe(false)
+  })
+})
+
+describe('filterSelectedFiles', () => {
+  it('splits a selection into accepted and rejected with a reason', () => {
+    const ok = file('a.png', 'image/png', 100)
+    const big = file('b.png', 'image/png', 5000)
+    const wrongType = file('c.exe', 'application/x-msdownload', 100)
+
+    const result = filterSelectedFiles([ok, big, wrongType], {
+      maxFileSize: 1000,
+      acceptedFileTypes: ACCEPT,
+    })
+
+    expect(result.accepted).toEqual([ok])
+    expect(result.rejected).toEqual([
+      { file: big, reason: 'too-large' },
+      { file: wrongType, reason: 'invalid-type' },
+    ])
+  })
+
+  it('caps the count after dropping invalid files, so they do not use up slots', () => {
+    const invalid = file('x.exe', 'application/x-msdownload')
+    const valid = [file('1.pdf'), file('2.pdf'), file('3.pdf')]
+
+    const result = filterSelectedFiles([invalid, ...valid], {
+      maxFiles: 2,
+      acceptedFileTypes: ACCEPT,
+    })
+
+    expect(result.accepted).toEqual(valid.slice(0, 2))
+    expect(result.rejected.map(({ reason }) => reason)).toEqual(['invalid-type', 'too-many'])
+  })
+})
+
+describe('describeRejectedFiles', () => {
+  it('returns null when nothing was rejected', () => {
+    expect(describeRejectedFiles([])).toBeNull()
+  })
+
+  it('summarises every distinct reason once', () => {
+    const rejected = [
+      { file: file('a.png'), reason: 'too-large' as const },
+      { file: file('b.png'), reason: 'too-large' as const },
+      { file: file('c.exe'), reason: 'invalid-type' as const },
+    ]
+
+    expect(describeRejectedFiles(rejected, { maxFileSize: 1024 * 1024 })).toBe(
+      '3 files were not added (over 1.00 MB, unsupported type).',
+    )
+  })
+
+  it('names the count limit', () => {
+    expect(
+      describeRejectedFiles([{ file: file('a.pdf'), reason: 'too-many' }], { maxFiles: 5 }),
+    ).toBe('1 file was not added (more than 5 at once).')
+  })
+})
diff --git a/packages/components/modules/files/common/utils/__tests__/formatters.test.ts b/packages/components/modules/files/common/utils/__tests__/formatters.test.ts
new file mode 100644
index 000000000..d9c1bd5c0
--- /dev/null
+++ b/packages/components/modules/files/common/utils/__tests__/formatters.test.ts
@@ -0,0 +1,12 @@
+import { getFileTypeLabel } from '../formatters'
+
+describe('getFileTypeLabel', () => {
+  it('uses the extension when the name has one', () => {
+    expect(getFileTypeLabel('report.final.pdf', 'application/pdf')).toBe('PDF')
+  })
+
+  it('falls back to the content-type category', () => {
+    expect(getFileTypeLabel('scan', 'image/png')).toBe('IMAGE')
+    expect(getFileTypeLabel(null, null)).toBe('OTHER')
+  })
+})
diff --git a/packages/components/modules/files/common/utils/__tests__/uploadChunk.test.ts b/packages/components/modules/files/common/utils/__tests__/uploadChunk.test.ts
new file mode 100644
index 000000000..9196b959f
--- /dev/null
+++ b/packages/components/modules/files/common/utils/__tests__/uploadChunk.test.ts
@@ -0,0 +1,21 @@
+import { vi } from 'vitest'
+
+import { uploadChunk } from '../uploadChunk'
+
+describe('uploadChunk', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('rejects without opening a request when the signal is already aborted', async () => {
+    const XHR = vi.fn()
+    vi.stubGlobal('XMLHttpRequest', XHR)
+    const controller = new AbortController()
+    controller.abort()
+
+    await expect(
+      uploadChunk(new Uint8Array([1]), 'https://s3/part-0', controller.signal),
+    ).rejects.toThrow('Chunk upload aborted')
+    expect(XHR).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/components/modules/files/common/utils/__tests__/uploadChunks.test.ts b/packages/components/modules/files/common/utils/__tests__/uploadChunks.test.ts
index 003367b8d..b71b03984 100644
--- a/packages/components/modules/files/common/utils/__tests__/uploadChunks.test.ts
+++ b/packages/components/modules/files/common/utils/__tests__/uploadChunks.test.ts
@@ -107,4 +107,86 @@ describe('uploadChunks', () => {
 
     expect(mockUploadChunk).toHaveBeenCalledTimes(1)
   })
+
+  describe('lazy mode (readChunk)', () => {
+    it('reads each chunk exactly once and uploads it against its own URL', async () => {
+      const readChunk = vi.fn(async (index: number) => new Uint8Array([index]))
+      mockUploadChunk.mockImplementation(async (_chunk, url) => `etag-${url.split('-').pop()}`)
+
+      const etags = await uploadChunks({ readChunk, presignedUrls: makeUrls(3) })
+
+      expect(etags).toEqual(['etag-0', 'etag-1', 'etag-2'])
+      expect(readChunk.mock.calls.map(([index]) => index).sort()).toEqual([0, 1, 2])
+      expect(mockUploadChunk).toHaveBeenCalledWith(
+        new Uint8Array([2]),
+        'https://s3/part-2',
+        undefined,
+        expect.any(Function),
+      )
+    })
+
+    it('never holds more chunks in memory than the concurrency limit', async () => {
+      let inFlight = 0
+      let peak = 0
+      const readChunk = vi.fn(async (index: number) => {
+        inFlight += 1
+        peak = Math.max(peak, inFlight)
+        return new Uint8Array([index])
+      })
+      mockUploadChunk.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => {
+              inFlight -= 1
+              resolve('etag')
+            }, 5)
+          }),
+      )
+
+      await uploadChunks({ readChunk, presignedUrls: makeUrls(8), maxConcurrent: 2 })
+
+      // A chunk is read only once it has a slot, so reads in flight track the limit.
+      expect(readChunk).toHaveBeenCalledTimes(8)
+      expect(peak).toBeLessThanOrEqual(2)
+    })
+
+    it('retries with the bytes it already read instead of reading again', async () => {
+      const readChunk = vi.fn(async () => new Uint8Array([7]))
+      mockUploadChunk.mockRejectedValueOnce(new Error('network')).mockResolvedValueOnce('etag-0')
+
+      await uploadChunks({ readChunk, presignedUrls: makeUrls(1), retryDelay: 1 })
+
+      expect(mockUploadChunk).toHaveBeenCalledTimes(2)
+      expect(readChunk).toHaveBeenCalledTimes(1)
+    })
+
+    it('propagates a read failure', async () => {
+      const readChunk = vi.fn(async () => {
+        throw new Error('cannot read file')
+      })
+
+      await expect(uploadChunks({ readChunk, presignedUrls: makeUrls(1) })).rejects.toThrow(
+        'cannot read file',
+      )
+      expect(mockUploadChunk).not.toHaveBeenCalled()
+    })
+  })
+
+  it('does not start a lazily-read chunk once the upload was aborted', async () => {
+    const controller = new AbortController()
+    const readChunk = vi.fn(async () => {
+      controller.abort()
+      return new Uint8Array([1])
+    })
+    // The real uploadChunk rejects up front for an aborted signal; mirror that contract.
+    mockUploadChunk.mockImplementation(async (_chunk, _url, signal) => {
+      if (signal?.aborted) throw new Error('Chunk upload aborted')
+      return 'etag'
+    })
+
+    await expect(
+      uploadChunks({ readChunk, presignedUrls: makeUrls(1), abortSignal: controller.signal }),
+    ).rejects.toThrow('aborted')
+    expect(mockUploadChunk).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/components/modules/files/common/utils/__tests__/uploadItemState.test.ts b/packages/components/modules/files/common/utils/__tests__/uploadItemState.test.ts
new file mode 100644
index 000000000..795f0b07a
--- /dev/null
+++ b/packages/components/modules/files/common/utils/__tests__/uploadItemState.test.ts
@@ -0,0 +1,42 @@
+import { FileUploadStatus } from '../../constants'
+import { getUploadItemActions, getUploadPercent } from '../uploadItemState'
+
+describe('getUploadItemActions', () => {
+  it('offers pause only while uploading, and resume only when paused', () => {
+    expect(getUploadItemActions(FileUploadStatus.UPLOADING)).toEqual({
+      canPause: true,
+      canResume: false,
+      canRetry: false,
+      canRemove: false,
+    })
+    expect(getUploadItemActions(FileUploadStatus.PAUSED)).toMatchObject({
+      canResume: true,
+      canRemove: true,
+    })
+  })
+
+  it('lets a completed-but-unattached upload be removed', () => {
+    expect(getUploadItemActions(FileUploadStatus.COMPLETED).canRemove).toBe(true)
+  })
+
+  it('honours allowRemove / allowRetry', () => {
+    expect(getUploadItemActions(FileUploadStatus.FAILED)).toMatchObject({
+      canRetry: true,
+      canRemove: true,
+    })
+    expect(
+      getUploadItemActions(FileUploadStatus.FAILED, { allowRemove: false, allowRetry: false }),
+    ).toMatchObject({ canRetry: false, canRemove: false })
+  })
+})
+
+describe('getUploadPercent', () => {
+  it('reports byte progress, and 100 once completed', () => {
+    expect(
+      getUploadPercent({ status: FileUploadStatus.UPLOADING, uploadedBytes: 25, fileSize: 100 }),
+    ).toBe(25)
+    expect(
+      getUploadPercent({ status: FileUploadStatus.COMPLETED, uploadedBytes: 0, fileSize: 100 }),
+    ).toBe(100)
+  })
+})
diff --git a/packages/components/modules/files/common/utils/__tests__/uploadSource.test.ts b/packages/components/modules/files/common/utils/__tests__/uploadSource.test.ts
new file mode 100644
index 000000000..c71863fbd
--- /dev/null
+++ b/packages/components/modules/files/common/utils/__tests__/uploadSource.test.ts
@@ -0,0 +1,33 @@
+import { isUploadSource, toUploadSource } from '../uploadSource'
+
+describe('toUploadSource', () => {
+  it('wraps a web File, reading the requested byte range', async () => {
+    const file = new File([new Uint8Array([10, 11, 12, 13, 14])], 'a.png', { type: 'image/png' })
+
+    const source = toUploadSource(file)
+
+    expect(source).toMatchObject({ name: 'a.png', size: 5, type: 'image/png' })
+    const chunk = (await source.readChunk(1, 4)) as Blob
+    expect(Array.from(new Uint8Array(await chunk.arrayBuffer()))).toEqual([11, 12, 13])
+  })
+
+  it('passes a platform-built source through untouched', () => {
+    const source = {
+      name: 'b.pdf',
+      size: 3,
+      type: 'application/pdf',
+      readChunk: async () => new Uint8Array([1, 2, 3]),
+    }
+
+    expect(toUploadSource(source)).toBe(source)
+  })
+})
+
+describe('isUploadSource', () => {
+  it('distinguishes a source from a web File', () => {
+    expect(isUploadSource(new File(['x'], 'a.txt'))).toBe(false)
+    expect(
+      isUploadSource({ name: 'a', size: 1, type: '', readChunk: async () => new Uint8Array() }),
+    ).toBe(true)
+  })
+})
diff --git a/packages/components/modules/files/common/utils/chunkFile.ts b/packages/components/modules/files/common/utils/chunkFile.ts
index a7e77a375..5683db0a8 100644
--- a/packages/components/modules/files/common/utils/chunkFile.ts
+++ b/packages/components/modules/files/common/utils/chunkFile.ts
@@ -11,3 +11,7 @@ export function chunkFile(file: File, chunkSize = CHUNK_SIZE): Blob[] {
 
   return chunks
 }
+
+/** How many parts `size` bytes splits into — the count `chunkFile` would produce. */
+export const getChunkCount = (size: number, chunkSize = CHUNK_SIZE): number =>
+  Math.ceil(size / chunkSize)
diff --git a/packages/components/modules/files/common/utils/filterSelectedFiles.ts b/packages/components/modules/files/common/utils/filterSelectedFiles.ts
new file mode 100644
index 000000000..4eb7986d9
--- /dev/null
+++ b/packages/components/modules/files/common/utils/filterSelectedFiles.ts
@@ -0,0 +1,91 @@
+import type { Accept } from '../types'
+import { formatFileSize } from './formatters'
+
+const DEFAULT_MAX_FILES = 10
+const DEFAULT_MAX_FILE_SIZE = 100 * 1024 * 1024
+
+export interface SelectableFile {
+  name: string
+  size: number
+  type: string
+}
+
+export interface FileSelectionLimits {
+  maxFiles?: number
+  maxFileSize?: number // in bytes
+  acceptedFileTypes?: Accept
+}
+
+export type FileRejectionReason = 'too-large' | 'invalid-type' | 'too-many'
+
+export interface FileSelectionResult<T extends SelectableFile> {
+  accepted: T[]
+  rejected: { file: T; reason: FileRejectionReason }[]
+}
+
+const getExtension = (name: string) => {
+  const dot = name.lastIndexOf('.')
+  return dot > 0 ? name.slice(dot).toLowerCase() : ''
+}
+
+const matchesMime = (pattern: string, type: string) => {
+  if (!type) return false
+  if (pattern.endsWith('/*'))
+    return type.toLowerCase().startsWith(pattern.slice(0, -1).toLowerCase())
+  return type.toLowerCase() === pattern.toLowerCase()
+}
+
+/** Same semantics as the HTML `accept` attribute: any MIME pattern or extension matches. */
+export const isAcceptedFileType = (file: SelectableFile, acceptedFileTypes?: Accept): boolean => {
+  if (!acceptedFileTypes || !Object.keys(acceptedFileTypes).length) return true
+  const extension = getExtension(file.name)
+  return Object.entries(acceptedFileTypes).some(
+    ([mime, extensions]) =>
+      matchesMime(mime, file.type) ||
+      (!!extension && extensions.some((ext) => ext.toLowerCase() === extension)),
+  )
+}
+
+/**
+ * Platform-agnostic selection rules shared by the web input and native pickers, so a
+ * file the web composer refuses is refused on mobile too.
+ */
+export const filterSelectedFiles = <T extends SelectableFile>(
+  files: T[],
+  {
+    maxFiles = DEFAULT_MAX_FILES,
+    maxFileSize = DEFAULT_MAX_FILE_SIZE,
+    acceptedFileTypes,
+  }: FileSelectionLimits = {},
+): FileSelectionResult<T> =>
+  files.reduce<FileSelectionResult<T>>(
+    (result, file) => {
+      if (file.size > maxFileSize) {
+        result.rejected.push({ file, reason: 'too-large' })
+      } else if (!isAcceptedFileType(file, acceptedFileTypes)) {
+        result.rejected.push({ file, reason: 'invalid-type' })
+      } else if (result.accepted.length >= maxFiles) {
+        result.rejected.push({ file, reason: 'too-many' })
+      } else {
+        result.accepted.push(file)
+      }
+      return result
+    },
+    { accepted: [], rejected: [] },
+  )
+
+/** One user-facing line for everything a selection dropped, or null if nothing was. */
+export const describeRejectedFiles = (
+  rejected: FileSelectionResult<SelectableFile>['rejected'],
+  { maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE }: FileSelectionLimits = {},
+): string | null => {
+  if (!rejected.length) return null
+  const reasons = new Set(rejected.map(({ reason }) => reason))
+  const details = [
+    reasons.has('too-large') && `over ${formatFileSize(maxFileSize)}`,
+    reasons.has('invalid-type') && 'unsupported type',
+    reasons.has('too-many') && `more than ${maxFiles} at once`,
+  ].filter(Boolean)
+  const subject = rejected.length === 1 ? '1 file was' : `${rejected.length} files were`
+  return `${subject} not added (${details.join(', ')}).`
+}
diff --git a/packages/components/modules/files/common/utils/formatters.ts b/packages/components/modules/files/common/utils/formatters.ts
index 83a9f3bdf..dd462c8ee 100644
--- a/packages/components/modules/files/common/utils/formatters.ts
+++ b/packages/components/modules/files/common/utils/formatters.ts
@@ -44,3 +44,11 @@ export const calculateProgress = (uploadedBytes: number, totalBytes: number): nu
  */
 export const isImageFile = (contentType: string | null | undefined): boolean =>
   contentType?.startsWith('image/') ?? false
+
+/**
+ * Short type label for a file chip: the extension, else the content-type category.
+ */
+export const getFileTypeLabel = (fileName?: string | null, contentType?: string | null): string => {
+  const ext = fileName && fileName.includes('.') ? fileName.split('.').pop() : undefined
+  return (ext || getFileType(contentType) || 'file').toUpperCase()
+}
diff --git a/packages/components/modules/files/common/utils/index.ts b/packages/components/modules/files/common/utils/index.ts
index 58046775a..35b0511f2 100644
--- a/packages/components/modules/files/common/utils/index.ts
+++ b/packages/components/modules/files/common/utils/index.ts
@@ -3,3 +3,6 @@ export * from './uploadChunk'
 export * from './uploadChunks'
 export * from './formatters'
 export * from './localId'
+export * from './uploadSource'
+export * from './filterSelectedFiles'
+export * from './uploadItemState'
diff --git a/packages/components/modules/files/common/utils/uploadChunk.ts b/packages/components/modules/files/common/utils/uploadChunk.ts
index af9131529..2039acc03 100644
--- a/packages/components/modules/files/common/utils/uploadChunk.ts
+++ b/packages/components/modules/files/common/utils/uploadChunk.ts
@@ -1,10 +1,18 @@
+import type { UploadChunkBody } from '../types'
+
 export async function uploadChunk(
-  chunk: Blob,
+  chunk: UploadChunkBody,
   presignedUrl: string,
   abortSignal?: AbortSignal,
   onProgress?: (loaded: number, total: number) => void,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
+    // A pause/remove during a retry backoff or a slow read must not start a new PUT.
+    if (abortSignal?.aborted) {
+      reject(new Error('Chunk upload aborted'))
+      return
+    }
+
     const xhr = new XMLHttpRequest()
 
     // Set up progress tracking
diff --git a/packages/components/modules/files/common/utils/uploadChunks.ts b/packages/components/modules/files/common/utils/uploadChunks.ts
index 6f84de0ba..7358c9346 100644
--- a/packages/components/modules/files/common/utils/uploadChunks.ts
+++ b/packages/components/modules/files/common/utils/uploadChunks.ts
@@ -1,8 +1,8 @@
 import { MAX_CONCURRENT_CHUNKS, RETRY_ATTEMPTS, RETRY_DELAY } from '../constants'
+import type { UploadChunkBody } from '../types'
 import { uploadChunk } from './uploadChunk'
 
-interface UploadChunksOptions {
-  chunks: Blob[]
+interface UploadChunksBaseOptions {
   presignedUrls: string[]
   abortSignal?: AbortSignal
   onProgress?: (chunkIndex: number, loaded: number, total: number) => void
@@ -12,26 +12,54 @@ interface UploadChunksOptions {
   retryDelay?: number
 }
 
-export async function uploadChunks({
-  chunks,
-  presignedUrls,
-  abortSignal,
-  onProgress,
-  onChunkComplete,
-  maxConcurrent = MAX_CONCURRENT_CHUNKS,
-  retryAttempts = RETRY_ATTEMPTS,
-  retryDelay = RETRY_DELAY,
-}: UploadChunksOptions): Promise<string[]> {
-  if (chunks.length !== presignedUrls.length) {
+interface EagerChunksOptions extends UploadChunksBaseOptions {
+  chunks: UploadChunkBody[]
+  readChunk?: never
+}
+
+/**
+ * Lazy mode: each chunk is read only once it has a concurrency slot, so at most
+ * `maxConcurrent` chunks are held in memory. Native needs this — its chunks are real
+ * byte copies, not the free `Blob.slice` references web gets.
+ */
+interface LazyChunksOptions extends UploadChunksBaseOptions {
+  chunks?: never
+  readChunk: (chunkIndex: number) => Promise<UploadChunkBody>
+}
+
+type UploadChunksOptions = EagerChunksOptions | LazyChunksOptions
+
+export async function uploadChunks(options: UploadChunksOptions): Promise<string[]> {
+  const {
+    presignedUrls,
+    abortSignal,
+    onProgress,
+    onChunkComplete,
+    maxConcurrent = MAX_CONCURRENT_CHUNKS,
+    retryAttempts = RETRY_ATTEMPTS,
+    retryDelay = RETRY_DELAY,
+  } = options
+
+  const { chunks } = options
+  if (chunks && chunks.length !== presignedUrls.length) {
     throw new Error('Chunks and presigned URLs count mismatch')
   }
 
-  const etags: string[] = new Array(chunks.length)
+  const getChunk = async (chunkIndex: number): Promise<UploadChunkBody> => {
+    if (chunks) {
+      const chunk = chunks[chunkIndex]
+      if (!chunk) throw new Error(`Missing chunk or URL at index ${chunkIndex}`)
+      return chunk
+    }
+    return options.readChunk!(chunkIndex)
+  }
+
+  const etags: string[] = new Array(presignedUrls.length)
   const activeUploads = new Map<Promise<void>, number>()
 
   const uploadChunkWithRetry = async (
     chunkIndex: number,
-    chunk: Blob,
+    chunk: UploadChunkBody,
     url: string,
     attempt = 0,
   ): Promise<void> => {
@@ -52,6 +80,7 @@ export async function uploadChunks({
         await new Promise((resolve) => {
           setTimeout(resolve, retryDelay * 2 ** attempt)
         })
+        // Retries reuse the bytes already read rather than reading the chunk again.
         return uploadChunkWithRetry(chunkIndex, chunk, url, attempt + 1)
       }
 
@@ -61,10 +90,9 @@ export async function uploadChunks({
     }
   }
 
-  for (let i = 0; i < chunks.length; i += 1) {
-    const chunk = chunks[i]
+  for (let i = 0; i < presignedUrls.length; i += 1) {
     const url = presignedUrls[i]
-    if (!chunk || !url) {
+    if (!url) {
       throw new Error(`Missing chunk or URL at index ${i}`)
     }
 
@@ -74,7 +102,8 @@ export async function uploadChunks({
       await Promise.race(activeUploads.keys())
     }
 
-    const uploadPromise = uploadChunkWithRetry(i, chunk, url)
+    // Read inside the slot so lazy mode never holds more than maxConcurrent chunks.
+    const uploadPromise = getChunk(i).then((chunk) => uploadChunkWithRetry(i, chunk, url))
     activeUploads.set(uploadPromise, i)
 
     // Remove from active uploads when complete
diff --git a/packages/components/modules/files/common/utils/uploadItemState.ts b/packages/components/modules/files/common/utils/uploadItemState.ts
new file mode 100644
index 000000000..05e6d3b87
--- /dev/null
+++ b/packages/components/modules/files/common/utils/uploadItemState.ts
@@ -0,0 +1,37 @@
+import { FileUploadStatus } from '../constants'
+import type { FileUploadProgress } from '../types'
+import { calculateProgress } from './formatters'
+
+const REMOVABLE_STATUSES = [
+  FileUploadStatus.PENDING,
+  FileUploadStatus.FAILED,
+  FileUploadStatus.PAUSED,
+  FileUploadStatus.ABORTED,
+  // Uploaded but not yet attached (e.g. a new comment) — let the user undo it.
+  FileUploadStatus.COMPLETED,
+]
+
+export interface UploadItemActions {
+  canPause: boolean
+  canResume: boolean
+  canRetry: boolean
+  canRemove: boolean
+}
+
+/** Which controls an in-progress upload offers; shared so both platforms agree. */
+export const getUploadItemActions = (
+  status: FileUploadStatus,
+  { allowRemove = true, allowRetry = true }: { allowRemove?: boolean; allowRetry?: boolean } = {},
+): UploadItemActions => ({
+  canPause: status === FileUploadStatus.UPLOADING,
+  canResume: status === FileUploadStatus.PAUSED,
+  canRetry: allowRetry && status === FileUploadStatus.FAILED,
+  canRemove: allowRemove && REMOVABLE_STATUSES.includes(status),
+})
+
+export const getUploadPercent = (
+  fileProgress: Pick<FileUploadProgress, 'status' | 'uploadedBytes' | 'fileSize'>,
+): number =>
+  fileProgress.status === FileUploadStatus.COMPLETED
+    ? 100
+    : calculateProgress(fileProgress.uploadedBytes, fileProgress.fileSize)
diff --git a/packages/components/modules/files/common/utils/uploadSource.ts b/packages/components/modules/files/common/utils/uploadSource.ts
new file mode 100644
index 000000000..d67df3535
--- /dev/null
+++ b/packages/components/modules/files/common/utils/uploadSource.ts
@@ -0,0 +1,20 @@
+import type { UploadInput, UploadSource } from '../types'
+
+export const isUploadSource = (input: UploadInput): input is UploadSource =>
+  typeof (input as UploadSource).readChunk === 'function'
+
+/**
+ * Normalise anything the uploader accepts into an `UploadSource`. A web `File` reads
+ * through `Blob.slice`, which is already lazy, so this adds no copy.
+ */
+export const toUploadSource = (input: UploadInput): UploadSource => {
+  if (isUploadSource(input)) return input
+
+  const file = input
+  return {
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    readChunk: async (start, end) => file.slice(start, end),
+  }
+}
diff --git a/packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/index.tsx b/packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/index.tsx
new file mode 100644
index 000000000..98d563bf3
--- /dev/null
+++ b/packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/index.tsx
@@ -0,0 +1,45 @@
+import type { FC } from 'react'
+
+import { Text } from '@baseapp-frontend/design-system/components/native/typographies'
+import { useNotification } from '@baseapp-frontend/utils'
+
+import { Linking } from 'react-native'
+import { useFragment } from 'react-relay'
+
+import { FileItemFragment } from '../../../common/graphql/fragments/FileItem'
+import { useFileDownloadLogic } from '../../../common/hooks/useFileDownloadLogic'
+import { getFileTypeLabel } from '../../../common/utils/formatters'
+import FileChip from '../../FileChip'
+import type { AttachedFileChipProps } from './types'
+
+/** Chip for a file already attached to its target; tapping opens it in the system viewer. */
+const AttachedFileChip: FC<AttachedFileChipProps> = ({
+  file: fileRef,
+  shouldUseBottomSheetSafeComponents = false,
+}) => {
+  const file = useFragment(FileItemFragment, fileRef)
+  const { sendToast } = useNotification()
+
+  const { handleDownload } = useFileDownloadLogic({
+    downloadHandler: (url) => Linking.openURL(url),
+    onError: () => sendToast('Could not open the file.', { type: 'error' }),
+  })
+
+  return (
+    <FileChip
+      name={file.fileName ?? 'File'}
+      contentType={file.fileContentType}
+      thumbnailUrl={file.thumbnail}
+      onPress={() => handleDownload(file.url, file.fileName ?? undefined)}
+      shouldUseBottomSheetSafeComponents={shouldUseBottomSheetSafeComponents}
+      subtitle={
+        <Text variant="caption" color="low">
+          {getFileTypeLabel(file.fileName, file.fileContentType)}
+        </Text>
+      }
+    />
+  )
+}
+
+export default AttachedFileChip
+export type { AttachedFileChipProps } from './types'
diff --git a/packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/types.ts b/packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/types.ts
new file mode 100644
index 000000000..1c245e72e
--- /dev/null
+++ b/packages/components/modules/files/native/AttachedFilesList/AttachedFileChip/types.ts
@@ -0,0 +1,6 @@
+import type { FileItem_file$key } from '../../../../../__generated__/FileItem_file.graphql'
+
+export interface AttachedFileChipProps {
+  file: FileItem_file$key
+  shouldUseBottomSheetSafeComponents?: boolean
+}
diff --git a/packages/components/modules/files/native/AttachedFilesList/index.tsx b/packages/components/modules/files/native/AttachedFilesList/index.tsx
new file mode 100644
index 000000000..2cd15dbe4
--- /dev/null
+++ b/packages/components/modules/files/native/AttachedFilesList/index.tsx
@@ -0,0 +1,45 @@
+import type { FC } from 'react'
+
+import { ScrollView } from 'react-native-gesture-handler'
+import { useFragment } from 'react-relay'
+
+import { FilesListFragment } from '../../common/graphql/queries/FilesList'
+import AttachedFileChip from './AttachedFileChip'
+import { createStyles } from './styles'
+import type { AttachedFilesListProps } from './types'
+
+/** Read-only row of the files attached to a target (e.g. a comment). */
+const AttachedFilesList: FC<AttachedFilesListProps> = ({
+  target: targetRef,
+  shouldUseBottomSheetSafeComponents = false,
+}) => {
+  const target = useFragment(FilesListFragment, targetRef)
+  const styles = createStyles()
+  const edges = target.files?.edges ?? []
+
+  if (!edges.length) {
+    return null
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={styles.list}
+      contentContainerStyle={styles.content}
+    >
+      {edges.map((edge) =>
+        edge?.node ? (
+          <AttachedFileChip
+            key={edge.node.id}
+            file={edge.node}
+            shouldUseBottomSheetSafeComponents={shouldUseBottomSheetSafeComponents}
+          />
+        ) : null,
+      )}
+    </ScrollView>
+  )
+}
+
+export default AttachedFilesList
+export type { AttachedFilesListProps } from './types'
diff --git a/packages/components/modules/files/native/AttachedFilesList/styles.ts b/packages/components/modules/files/native/AttachedFilesList/styles.ts
new file mode 100644
index 000000000..38c5af82a
--- /dev/null
+++ b/packages/components/modules/files/native/AttachedFilesList/styles.ts
@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native'
+
+export const createStyles = () =>
+  StyleSheet.create({
+    list: {
+      alignSelf: 'stretch',
+    },
+    content: {
+      gap: 8,
+      paddingTop: 6,
+    },
+  })
diff --git a/packages/components/modules/files/native/AttachedFilesList/types.ts b/packages/components/modules/files/native/AttachedFilesList/types.ts
new file mode 100644
index 000000000..ca49a8601
--- /dev/null
+++ b/packages/components/modules/files/native/AttachedFilesList/types.ts
@@ -0,0 +1,6 @@
+import type { FilesList_target$key } from '../../../../__generated__/FilesList_target.graphql'
+
+export interface AttachedFilesListProps {
+  target: FilesList_target$key
+  shouldUseBottomSheetSafeComponents?: boolean
+}
diff --git a/packages/components/modules/files/native/FileChip/index.tsx b/packages/components/modules/files/native/FileChip/index.tsx
new file mode 100644
index 000000000..a29a24cb1
--- /dev/null
+++ b/packages/components/modules/files/native/FileChip/index.tsx
@@ -0,0 +1,64 @@
+import type { FC } from 'react'
+
+import { AttachmentIcon, ImageIcon } from '@baseapp-frontend/design-system/components/native/icons'
+import { Image } from '@baseapp-frontend/design-system/components/native/images'
+import { Text } from '@baseapp-frontend/design-system/components/native/typographies'
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { TouchableOpacity } from '@gorhom/bottom-sheet'
+import { Pressable } from 'react-native'
+
+import { isImageFile } from '../../common/utils/formatters'
+import { THUMBNAIL_SIZE, createStyles } from './styles'
+import type { FileChipProps } from './types'
+
+/** Compact file tile shared by uploading and attached files (native `FileChip`). */
+const FileChip: FC<FileChipProps> = ({
+  name,
+  contentType,
+  thumbnailUrl,
+  subtitle,
+  action,
+  onPress,
+  shouldUseBottomSheetSafeComponents = false,
+}) => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+  const Touchable = shouldUseBottomSheetSafeComponents ? TouchableOpacity : Pressable
+
+  const renderThumbnail = () => {
+    if (thumbnailUrl) {
+      return <Image source={{ uri: thumbnailUrl }} width={THUMBNAIL_SIZE} height={THUMBNAIL_SIZE} />
+    }
+    return isImageFile(contentType) ? (
+      <ImageIcon width={20} height={20} color={theme.colors.object.low} />
+    ) : (
+      <AttachmentIcon width={20} height={20} color={theme.colors.object.low} />
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <Touchable
+        onPress={onPress}
+        disabled={!onPress}
+        accessibilityRole={onPress ? 'button' : undefined}
+        accessibilityLabel={name}
+        style={styles.pressArea}
+      >
+        <View style={styles.thumbnail}>{renderThumbnail()}</View>
+        <View style={styles.body}>
+          <Text variant="caption" color="high" numberOfLines={1}>
+            {name}
+          </Text>
+          {subtitle}
+        </View>
+      </Touchable>
+      {action}
+    </View>
+  )
+}
+
+export default FileChip
+export type { FileChipProps } from './types'
diff --git a/packages/components/modules/files/native/FileChip/styles.ts b/packages/components/modules/files/native/FileChip/styles.ts
new file mode 100644
index 000000000..a5ee0091a
--- /dev/null
+++ b/packages/components/modules/files/native/FileChip/styles.ts
@@ -0,0 +1,44 @@
+import { Theme } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const THUMBNAIL_SIZE = 36
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      width: 200,
+      paddingVertical: 6,
+      paddingLeft: 6,
+      paddingRight: 4,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.surface.border,
+      backgroundColor: theme.colors.surface.default,
+    },
+    pressArea: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      flex: 1,
+      minWidth: 0,
+    },
+    thumbnail: {
+      width: THUMBNAIL_SIZE,
+      height: THUMBNAIL_SIZE,
+      borderRadius: 6,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.surface.active,
+      overflow: 'hidden',
+    },
+    body: {
+      flex: 1,
+      minWidth: 0,
+      gap: 2,
+      backgroundColor: 'transparent',
+    },
+  })
diff --git a/packages/components/modules/files/native/FileChip/types.ts b/packages/components/modules/files/native/FileChip/types.ts
new file mode 100644
index 000000000..cd8564f70
--- /dev/null
+++ b/packages/components/modules/files/native/FileChip/types.ts
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+
+export interface FileChipProps {
+  name: string
+  contentType?: string | null
+  thumbnailUrl?: string | null
+  /** Caption under the name (size, type, error), or a progress bar while uploading. */
+  subtitle?: ReactNode
+  /** Trailing control, e.g. remove. */
+  action?: ReactNode
+  onPress?: () => void
+  /** Use gorhom's touchables inside a bottom sheet, where Pressable loses its gestures. */
+  shouldUseBottomSheetSafeComponents?: boolean
+}
diff --git a/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/index.tsx b/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/index.tsx
new file mode 100644
index 000000000..13268a621
--- /dev/null
+++ b/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/index.tsx
@@ -0,0 +1,88 @@
+import type { FC } from 'react'
+
+import { CloseIcon } from '@baseapp-frontend/design-system/components/native/icons'
+import { Text } from '@baseapp-frontend/design-system/components/native/typographies'
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { TouchableOpacity } from '@gorhom/bottom-sheet'
+import { Pressable } from 'react-native'
+
+import { FileUploadStatus } from '../../../common/constants'
+import { useFileUploadStore } from '../../../common/context/FileUploadProvider'
+import { useChunkedUpload } from '../../../common/hooks/useChunkedUpload'
+import { formatFileSize } from '../../../common/utils/formatters'
+import { getUploadItemActions, getUploadPercent } from '../../../common/utils/uploadItemState'
+import FileChip from '../../FileChip'
+import { createStyles } from './styles'
+import type { UploadingFileChipProps } from './types'
+
+/**
+ * Native chip for an in-progress upload. There is no pause control on mobile: the close
+ * button cancels a running upload outright, and a failed one retries on tap.
+ */
+const UploadingFileChip: FC<UploadingFileChipProps> = ({
+  fileProgress,
+  allowRemove = true,
+  allowRetry = true,
+  shouldUseBottomSheetSafeComponents = false,
+}) => {
+  const theme = useTheme()
+  const styles = createStyles(theme, getUploadPercent(fileProgress))
+  const removeFile = useFileUploadStore((state) => state.removeFile)
+  const { retryUpload } = useChunkedUpload()
+  const Touchable = shouldUseBottomSheetSafeComponents ? TouchableOpacity : Pressable
+
+  const {
+    canPause: isUploading,
+    canRetry,
+    canRemove,
+  } = getUploadItemActions(fileProgress.status, { allowRemove, allowRetry })
+
+  const renderSubtitle = () => {
+    if (fileProgress.error) {
+      return (
+        <Text variant="caption" style={styles.error} numberOfLines={1}>
+          {canRetry ? 'Failed. Tap to retry' : fileProgress.error}
+        </Text>
+      )
+    }
+    if (fileProgress.status === FileUploadStatus.COMPLETED) {
+      return (
+        <Text variant="caption" color="low">
+          {formatFileSize(fileProgress.fileSize)}
+        </Text>
+      )
+    }
+    return (
+      <View style={styles.track}>
+        <View style={styles.bar} />
+      </View>
+    )
+  }
+
+  return (
+    <FileChip
+      name={fileProgress.fileName}
+      contentType={fileProgress.file.type}
+      subtitle={renderSubtitle()}
+      onPress={canRetry ? () => retryUpload(fileProgress.id) : undefined}
+      shouldUseBottomSheetSafeComponents={shouldUseBottomSheetSafeComponents}
+      action={
+        allowRemove && (canRemove || isUploading) ? (
+          <Touchable
+            onPress={() => removeFile(fileProgress.id)}
+            accessibilityRole="button"
+            accessibilityLabel={isUploading ? 'Cancel upload' : 'Remove file'}
+            style={styles.action}
+          >
+            <CloseIcon width={18} height={18} color={theme.colors.object.low} />
+          </Touchable>
+        ) : null
+      }
+    />
+  )
+}
+
+export default UploadingFileChip
+export type { UploadingFileChipProps } from './types'
diff --git a/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/styles.ts b/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/styles.ts
new file mode 100644
index 000000000..5021cbf40
--- /dev/null
+++ b/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/styles.ts
@@ -0,0 +1,25 @@
+import { Theme } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const createStyles = (theme: Theme, percent: number) =>
+  StyleSheet.create({
+    track: {
+      height: 4,
+      marginTop: 4,
+      borderRadius: 2,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.surface.active,
+    },
+    bar: {
+      height: 4,
+      width: `${percent}%`,
+      backgroundColor: theme.colors.primary.main,
+    },
+    error: {
+      color: theme.colors.error.main,
+    },
+    action: {
+      padding: 4,
+    },
+  })
diff --git a/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/types.ts b/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/types.ts
new file mode 100644
index 000000000..fe8f8bf50
--- /dev/null
+++ b/packages/components/modules/files/native/UploadingFilesList/UploadingFileChip/types.ts
@@ -0,0 +1,8 @@
+import type { FileUploadProgress } from '../../../common/types'
+
+export interface UploadingFileChipProps {
+  fileProgress: FileUploadProgress
+  allowRemove?: boolean
+  allowRetry?: boolean
+  shouldUseBottomSheetSafeComponents?: boolean
+}
diff --git a/packages/components/modules/files/native/UploadingFilesList/index.tsx b/packages/components/modules/files/native/UploadingFilesList/index.tsx
new file mode 100644
index 000000000..27acae752
--- /dev/null
+++ b/packages/components/modules/files/native/UploadingFilesList/index.tsx
@@ -0,0 +1,48 @@
+import type { FC } from 'react'
+
+import { ScrollView } from 'react-native-gesture-handler'
+
+import { useScopedUploads } from '../../common/context/useScopedUploads'
+import UploadingFileChip from './UploadingFileChip'
+import { createStyles } from './styles'
+import type { UploadingFilesListProps } from './types'
+
+/**
+ * Horizontal row of one scope's in-progress uploads, for composers that upload before
+ * their target exists (native counterpart of the web `UploadingFilesList`).
+ */
+const UploadingFilesList: FC<UploadingFilesListProps> = ({
+  scope,
+  allowRemove = true,
+  allowRetry = true,
+  shouldUseBottomSheetSafeComponents = false,
+}) => {
+  const uploadingFiles = useScopedUploads(scope)
+  const styles = createStyles()
+
+  if (!uploadingFiles.length) {
+    return null
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={styles.content}
+    >
+      {uploadingFiles.map((file) => (
+        <UploadingFileChip
+          key={file.id}
+          fileProgress={file}
+          allowRemove={allowRemove}
+          allowRetry={allowRetry}
+          shouldUseBottomSheetSafeComponents={shouldUseBottomSheetSafeComponents}
+        />
+      ))}
+    </ScrollView>
+  )
+}
+
+export default UploadingFilesList
+export type { UploadingFilesListProps } from './types'
diff --git a/packages/components/modules/files/native/UploadingFilesList/styles.ts b/packages/components/modules/files/native/UploadingFilesList/styles.ts
new file mode 100644
index 000000000..7bd54edec
--- /dev/null
+++ b/packages/components/modules/files/native/UploadingFilesList/styles.ts
@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native'
+
+export const createStyles = () =>
+  StyleSheet.create({
+    content: {
+      gap: 8,
+      paddingBottom: 8,
+    },
+  })
diff --git a/packages/components/modules/files/native/UploadingFilesList/types.ts b/packages/components/modules/files/native/UploadingFilesList/types.ts
new file mode 100644
index 000000000..b66580331
--- /dev/null
+++ b/packages/components/modules/files/native/UploadingFilesList/types.ts
@@ -0,0 +1,7 @@
+export interface UploadingFilesListProps {
+  /** Upload-store scope to show (e.g. a composer's deferred-attachments scope). */
+  scope?: string
+  allowRemove?: boolean
+  allowRetry?: boolean
+  shouldUseBottomSheetSafeComponents?: boolean
+}
diff --git a/packages/components/modules/files/native/hooks/useNativeFilePicker/__tests__/useNativeFilePicker.test.ts b/packages/components/modules/files/native/hooks/useNativeFilePicker/__tests__/useNativeFilePicker.test.ts
new file mode 100644
index 000000000..8a896de1d
--- /dev/null
+++ b/packages/components/modules/files/native/hooks/useNativeFilePicker/__tests__/useNativeFilePicker.test.ts
@@ -0,0 +1,127 @@
+import { act, renderHook } from '@testing-library/react'
+import { vi } from 'vitest'
+
+import { useNativeFilePicker } from '../index'
+
+const sendToast = vi.fn()
+vi.mock('@baseapp-frontend/utils', () => ({ useNotification: () => ({ sendToast }) }))
+
+const launchImageLibraryAsync = vi.fn()
+vi.mock('expo-image-picker', () => ({
+  launchImageLibraryAsync: (...args: unknown[]) => launchImageLibraryAsync(...args),
+  UIImagePickerPreferredAssetRepresentationMode: { Compatible: 'compatible' },
+}))
+
+const pickFileAsync = vi.fn()
+vi.mock('expo-file-system', () => ({
+  File: class {
+    static pickFileAsync = (...args: unknown[]) => pickFileAsync(...args)
+  },
+}))
+
+const createNativeUploadSource = vi.fn()
+vi.mock('../../../utils/createNativeUploadSource', () => ({
+  createNativeUploadSource: (descriptor: unknown) => createNativeUploadSource(descriptor),
+}))
+
+const LIMITS = {
+  maxFiles: 5,
+  maxFileSize: 1000,
+  acceptedFileTypes: { 'image/*': ['.png', '.jpg'], 'application/pdf': ['.pdf'] },
+}
+
+const sourceFor = ({ name, size = 10 }: { name: string; size?: number }) => ({
+  name,
+  size,
+  type: '',
+  readChunk: vi.fn(),
+  dispose: vi.fn(),
+})
+
+const asset = (fileName: string, fileSize = 10, mimeType = 'image/jpeg') => ({
+  uri: `file:///cache/${fileName}`,
+  fileName,
+  fileSize,
+  mimeType,
+})
+
+const setup = () => {
+  const onFilesSelected = vi.fn()
+  const { result } = renderHook(() => useNativeFilePicker({ onFilesSelected, ...LIMITS }))
+  return { onFilesSelected, result }
+}
+
+describe('useNativeFilePicker', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    createNativeUploadSource.mockImplementation(async (descriptor) => sourceFor(descriptor))
+  })
+
+  it('hands the accepted photos to the uploader and explains the rest', async () => {
+    launchImageLibraryAsync.mockResolvedValue({
+      canceled: false,
+      assets: [asset('a.jpg'), asset('huge.jpg', 5000)],
+    })
+    const { onFilesSelected, result } = setup()
+
+    await act(() => result.current.pickImages())
+
+    expect(launchImageLibraryAsync).toHaveBeenCalledWith(
+      expect.objectContaining({ allowsMultipleSelection: true, selectionLimit: 5 }),
+    )
+    expect(onFilesSelected).toHaveBeenCalledWith([expect.objectContaining({ name: 'a.jpg' })])
+    expect(createNativeUploadSource).toHaveBeenCalledTimes(1)
+    expect(sendToast).toHaveBeenCalledWith('1 file was not added (over 1000 B).', {
+      type: 'warning',
+    })
+  })
+
+  it('does nothing when the photo picker is cancelled', async () => {
+    launchImageLibraryAsync.mockResolvedValue({ canceled: true, assets: null })
+    const { onFilesSelected, result } = setup()
+
+    await act(() => result.current.pickImages())
+
+    expect(onFilesSelected).not.toHaveBeenCalled()
+    expect(sendToast).not.toHaveBeenCalled()
+  })
+
+  it('toasts when the photo library cannot open', async () => {
+    launchImageLibraryAsync.mockRejectedValue(new Error('no activity'))
+    const { result } = setup()
+
+    await act(() => result.current.pickImages())
+
+    expect(sendToast).toHaveBeenCalledWith('Could not open the photo library.', { type: 'error' })
+  })
+
+  it('filters the document picker to the one non-image type and stays quiet on cancel', async () => {
+    pickFileAsync.mockRejectedValue(new Error('File picking was cancelled by the user'))
+    const { onFilesSelected, result } = setup()
+
+    await act(() => result.current.pickDocuments())
+
+    expect(pickFileAsync).toHaveBeenCalledWith(undefined, 'application/pdf')
+    expect(onFilesSelected).not.toHaveBeenCalled()
+    expect(sendToast).not.toHaveBeenCalled()
+  })
+
+  it('keeps the readable files when one cannot be prepared, and drops empty ones', async () => {
+    launchImageLibraryAsync.mockResolvedValue({
+      canceled: false,
+      assets: [asset('ok.jpg'), asset('broken.jpg'), asset('empty.jpg')],
+    })
+    const empty = sourceFor({ name: 'empty.jpg', size: 0 })
+    createNativeUploadSource.mockImplementation(async ({ name }) => {
+      if (name === 'broken.jpg') throw new Error('copy failed')
+      return name === 'empty.jpg' ? empty : sourceFor({ name })
+    })
+    const { onFilesSelected, result } = setup()
+
+    await act(() => result.current.pickImages())
+
+    expect(onFilesSelected).toHaveBeenCalledWith([expect.objectContaining({ name: 'ok.jpg' })])
+    expect(empty.dispose).toHaveBeenCalled()
+    expect(sendToast).toHaveBeenCalledWith('Some files could not be read.', { type: 'error' })
+  })
+})
diff --git a/packages/components/modules/files/native/hooks/useNativeFilePicker/index.ts b/packages/components/modules/files/native/hooks/useNativeFilePicker/index.ts
new file mode 100644
index 000000000..692612ffe
--- /dev/null
+++ b/packages/components/modules/files/native/hooks/useNativeFilePicker/index.ts
@@ -0,0 +1,135 @@
+import { useCallback, useState } from 'react'
+
+import { useNotification } from '@baseapp-frontend/utils'
+
+import { File } from 'expo-file-system'
+import * as ImagePicker from 'expo-image-picker'
+
+import type { Accept } from '../../../common/types'
+import {
+  describeRejectedFiles,
+  filterSelectedFiles,
+} from '../../../common/utils/filterSelectedFiles'
+import {
+  type NativeFileDescriptor,
+  createNativeUploadSource,
+} from '../../utils/createNativeUploadSource'
+import type { UseNativeFilePickerParams, UseNativeFilePickerReturn } from './types'
+
+const isPickerCancel = (error: unknown) => error instanceof Error && /cancel/i.test(error.message)
+
+// The document picker filters by one MIME type; narrow to it only when exactly one
+// non-image type is accepted (images go through the photo library instead).
+const getDocumentMimeType = (acceptedFileTypes?: Accept) => {
+  const documentTypes = Object.keys(acceptedFileTypes ?? {}).filter(
+    (mime) => !mime.startsWith('image/'),
+  )
+  return documentTypes.length === 1 ? documentTypes[0] : undefined
+}
+
+/**
+ * Native counterpart of `useFileSelect`: opens the photo library or the document
+ * picker, applies the same shared selection rules, and hands lazy `UploadSource`s to
+ * the shared upload pipeline.
+ */
+export const useNativeFilePicker = ({
+  onFilesSelected,
+  maxFiles,
+  maxFileSize,
+  acceptedFileTypes,
+  disabled = false,
+}: UseNativeFilePickerParams): UseNativeFilePickerReturn => {
+  const { sendToast } = useNotification()
+  const [isPreparing, setIsPreparing] = useState(false)
+
+  const deliver = useCallback(
+    async (picked: NativeFileDescriptor[]) => {
+      const limits = { maxFiles, maxFileSize, acceptedFileTypes }
+      const candidates = picked.map((descriptor) => ({
+        ...descriptor,
+        name: descriptor.name || new File(descriptor.uri).name,
+        type: descriptor.type || '',
+        size: descriptor.size ?? new File(descriptor.uri).size,
+      }))
+      const { accepted, rejected } = filterSelectedFiles(candidates, limits)
+
+      const message = describeRejectedFiles(rejected, limits)
+      if (message) sendToast(message, { type: 'warning' })
+      if (!accepted.length) return
+
+      setIsPreparing(true)
+      try {
+        // allSettled: one unreadable file must not orphan the copies the others made.
+        const settled = await Promise.allSettled(accepted.map(createNativeUploadSource))
+        const sources = settled.flatMap((result) =>
+          result.status === 'fulfilled' ? [result.value] : [],
+        )
+        // An empty file has nothing to upload (S3 needs at least one part).
+        const readable = sources.filter((source) => source.size > 0)
+        sources.filter((source) => source.size === 0).forEach((source) => source.dispose?.())
+
+        if (readable.length < accepted.length) {
+          sendToast(
+            accepted.length === 1
+              ? 'Could not read the selected file.'
+              : 'Some files could not be read.',
+            { type: 'error' },
+          )
+        }
+        if (readable.length) onFilesSelected(readable)
+      } finally {
+        setIsPreparing(false)
+      }
+    },
+    [acceptedFileTypes, maxFileSize, maxFiles, onFilesSelected, sendToast],
+  )
+
+  const pickImages = useCallback(async () => {
+    if (disabled) return
+    let result: ImagePicker.ImagePickerResult
+    try {
+      // The system photo picker needs no library permission (only iOS 10 did).
+      result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: 'images',
+        allowsMultipleSelection: (maxFiles ?? 2) > 1,
+        selectionLimit: maxFiles,
+        quality: 1,
+        // HEIC -> JPEG, so web viewers and backend thumbnails can read it.
+        preferredAssetRepresentationMode:
+          ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Compatible,
+      })
+    } catch {
+      sendToast('Could not open the photo library.', { type: 'error' })
+      return
+    }
+    if (result.canceled) return
+
+    await deliver(
+      result.assets.map((asset) => ({
+        uri: asset.uri,
+        name: asset.fileName,
+        type: asset.mimeType,
+        size: asset.fileSize,
+      })),
+    )
+  }, [deliver, disabled, maxFiles, sendToast])
+
+  const pickDocuments = useCallback(async () => {
+    if (disabled) return
+    try {
+      const picked = await File.pickFileAsync(undefined, getDocumentMimeType(acceptedFileTypes))
+      const files = Array.isArray(picked) ? picked : [picked]
+      await deliver(
+        files.map((file) => ({ uri: file.uri, name: file.name, type: file.type, size: file.size })),
+      )
+    } catch (error) {
+      if (!isPickerCancel(error)) {
+        sendToast('Could not open the file picker.', { type: 'error' })
+      }
+    }
+  }, [acceptedFileTypes, deliver, disabled, sendToast])
+
+  return { pickImages, pickDocuments, isPreparing }
+}
+
+export type { UseNativeFilePickerParams, UseNativeFilePickerReturn } from './types'
diff --git a/packages/components/modules/files/native/hooks/useNativeFilePicker/types.ts b/packages/components/modules/files/native/hooks/useNativeFilePicker/types.ts
new file mode 100644
index 000000000..cb3b0d63a
--- /dev/null
+++ b/packages/components/modules/files/native/hooks/useNativeFilePicker/types.ts
@@ -0,0 +1,16 @@
+import type { UploadSource } from '../../../common/types'
+import type { FileSelectionLimits } from '../../../common/utils/filterSelectedFiles'
+
+export interface UseNativeFilePickerParams extends FileSelectionLimits {
+  onFilesSelected: (files: UploadSource[]) => void
+  disabled?: boolean
+}
+
+export interface UseNativeFilePickerReturn {
+  /** Opens the photo library (multi-select). */
+  pickImages: () => Promise<void>
+  /** Opens the system document picker. */
+  pickDocuments: () => Promise<void>
+  /** True while a picked file is being prepared for upload. */
+  isPreparing: boolean
+}
diff --git a/packages/components/modules/files/native/index.ts b/packages/components/modules/files/native/index.ts
index 887859e73..dc37b26ea 100644
--- a/packages/components/modules/files/native/index.ts
+++ b/packages/components/modules/files/native/index.ts
@@ -1,2 +1,16 @@
-// Placeholder for React Native implementation
-// TODO: Implement React Native file upload components
+// exports native files components
+
+export { default as FileChip } from './FileChip'
+export type * from './FileChip/types'
+
+export { default as UploadingFilesList } from './UploadingFilesList'
+export type * from './UploadingFilesList/types'
+
+export { default as AttachedFilesList } from './AttachedFilesList'
+export type * from './AttachedFilesList/types'
+
+export { useNativeFilePicker } from './hooks/useNativeFilePicker'
+export type * from './hooks/useNativeFilePicker/types'
+
+export { createNativeUploadSource } from './utils/createNativeUploadSource'
+export type { NativeFileDescriptor } from './utils/createNativeUploadSource'
diff --git a/packages/components/modules/files/native/utils/__tests__/createNativeUploadSource.test.ts b/packages/components/modules/files/native/utils/__tests__/createNativeUploadSource.test.ts
new file mode 100644
index 000000000..f4f299f6f
--- /dev/null
+++ b/packages/components/modules/files/native/utils/__tests__/createNativeUploadSource.test.ts
@@ -0,0 +1,119 @@
+import { vi } from 'vitest'
+
+import { createNativeUploadSource } from '../createNativeUploadSource'
+
+const BYTES = Uint8Array.from({ length: 10 }, (_, i) => i)
+
+const handles: { offset: number | null; closed: boolean }[] = []
+const deleted: string[] = []
+
+vi.mock('expo-file-system', () => {
+  class File {
+    uri: string
+
+    constructor(...parts: (string | { uri: string })[]) {
+      this.uri = parts.map((part) => (typeof part === 'string' ? part : part.uri)).join('/')
+    }
+
+    get name() {
+      return this.uri.split('/').pop() ?? ''
+    }
+
+    get type() {
+      return 'application/pdf'
+    }
+
+    get size() {
+      return BYTES.length
+    }
+
+    get exists() {
+      return true
+    }
+
+    delete() {
+      deleted.push(this.uri)
+    }
+
+    open() {
+      if (this.uri.startsWith('content://')) throw new Error('content URIs cannot be opened')
+      const handle = {
+        offset: null as number | null,
+        closed: false,
+        readBytes: (length: number) =>
+          BYTES.slice(handle.offset ?? 0, (handle.offset ?? 0) + length),
+        close: () => {
+          handle.closed = true
+        },
+      }
+      handles.push(handle)
+      return handle
+    }
+  }
+  return { File, Paths: { cache: { uri: 'file:///cache' } } }
+})
+
+const copyAsync = vi.fn(async (_options: { from: string; to: string }) => undefined)
+vi.mock('expo-file-system/legacy', () => ({
+  copyAsync: (options: { from: string; to: string }) => copyAsync(options),
+}))
+
+describe('createNativeUploadSource', () => {
+  beforeEach(() => {
+    handles.length = 0
+    deleted.length = 0
+    copyAsync.mockClear()
+  })
+
+  it('reads exactly the requested range and closes the handle', async () => {
+    const source = await createNativeUploadSource({ uri: 'file:///tmp/doc.pdf' })
+
+    expect(source).toMatchObject({ name: 'doc.pdf', size: 10, type: 'application/pdf' })
+    expect(Array.from((await source.readChunk(3, 7)) as Uint8Array)).toEqual([3, 4, 5, 6])
+    expect(handles).toHaveLength(1)
+    expect(handles[0]!.closed).toBe(true)
+    expect(copyAsync).not.toHaveBeenCalled()
+  })
+
+  it('prefers the picker metadata for name and type', async () => {
+    const source = await createNativeUploadSource({
+      uri: 'file:///tmp/IMG_0001',
+      name: 'holiday.jpg',
+      type: 'image/jpeg',
+    })
+
+    expect(source).toMatchObject({ name: 'holiday.jpg', type: 'image/jpeg' })
+  })
+
+  it('copies a content:// URI to the cache before reading from it', async () => {
+    const source = await createNativeUploadSource({
+      uri: 'content://com.android.providers/document/42',
+      name: 'report.pdf',
+    })
+
+    expect(copyAsync).toHaveBeenCalledWith({
+      from: 'content://com.android.providers/document/42',
+      to: expect.stringMatching(/^file:\/\/\/cache\/upload-/),
+    })
+    expect(source.name).toBe('report.pdf')
+    expect(Array.from((await source.readChunk(0, 2)) as Uint8Array)).toEqual([0, 1])
+  })
+
+  it('deletes only the cache copy it made when disposed', async () => {
+    const picked = await createNativeUploadSource({ uri: 'file:///tmp/doc.pdf' })
+    const copied = await createNativeUploadSource({ uri: 'content://provider/document/7' })
+
+    expect(picked.dispose).toBeUndefined()
+    copied.dispose?.()
+    expect(deleted).toEqual([expect.stringMatching(/^file:\/\/\/cache\/upload-/)])
+  })
+
+  it('removes a partial copy when the content copy fails', async () => {
+    copyAsync.mockRejectedValueOnce(new Error('permission revoked'))
+
+    await expect(
+      createNativeUploadSource({ uri: 'content://provider/document/8' }),
+    ).rejects.toThrow('permission revoked')
+    expect(deleted).toHaveLength(1)
+  })
+})
diff --git a/packages/components/modules/files/native/utils/createNativeUploadSource.ts b/packages/components/modules/files/native/utils/createNativeUploadSource.ts
new file mode 100644
index 000000000..4b6dbf325
--- /dev/null
+++ b/packages/components/modules/files/native/utils/createNativeUploadSource.ts
@@ -0,0 +1,64 @@
+import { File, Paths } from 'expo-file-system'
+import { copyAsync } from 'expo-file-system/legacy'
+
+import type { UploadSource } from '../../common/types'
+import { nextLocalId } from '../../common/utils/localId'
+
+export interface NativeFileDescriptor {
+  uri: string
+  name?: string | null
+  type?: string | null
+  size?: number | null
+}
+
+const deleteQuietly = (file: File) => {
+  try {
+    if (file.exists) file.delete()
+  } catch {
+    // Cache cleanup is best-effort; the OS trims the cache directory anyway.
+  }
+}
+
+// Android pickers hand back content:// URIs, which FileHandle cannot open. The legacy
+// copy streams them through the ContentResolver into a plain cache file we then own.
+const toReadableFile = async (uri: string): Promise<{ file: File; isCopy: boolean }> => {
+  if (!uri.startsWith('content://')) return { file: new File(uri), isCopy: false }
+  const copy = new File(Paths.cache, `upload-${nextLocalId()}`)
+  try {
+    await copyAsync({ from: uri, to: copy.uri })
+  } catch (error) {
+    deleteQuietly(copy)
+    throw error
+  }
+  return { file: copy, isCopy: true }
+}
+
+/**
+ * Builds an `UploadSource` over a picked file. Each chunk is read on demand through a
+ * short-lived `FileHandle`, so only the chunks currently uploading are held in memory.
+ */
+export const createNativeUploadSource = async ({
+  uri,
+  name,
+  type,
+}: NativeFileDescriptor): Promise<UploadSource> => {
+  const original = new File(uri)
+  const { file, isCopy } = await toReadableFile(uri)
+
+  return {
+    name: name || original.name,
+    // The bytes on disk, not the picker's metadata: chunks are cut from this file.
+    size: file.size,
+    type: type || original.type || 'application/octet-stream',
+    readChunk: async (start, end) => {
+      const handle = file.open()
+      try {
+        handle.offset = start
+        return handle.readBytes(end - start)
+      } finally {
+        handle.close()
+      }
+    },
+    dispose: isCopy ? () => deleteQuietly(file) : undefined,
+  }
+}
diff --git a/packages/components/modules/files/web/AttachedFileItem/index.tsx b/packages/components/modules/files/web/AttachedFileItem/index.tsx
index 745f76f37..da6fb5005 100644
--- a/packages/components/modules/files/web/AttachedFileItem/index.tsx
+++ b/packages/components/modules/files/web/AttachedFileItem/index.tsx
@@ -16,16 +16,17 @@ import { useFragment } from 'react-relay'
 import { FileItemFragment } from '../../common/graphql/fragments/FileItem'
 import { useFileDeleteLogic } from '../../common/hooks/useFileDeleteLogic'
 import { useFileDownloadLogic } from '../../common/hooks/useFileDownloadLogic'
-import { formatDate, formatFileSize, getFileType, isImageFile } from '../../common/utils/formatters'
+import {
+  formatDate,
+  formatFileSize,
+  getFileType,
+  getFileTypeLabel,
+  isImageFile,
+} from '../../common/utils/formatters'
 import FileChip from '../FileChip'
 import FileThumbnail from '../FileThumbnail'
 import type { AttachedFileItemProps } from './types'
 
-const getTypeLabel = (fileName?: string | null, contentType?: string | null): string => {
-  const ext = fileName && fileName.includes('.') ? fileName.split('.').pop() : undefined
-  return (ext || getFileType(contentType) || 'file').toUpperCase()
-}
-
 const AttachedFileItem: FC<AttachedFileItemProps> = ({
   file: fileRef,
   targetObjectId,
@@ -74,7 +75,7 @@ const AttachedFileItem: FC<AttachedFileItemProps> = ({
         name={file.fileName}
         subtitle={
           <Typography variant="caption" color="text.secondary">
-            {getTypeLabel(file.fileName, file.fileContentType)}
+            {getFileTypeLabel(file.fileName, file.fileContentType)}
           </Typography>
         }
         action={
diff --git a/packages/components/modules/files/web/FileUploadList/UploadingFileItem/index.tsx b/packages/components/modules/files/web/FileUploadList/UploadingFileItem/index.tsx
index 27148db5f..deec77f4e 100644
--- a/packages/components/modules/files/web/FileUploadList/UploadingFileItem/index.tsx
+++ b/packages/components/modules/files/web/FileUploadList/UploadingFileItem/index.tsx
@@ -23,7 +23,8 @@ import {
 import { FileUploadStatus } from '../../../common/constants'
 import { useFileUploadStore } from '../../../common/context/FileUploadProvider'
 import { useChunkedUpload } from '../../../common/hooks/useChunkedUpload'
-import { calculateProgress, formatFileSize } from '../../../common/utils/formatters'
+import { formatFileSize } from '../../../common/utils/formatters'
+import { getUploadItemActions, getUploadPercent } from '../../../common/utils/uploadItemState'
 import FileChip from '../../FileChip'
 import FileThumbnail from '../../FileThumbnail'
 import FileProgress from './FileProgress'
@@ -39,10 +40,7 @@ const UploadingFileItem: FC<UploadingFileItemProps> = ({
   const pauseFile = useFileUploadStore((state) => state.pauseFile)
   const { resumeUpload, retryUpload } = useChunkedUpload()
 
-  const getProgress = (): number => {
-    if (fileProgress.status === FileUploadStatus.COMPLETED) return 100
-    return calculateProgress(fileProgress.uploadedBytes, fileProgress.fileSize)
-  }
+  const getProgress = (): number => getUploadPercent(fileProgress)
 
   const handleRemove = () => {
     removeFile(fileProgress.id)
@@ -65,22 +63,10 @@ const UploadingFileItem: FC<UploadingFileItemProps> = ({
 
   const isCompleted = fileProgress.status === FileUploadStatus.COMPLETED
 
-  const canRemove =
-    allowRemove &&
-    [
-      FileUploadStatus.PENDING,
-      FileUploadStatus.FAILED,
-      FileUploadStatus.PAUSED,
-      FileUploadStatus.ABORTED,
-      // Uploaded but not yet attached (e.g. a new comment) — let the user undo it.
-      FileUploadStatus.COMPLETED,
-    ].includes(fileProgress.status)
-
-  const canRetry = allowRetry && fileProgress.status === FileUploadStatus.FAILED
-
-  const canPause = fileProgress.status === FileUploadStatus.UPLOADING
-
-  const canResume = fileProgress.status === FileUploadStatus.PAUSED
+  const { canPause, canResume, canRetry, canRemove } = getUploadItemActions(fileProgress.status, {
+    allowRemove,
+    allowRetry,
+  })
 
   // While uploading we show a generic type icon rather than decoding the source
   // file into a preview (a full-res image would decode into a large bitmap just
diff --git a/packages/design-system/components/native/icons/AttachmentIcon/index.tsx b/packages/design-system/components/native/icons/AttachmentIcon/index.tsx
new file mode 100644
index 000000000..42d9a16a3
--- /dev/null
+++ b/packages/design-system/components/native/icons/AttachmentIcon/index.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react'
+
+import Svg, { Path } from 'react-native-svg'
+
+import { useTheme } from '../../../../providers/native'
+import { SvgIconProps } from '../types'
+
+const AttachmentIcon: FC<SvgIconProps> = ({
+  isActive = false,
+  color,
+  width = '18',
+  height = '18',
+  ...props
+}) => {
+  const { colors } = useTheme()
+
+  const defaultColor = color ?? colors.object.high
+  const svgColor = isActive ? colors.primary.high : defaultColor
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="-2 -1 18 18"
+      color={svgColor}
+      fill="none"
+      {...props}
+    >
+      <Path
+        d="M4.8248 15.3499C3.6998 15.3499 2.6498 14.8999 1.8248 14.0749C0.999805 13.2499 0.549805 12.1999 0.549805 11.0749C0.549805 9.94985 0.999805 8.89985 1.8248 8.07485L8.2748 1.62485C8.8748 1.02485 9.62481 0.724854 10.4498 0.724854C11.2748 0.724854 12.0248 1.02485 12.6248 1.62485C13.2248 2.22485 13.5248 2.97485 13.5248 3.79985C13.5248 4.62485 13.2248 5.37485 12.6248 5.97485L6.1748 12.4249C5.4998 13.0999 4.2998 13.0999 3.6248 12.4249C2.9498 11.7499 2.9498 10.5499 3.6248 9.87485L7.7498 5.74985C7.9748 5.52485 8.34981 5.52485 8.57481 5.74985C8.79981 5.97485 8.79981 6.34985 8.57481 6.57485L4.4498 10.6999C4.2248 10.9249 4.2248 11.3749 4.4498 11.6749C4.6748 11.8999 5.1248 11.8999 5.4248 11.6749L11.8748 5.22485C12.2498 4.84985 12.3998 4.39985 12.3998 3.87485C12.3998 3.34985 12.0998 2.74985 11.7248 2.37485C10.9748 1.62485 9.7748 1.69985 9.0248 2.37485L2.5748 8.82485C1.9748 9.42485 1.6748 10.1749 1.6748 11.0749C1.6748 11.9749 1.9748 12.7249 2.5748 13.3249C3.1748 13.9249 3.9248 14.2249 4.8248 14.2249C5.7248 14.2249 6.47481 13.9249 7.07481 13.3249L11.7998 8.59985C12.0248 8.37485 12.3998 8.37485 12.6248 8.59985C12.8498 8.82485 12.8498 9.19985 12.6248 9.42485L7.8998 14.1499C6.9998 14.8999 5.9498 15.3499 4.8248 15.3499Z"
+        fill="currentColor"
+      />
+    </Svg>
+  )
+}
+
+export default AttachmentIcon
diff --git a/packages/design-system/components/native/icons/index.ts b/packages/design-system/components/native/icons/index.ts
index b8984e886..a76d9d43f 100644
--- a/packages/design-system/components/native/icons/index.ts
+++ b/packages/design-system/components/native/icons/index.ts
@@ -1,6 +1,7 @@
 export { default as ActivityLogIcon } from './ActivityLogIcon'
 export { default as AlertTriangleIcon } from './AlertTriangleIcon'
 export { default as ArchiveIcon } from './ArchiveIcon'
+export { default as AttachmentIcon } from './AttachmentIcon'
 export { default as AuthenticationIcon } from './AuthenticationIcon'
 export { default as BellIcon } from './BellIcon'
 export { default as BiometricsIcon } from './BiometricsIcon'