feat(expo): pick attachments from Photos / Files / Clipboard

Replaces the single document-picker entry point with an action-sheet
style modal so users can choose: Photos library (expo-image-picker),
Files (expo-document-picker, the existing path), or Paste from
Clipboard (expo-clipboard + expo-file-system to write base64 to cache
dir, then file:// URI through the same RN-FormData shorthand the other
pickers use).

Two crash fixes in the same change:

- sheet.tsx was synthesising File objects via
  `new File([new Uint8Array(0)], …)` to satisfy validateAttachments'
  File[] signature. RN's BlobManager rejects ArrayBuffer/ArrayBufferView
  parts at runtime, so this threw "Creating blobs from 'ArrayBuffer'
  and 'ArrayBufferView' are not supported". Modern TypeScript also
  rejects Uint8Array<ArrayBufferLike> as a BlobPart. Both paths fixed
  by widening validateAttachments to accept an AttachmentCandidate
  shape ({name, size, type, blob?}) and passing duck-typed records on
  the Expo side. File still satisfies the candidate type on the web.

- pickFromClipboard previously did `new Blob([uint8array])` which hits
  the same RN issue. Now writes base64 to expo-file-system.cacheDirectory
  and passes the file:// URI as previewUrl, matching pickFromFiles /
  pickFromPhotos. The Attachment.blob field is a placeholder; the
  intake-client ships from the URI.

Renames `pickFiles` → `pickFromFiles` for symmetry with `pickFromPhotos`
and `pickFromClipboard`. Tests follow the rename.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Ripwords

packages/expo/package.json

@@ -59,9 +59,12 @@
     "@react-native-async-storage/async-storage": ">=1.23.0",
     "@react-native-community/netinfo": ">=11.3.0",
     "expo": ">=52.0.0",
+    "expo-clipboard": "*",
     "expo-constants": ">=16.0.0",
     "expo-device": ">=6.0.0",
     "expo-document-picker": "*",
+    "expo-file-system": ">=18.0.0",
+    "expo-image-picker": "*",
     "react": ">=18.3.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": ">=2.16.0",

packages/expo/src/capture/file-picker.cancel.test.ts

@@ -4,10 +4,10 @@ mock.module("expo-document-picker", () => ({
   getDocumentAsync: async () => ({ canceled: true }),
 }))
 
-describe("pickFiles", () => {
+describe("pickFromFiles", () => {
   test("returns empty array when canceled", async () => {
-    const { pickFiles } = await import("./file-picker")
-    const out = await pickFiles({ multiple: true })
+    const { pickFromFiles } = await import("./file-picker")
+    const out = await pickFromFiles({ multiple: true })
     expect(out).toEqual([])
   })
 })

packages/expo/src/capture/file-picker.success.test.ts

@@ -10,10 +10,10 @@ mock.module("expo-document-picker", () => ({
   }),
 }))
 
