@multiplatform.one/forms 7.4.0 → 7.5.0

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
@@ -182,3 +183,72 @@ export const SkeletonState: Story = {
   render: (args) => <FileUpload {...args} />,
   args: { label: "Upload File", skeleton: true },
 };
+
+function TransferStory({ fail }: { fail?: boolean }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const input = hostRef.current?.querySelector("input[type='file']") as HTMLInputElement | null;
+    if (!input) return;
+    const file = new File(["payload"], fail ? "wazuh-dump.sql" : "restore-log.txt", {
+      type: "text/plain",
+    });
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    fireInputFiles(input, dt.files);
+  }, [fail]);
+  return (
+    <div ref={hostRef}>
+      <FileUpload
+        label="Attachment"
+        onUpload={async (_file, { onProgress }) => {
+          onProgress(64);
+          if (fail) throw new Error("413 Payload Too Large");
+          await new Promise<void>(() => {});
+        }}
+      />
+    </div>
+  );
+}
+
+function fireInputFiles(input: HTMLInputElement, files: FileList) {
+  Object.defineProperty(input, "files", { configurable: true, value: files });
+  input.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+/** In-flight row: name, size, progress, cancel. media-01 / media-04 uploading. */
+export const Uploading: Story = {
+  render: () => <TransferStory />,
+};
+
+/** Failed row: structured {problem, action, cta} plus remove. media-01 / media-04 failed. */
+export const Failed: Story = {
+  render: () => <TransferStory fail />,
+};
+
+type InTableRow = { id: string; label: string; value: string };
+
+/** LC-06: FileUpload stays hosted in DataTable; the cell opens a modal. */
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "report.pdf" },
+      { id: "2", label: "Beta", value: "brief.docx" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "File",
+        field: "fileupload",
+        fieldProps: { accept: "*/*", maxSize: 10485760 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={320}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/FileUpload/filePickerTypes.ts

@@ -0,0 +1,42 @@
+/**
+ * Shared contract for the platform-split file picker
+ * (`nativeFilePicker.ts` web / `nativeFilePicker.native.ts`). Lives in its own
+ * file (Geolocation `mapTypes.ts` precedent) so the twins cannot drift apart.
+ */
+
+/**
+ * A file chosen through a native picker. The shape is deliberately the one
+ * React Native's `FormData` accepts for a multipart upload
+ * (`{ uri, name, type }`), so a bound value can be posted without a second
+ * conversion. `size`/`type` may be absent from the OS response — the picker
+ * fills 0 / "" rather than leaving them undefined, because the field's own
+ * validators read both.
+ */
+export interface NativePickedFile {
+  name: string;
+  size: number;
+  type: string;
+  /** `file://` (or content://) URI of the picked asset on the device. */
+  uri: string;
+  lastModified: number;
+}
+
+/** Which native surface to open. `auto` reads `accept` (see `pickFilesNatively`). */
+export type NativePickerMode = "auto" | "document" | "image";
+
+export interface NativePickRequest {
+  /** Same `accept` string the web `<input type="file">` gets, e.g. "image/*,.pdf". */
+  accept?: string;
+  multiple?: boolean;
+  mode?: NativePickerMode;
+}
+
+export interface NativePickOutcome {
+  files: NativePickedFile[];
+  /** The user dismissed the picker. Not an error — leave the field untouched. */
+  canceled?: boolean;
+  /** No native picker module is linked into this build (peer not installed). */
+  unavailable?: boolean;
+  /** The OS refused the photo-library permission. */
+  denied?: boolean;
+}