FileAttachmentPanel

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-file-attachment-panel

pnpm add expo-document-picker expo-image-picker

Both pickers are optional peers loaded lazily. The Add sheet offers only the sources that are installed:

With a single installed source the Add button opens that picker directly; with none (and no onPickFiles) the Add button is hidden.

Usage

import {
  FileAttachmentPanel,
  type DocyrusFile,
  type NativeFile
} from '@/components/docyrus-native/file-attachment-panel';

async function uploadFile(file: NativeFile, options?: { onProgress: (progress: number) => void }): Promise<DocyrusFile> {
  const form = new FormData();

  form.append('file', { uri: file.uri, name: file.name, type: file.type } as never);

  // Use XMLHttpRequest (or expo-file-system uploadAsync) to report real progress.
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open('POST', `${apiUrl}/v1/apps/base/data-sources/contact/items/${recordId}/files`);
    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
    xhr.upload.onprogress = event => options?.onProgress((event.loaded / event.total) * 100);
    xhr.onload = () => (xhr.status < 300 ? resolve(JSON.parse(xhr.responseText).data) : reject(new Error('Upload failed')));
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send(form);
  });
}

<FileAttachmentPanel
  files={files}
  maxFiles={10}
  maxFileSize={20 * 1024 * 1024}
  accept={['image/*', 'application/pdf']}
  onUploadFile={uploadFile}
  onDeleteFile={id => deleteFile(id)}
  isDeletePending={deleteMutation.isPending}
  onValidationError={message => toast.error(message)} />

Behaviour:

• Add → source sheet → picker → every file is validated (maxFileSize, accept, remaining maxFiles slots; rejections go to onValidationError) → onUploadFile is called per file in parallel.
• Each upload gets a progress row. Without onProgress reports the bar sits at an indeterminate 50% (like web); a finished upload shows a check for 1.5 s. A rejected promise turns the row into an error row with Retry (re-runs onUploadFile with the same file) and Dismiss.
• Tapping a file calls onFileOpen, or Linking.openURL(signed_url) when onFileOpen is omitted.
• Delete asks through DeleteConfirmDialog (objectName="file"); the dialog closes when onDeleteFile resolves and shows a spinner while isDeletePending.
• Uncontrolled view mode starts in grid when any file is an image, else list.

API Reference

FileAttachmentPanelProps

DocyrusFile

The web record shape; everything except id / file_name is optional on native.

NativeFile

UploadFileOptions

UploadingFile

ExternalFilePayload

Components

Type Exports

i18n keys

Via useUiTranslation(): ui.fileAttachment.title, add, addFiles, sourceFiles, sourcePhotos, sourceCamera, listView, gridView, loadingFiles, noFiles, emptyHint, emptyReadOnly, uploadFailed, retry, dismiss, fileTooLarge ({name}, {size}), fileTypeNotAccepted ({name}), maxFilesReached ({count}), plus ui.common.delete.