-describe("pickFiles", () => {
+describe("pickFromFiles", () => {
   test("returns Attachment[] from a successful pick", async () => {
-    const { pickFiles } = await import("./file-picker")
-    const out = await pickFiles({ multiple: true })
+    const { pickFromFiles } = await import("./file-picker")
+    const out = await pickFromFiles({ multiple: true })
     expect(out).toHaveLength(2)
     expect(out[0]?.filename).toBe("a.png")
     expect(out[0]?.mime).toBe("image/png")

packages/expo/src/capture/file-picker.ts

@@ -1,19 +1,36 @@
 import type { Attachment } from "@reprojs/sdk-utils"
 import type { DocumentPickerResult } from "expo-document-picker"
+import type { ImagePickerResult } from "expo-image-picker"
 
 type GetDocumentAsync = (opts?: {
   multiple?: boolean
   copyToCacheDirectory?: boolean
 }) => Promise<DocumentPickerResult>
 
+type LaunchImageLibraryAsync = (opts?: {
+  mediaTypes?: "All" | "Images" | "Videos" | string[]
+  allowsMultipleSelection?: boolean
+  quality?: number
+  selectionLimit?: number
+}) => Promise<ImagePickerResult>
+
+type HasImageAsync = () => Promise<boolean>
+type GetImageAsync = (opts?: { format?: "png" | "jpeg" }) => Promise<{
+  data: string
+  size: { width: number; height: number }
+} | null>
+
+function makeAttachmentId(prefix: string, i: number): string {
+  return `${prefix}-${Date.now()}-${i}`
+}
+
 /**
- * Wraps expo-document-picker.getDocumentAsync. Returns an empty array on
- * cancel or when the picker module is unavailable. Each asset is converted
- * to an Attachment — the blob field is a placeholder Blob; the intake-client
- * uses the previewUrl (file:// uri) at submit time so we don't read every
- * file into memory the moment it's picked.
+ * Pick from the system file picker (Documents app on iOS, system picker on
+ * Android). Accepts any file type — same as the web SDK. Each asset is
+ * converted to an Attachment whose blob is a placeholder; the intake client
+ * streams from the previewUrl (file:// uri) at submit time.
  */
-export async function pickFiles({ multiple = true }: { multiple?: boolean } = {}): Promise<
+export async function pickFromFiles({ multiple = true }: { multiple?: boolean } = {}): Promise<
   Attachment[]
 > {
   let getDocumentAsync: GetDocumentAsync | undefined
@@ -35,8 +52,8 @@ export async function pickFiles({ multiple = true }: { multiple?: boolean } = {}
   return result.assets.map((asset, i) => {
     const mime = asset.mimeType ?? "application/octet-stream"
     return {
-      id: `picker-${Date.now()}-${i}`,
-      blob: new Blob([], { type: mime }), // Placeholder — intake-client uses uri at submit time.
+      id: makeAttachmentId("doc", i),
+      blob: new Blob([], { type: mime }),
       filename: asset.name,
       mime,
       size: asset.size ?? 0,
@@ -45,3 +62,111 @@ export async function pickFiles({ multiple = true }: { multiple?: boolean } = {}
     } satisfies Attachment
   })
 }
+
+/**
+ * Pick from the device's photo library. Image-only by design — videos can
+ * be added later if users ask. Filename is derived from the picker's
+ * fileName (Android) or from the URI's tail when iOS doesn't provide one.
+ */
+export async function pickFromPhotos({ multiple = true }: { multiple?: boolean } = {}): Promise<
+  Attachment[]
+> {
+  let launch: LaunchImageLibraryAsync | undefined
+  try {
+    const mod = await import("expo-image-picker")
+    launch = mod.launchImageLibraryAsync
+  } catch {
+    return []
+  }
+  if (!launch) return []
+
+  const result = await launch({
+    mediaTypes: "Images",
+    allowsMultipleSelection: multiple,
+    quality: 1,
+    selectionLimit: multiple ? 0 : 1,
+  })
+
+  if (result.canceled || !result.assets) return []
+
+  return result.assets.map((asset, i) => {
+    const mime = asset.mimeType ?? "image/jpeg"
+    const tail = asset.uri.split("/").pop() ?? `photo-${i}`
+    const filename = asset.fileName ?? tail
+    return {
+      id: makeAttachmentId("photo", i),
+      blob: new Blob([], { type: mime }),
+      filename,
+      mime,
+      size: asset.fileSize ?? 0,
+      isImage: true,
+      previewUrl: asset.uri,
+    } satisfies Attachment
+  })
+}
+
+/**
+ * Read a single image off the system clipboard. Returns an empty array
+ * when the clipboard has no image, when expo-clipboard or expo-file-system
+ * are unavailable, or when the user denied access. We write the base64
+ * payload to expo-file-system's cache directory and pass the resulting
+ * `file://` URI through `previewUrl`, matching the contract used by the
+ * other pickers — RN's Blob polyfill rejects ArrayBuffer/Uint8Array
+ * inputs, so we must NOT construct `new Blob([bytes])`.
+ */
+export async function pickFromClipboard(): Promise<Attachment[]> {
+  let hasImage: HasImageAsync | undefined
+  let getImage: GetImageAsync | undefined
+  try {
+    const mod = await import("expo-clipboard")
+    hasImage = mod.hasImageAsync
+    getImage = mod.getImageAsync
+  } catch {
+    return []
+  }
+  if (!hasImage || !getImage) return []
+
+  const present = await hasImage()
+  if (!present) return []
+
+  const result = await getImage({ format: "png" })
+  if (!result?.data) return []
+
+  // Clipboard data may arrive as raw base64 (iOS) or as a full data: URI
+  // (Android). Strip any prefix so we hand the file system pure base64.
+  const base64 = result.data.replace(/^data:[^;]+;base64,/, "")
+  const sizeBytes = Math.floor((base64.length * 3) / 4)
+
+  let cacheDirectory: string | null = null
+  let writeAsStringAsync:
+    | ((uri: string, contents: string, opts?: { encoding?: "utf8" | "base64" }) => Promise<void>)
+    | undefined
+  try {
+    const fs = await import("expo-file-system")
+    cacheDirectory = fs.cacheDirectory
+    writeAsStringAsync = fs.writeAsStringAsync
+  } catch {
+    return []
+  }
+  if (!cacheDirectory || !writeAsStringAsync) return []
+
+  const filename = `pasted-${Date.now()}.png`
+  const uri = `${cacheDirectory}${filename}`
+  await writeAsStringAsync(uri, base64, { encoding: "base64" })
+
+  const mime = "image/png"
+  return [
+    {
+      id: makeAttachmentId("clip", 0),
+      // Empty placeholder blob — same pattern as pickFromFiles /
+      // pickFromPhotos. The real bytes live at `previewUrl` and are
+      // streamed by RN's FormData {uri, name, type} shorthand at submit.
+      blob: new Blob([], { type: mime }),
+      filename,
+      mime,
+      size: sizeBytes,
+      isImage: true,
+      previewUrl: uri,
+    },
+  ]
+}

packages/expo/src/vendor.d.ts

@@ -21,3 +21,60 @@ declare module "expo-document-picker" {
     type?: string | string[]
   }): Promise<DocumentPickerResult>
 }
+
+declare module "expo-image-picker" {
+  export interface ImagePickerAsset {
+    uri: string
+    fileName?: string | null
+    mimeType?: string
+    fileSize?: number
+    width?: number
+    height?: number
+    type?: "image" | "video"
+  }
+
+  export type ImagePickerResult =
+    | { canceled: true; assets?: never }
+    | { canceled: false; assets: ImagePickerAsset[] }
+
+  export const MediaTypeOptions: {
+    All: "All"
+    Images: "Images"
+    Videos: "Videos"
+  }
+
+  export function launchImageLibraryAsync(options?: {
+    mediaTypes?: "All" | "Images" | "Videos" | string[]
+    allowsMultipleSelection?: boolean
+    quality?: number
+    selectionLimit?: number
+  }): Promise<ImagePickerResult>
+
+  export function requestMediaLibraryPermissionsAsync(): Promise<{
+    status: "granted" | "denied" | "undetermined"
+    granted: boolean
+  }>
+}
+
+declare module "expo-clipboard" {
+  export function hasImageAsync(): Promise<boolean>
+  export function getImageAsync(opts?: { format?: "png" | "jpeg" }): Promise<{
+    data: string
+    size: { width: number; height: number }
+  } | null>
+}
+
+declare module "expo-file-system" {
+  export const cacheDirectory: string | null
+  export const documentDirectory: string | null
+  export function writeAsStringAsync(
+    fileUri: string,
+    contents: string,
+    options?: { encoding?: "utf8" | "base64" },
+  ): Promise<void>
+  export function getInfoAsync(fileUri: string): Promise<{
+    exists: boolean
+    size?: number
+    uri: string
+  }>
+}

packages/expo/src/wizard/sheet.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import {
   KeyboardAvoidingView,
   Modal,
@@ -17,7 +17,8 @@ import { useAnnotationShapes } from "../annotation/use-shapes"
 import { CloseIcon } from "../annotation/icons"
 import { PrimaryButton, SecondaryButton, StepIndicator } from "./controls"
 import { theme } from "./theme"
-import { pickFiles } from "../capture/file-picker"
+import { pickFromClipboard, pickFromFiles, pickFromPhotos } from "../capture/file-picker"
+import { SourcePicker, type AttachmentSource } from "./source-picker"
 import { DEFAULT_ATTACHMENT_LIMITS, validateAttachments, type Attachment } from "@reprojs/sdk-utils"
 
 export interface WizardArgs {
@@ -53,6 +54,8 @@ export function WizardSheet({
   const [annotateSize, setAnnotateSize] = useState({ w: 0, h: 0 })
   const [attachments, setAttachments] = useState<Attachment[]>([])
   const [attachmentErrors, setAttachmentErrors] = useState<string[]>([])
+  const [sourcePickerVisible, setSourcePickerVisible] = useState(false)
+  const [hasClipboardImage, setHasClipboardImage] = useState(false)
   const store = useRef(createAnnotationStore()).current
   const flattenRef = useRef<FlattenHandle | null>(null)
 
@@ -64,28 +67,46 @@ export function WizardSheet({
   }, [screenshot])
 
   async function handleAttachmentsAdd() {
-    const picked = await pickFiles({ multiple: true })
+    // Probe the clipboard so we can disable that row in the picker when
+    // there's no image to paste — better than letting the user tap and
+    // get nothing.
+    let clipboardHasImage = false
+    try {
+      const mod = await import("expo-clipboard")
+      clipboardHasImage = await mod.hasImageAsync()
+    } catch {
+      clipboardHasImage = false
+    }
+    setHasClipboardImage(clipboardHasImage)
+    setSourcePickerVisible(true)
+  }
+
+  async function handleSourceSelected(source: AttachmentSource) {
+    setSourcePickerVisible(false)
+    let picked: Attachment[] = []
+    if (source === "files") picked = await pickFromFiles({ multiple: true })
+    else if (source === "photos") picked = await pickFromPhotos({ multiple: true })
+    else if (source === "clipboard") picked = await pickFromClipboard()
     if (picked.length === 0) return
-    // Convert picker output → File[] for validateAttachments. Each picked
-    // Attachment already has size/mime/filename; we mirror them onto a stub
-    // File so the validator's File contract type-checks. Override size since
-    // the picker already told us the real value.
-    const asFiles: File[] = picked.map((a) => {
-      const f = new File([new Uint8Array(0)], a.filename, { type: a.mime })
-      Object.defineProperty(f, "size", { value: a.size, configurable: true })
-      return f
-    })
-    const result = validateAttachments(asFiles, attachments, DEFAULT_ATTACHMENT_LIMITS)
-    // Reattach picker uri/blob to the validated Attachments (validateAttachments
-    // wraps the File reference in `blob`, which on RN is a stub — replace with
-    // the picker's previewUrl + blob).
-    const accepted = result.accepted.map((a) => {
-      const original = picked.find((p) => p.filename === a.filename)
+
+    // Validate using a duck-typed candidate shape — RN's Blob polyfill
+    // rejects ArrayBuffer parts, so we cannot synthesise File objects
+    // here. The validator only reads name/size/type from candidates.
+    const result = validateAttachments(
+      picked.map((a) => ({ name: a.filename, size: a.size, type: a.mime })),
+      attachments,
+      DEFAULT_ATTACHMENT_LIMITS,
+    )
+    // Reattach the real picker output onto the validated Attachments. We
+    // pair by index because filenames can collide (two screenshots from
+    // the camera roll often share a name).
+    const accepted = result.accepted.map((a, i) => {
+      const original = picked[i]
       if (!original) return a
       return { ...a, blob: original.blob, previewUrl: original.previewUrl }
     })
     setAttachments((prev) => [...prev, ...accepted])
-    setAttachmentErrors(result.rejected.map((r) => `${r.filename}: ${r.reason.replace("-", " ")}`))
+    setAttachmentErrors(result.rejected.map((r) => `${r.filename}: ${r.reason.replace(/-/g, " ")}`))
   }
 
   function handleAttachmentRemove(id: string) {
@@ -158,7 +179,10 @@ export function WizardSheet({
     lines.push({ label: "Console, network & breadcrumbs" })
     lines.push({ label: "Device & environment info" })
     if (attachments.length > 0) {
-      lines.push({ label: "Additional attachments", hint: String(attachments.length) })
+      lines.push({
+        label: "Additional attachments",
+        hint: String(attachments.length),
+      })
     }
     return lines
   }, [title, screenshot, shapes.length, attachments.length])
@@ -286,6 +310,12 @@ export function WizardSheet({
           </View>
         </KeyboardAvoidingView>
       </SafeAreaView>
+      <SourcePicker
+        visible={sourcePickerVisible}
+        hasClipboardImage={hasClipboardImage}
+        onSelect={handleSourceSelected}
+        onCancel={() => setSourcePickerVisible(false)}
+      />
     </Modal>
   )
 }