@wildo-ai/saas-frontend-lib 1.1.2 → 1.1.4

package/dist/esm/components/form/fields/form-field-file.js

@@ -14,6 +14,8 @@ import { UIBehavior, FormControlVariant, ButtonSize } from "@wildo-ai/presets-co
 import { getFileMetadata, getFileUI, formatFileSize, isMimeTypeAllowed, getAcceptDescription, buildAcceptAttribute, FileDisplayNature, resolveFileDisplayNature, } from "@wildo-ai/zod-decorators";
 import { determineValidationMode, getZodErrorParams } from "../../../components/form/validation-errors/form-validation.js";
 import { resolveFormFieldFileProviderConstraints } from './form-field-file-provider-constraints.frontend.utils.js';
+import { ProviderFilePickerHost } from '../../../core/external-providers/ProviderFilePickerHost.js';
+import { ProviderFrontendSelectionDelivery } from '@wildo-ai/saas-models/public-runtime';
 import { ImageCrop } from '../../../components/form/controls/file/image-crop.js';
 import { canExportWithinAllowedMimeTypes, isCroppableRasterImageFile } from '../../../components/form/controls/file/image-crop.frontend.utils.js';
 /** Type guard to check if value is a single file */
@@ -569,6 +571,119 @@ export const FormFieldFile_Preset_Default = React.forwardRef(({ schema, name, va
             handleSingleFileUpload(file);
         }
     }, [isMultiple, handleMultipleFilesUpload, handleSingleFileUpload, aspectRatioConstraint, validateFileMimeType, allowedMimeTypes]);
+    // ==========================================================================
+    // PROVIDER FILE PICKERS
+    // ==========================================================================
+    /*
+     * A provider's picker hands back one of THREE delivery kinds, and the field —
+     * not the host — decides what each one means. Two of them end in the same
+     * place as a local selection: `handleFiles`, so MIME/size validation, the
+     * crop step and the upload pipeline are the ones already written here rather
+     * than a second, provider-only path that would drift from them.
+     *
+     * The third, REMOTE_REFERENCE, carries no bytes: the file STAYS at the vendor
+     * and only the application backend can resolve the id (#394 P5). It goes to
+     * the SAME endpoint an upload does, as a JSON body, and the backend verifies
+     * the reference at the vendor as this person, holds it to the field's
+     * constraints, and creates the row in the vendor's storage. What comes back
+     * is a fileId, exactly as an upload's, so the value is committed by the same
+     * code. The host has already refused any selection that contradicts the
+     * provider's declaration, and the chooser offered this provider only because
+     * the field accepts its storage — so a refusal here is the vendor's or the
+     * backend's, and is shown as one message.
+     */
+    const linkRemoteSelections = React.useCallback(async (providerRef, selections) => {
+        const toLink = isMultiple ? selections : selections.slice(0, 1);
+        const uploadUrl = isMultiple ? endpoints.upload : resolveSingleFileUploadUrl(endpoints, currentFileId);
+        if (!uploadUrl) {
+            setInternalError(t('File uploads are unavailable for this field') ?? 'File uploads are unavailable for this field');
+            return;
+        }
+        setInternalError(undefined);
+        const results = await Promise.allSettled(toLink.map(async (selection) => {
+            const result = await httpOperations.linkRemoteReference(uploadUrl, {
+                remoteReference: {
+                    providerRef,
+                    externalId: selection.externalId,
+                    ...(selection.displayName !== undefined ? { displayName: selection.displayName } : {}),
+                    ...(selection.mimeType !== undefined ? { mimeType: selection.mimeType } : {}),
+                    ...(selection.sizeBytes !== undefined ? { sizeBytes: selection.sizeBytes } : {}),
+                },
+            });
+            if (result.metadata) {
+                setFileMetadataMap(prev => {
+                    const next = new Map(prev);
+                    next.set(result.fileId, result.metadata);
+                    return next;
+                });
+            }
+            return result.fileId;
+        }));
+        const linkedFileIds = results.flatMap((result) => (result.status === 'fulfilled' ? [result.value] : []));
+        if (linkedFileIds.length > 0) {
+            const newValue = isMultiple
+                ? { fileIds: [...currentFileIdsRef.current, ...linkedFileIds], updatedAt: new Date() }
+                : { fileId: linkedFileIds[0], updatedAt: new Date() };
+            if (!isControlled) {
+                setInternalValue(newValue);
+            }
+            onChange?.(newValue);
+        }
+        if (linkedFileIds.length < toLink.length) {
+            setInternalError(tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_FILE, 'provider_link_failed'));
+        }
+    }, [currentFileId, endpoints, httpOperations, isControlled, isMultiple, onChange, t, tComponent]);
+    const handleProviderSelections = React.useCallback(async (providerRef, selections) => {
+        const files = [];
+        const remoteReferences = [];
+        let sawFetchFailure = false;
+        for (const selection of selections) {
+            if (selection.kind === ProviderFrontendSelectionDelivery.BROWSER_READABLE_FILE) {
+                files.push(selection.file);
+                continue;
+            }
+            if (selection.kind === ProviderFrontendSelectionDelivery.BROWSER_READABLE_URL) {
+                try {
+                    // The url is fetchable by the browser BY DECLARATION — its origin has
+                    // to be admitted by the surface's composed CSP, which is the
+                    // application's decision and not something this field can check. A
+                    // blocked origin therefore arrives here as an ordinary fetch failure.
+                    const response = await fetch(selection.url);
+                    if (!response.ok) {
+                        sawFetchFailure = true;
+                        continue;
+                    }
+                    const blob = await response.blob();
+                    files.push(new File([blob], selection.displayName ?? 'file', { type: selection.mimeType ?? blob.type }));
+                }
+                catch {
+                    sawFetchFailure = true;
+                }
+                continue;
+            }
+            remoteReferences.push(selection);
+        }
+        if (remoteReferences.length > 0) {
+            await linkRemoteSelections(providerRef, remoteReferences);
+        }
+        if (sawFetchFailure && files.length === 0) {
+            setInternalError(tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_FILE, 'provider_fetch_failed'));
+            return;
+        }
+        if (files.length === 0)
+            return;
+        setInternalError(sawFetchFailure ? tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_FILE, 'provider_fetch_failed') : undefined);
+        handleFiles(files);
+    }, [handleFiles, linkRemoteSelections, tComponent]);
+    /*
+     * A picker that failed and a picker that contradicted its own declaration
+     * reach here as one message, because they are one thing to the person looking
+     * at the field. The distinction that matters to whoever wrote the provider is
+     * carried in the rejection the host built, not in what a user reads.
+     */
+    const handleProviderFailure = React.useCallback(() => {
+        setInternalError(tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_FILE, 'provider_picker_failed'));
+    }, [tComponent]);
     // Handle file input change
     const handleFileChange = React.useCallback((e) => {
         const files = e.target.files;
@@ -859,15 +974,29 @@ export const FormFieldFile_Preset_Default = React.forwardRef(({ schema, name, va
     // RENDER — Main
     // ==========================================================================
     const canAddMore = isMultiple && (!maxFiles || currentFileIds.length < maxFiles);
+    /*
+     * The provider pickers, mounted in the FRAMEWORK's own upload chrome rather
+     * than in an application: every application's file fields get them, and an
+     * application that adopted it in one place would have proven the component
+     * and left the capability just as unadopted.
+     *
+     * `ProviderFilePickerHost` renders NOTHING when no live provider carries a
+     * picker, which is every application today — so this costs an empty render
+     * and no chrome until somebody registers one. The chooser is supplied here
+     * rather than left to the host's plain buttons because a provider's display
+     * name is an i18n KEY: the host cannot resolve it without depending on the
+     * i18n service, and this field already has one.
+     */
+    const renderProviderPickers = () => (_jsx(ProviderFilePickerHost, { constraints: providerConstraints, acceptedStorages: fileSchemaMetadata?.storageAccepted, onSelect: handleProviderSelections, onProviderFailure: handleProviderFailure, renderChooser: ({ choices, chosen, choose }) => (_jsx("div", { role: "group", className: "flex flex-wrap gap-item-xs mt-element", children: choices.map((choice) => (_jsx(Button, { type: "button", size: ButtonSize.SM, variant: choice.providerRef === chosen ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.OUTLINE, "aria-pressed": choice.providerRef === chosen, onClick: () => choose(choice.providerRef), children: t(choice.displayNameLabelKey) ?? choice.displayName ?? choice.providerRef }, choice.providerRef))) })) }));
     if (!isReady)
         return null;
     return (_jsxs("div", { ref: ref, className: className, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: isMultiple, onChange: handleFileChange, className: "hidden", disabled: isUploadInteractionDisabled }), isMultiple ? (
             // Multiple file mode
-            _jsxs("div", { className: "space-y-element", children: [currentFileIds.length > 0 && renderMultipleFileList(), !isUploadInteractionDisabled && canAddMore && renderUploadZone(currentFileIds.length > 0), !isUploadInteractionDisabled && currentFileIds.length === 0 && !canAddMore && renderUploadZone(false)] })) : (
+            _jsxs("div", { className: "space-y-element", children: [currentFileIds.length > 0 && renderMultipleFileList(), !isUploadInteractionDisabled && canAddMore && renderUploadZone(currentFileIds.length > 0), !isUploadInteractionDisabled && currentFileIds.length === 0 && !canAddMore && renderUploadZone(false), !isUploadInteractionDisabled && canAddMore && renderProviderPickers()] })) : (
             // Single file mode
             currentFileId
                 ? renderSingleFileDisplay(currentFileId, fileMetadata)
-                : (hasUploadCapability ? renderUploadZone(false) : null)), pendingCropFile && aspectRatioConstraint && (_jsx(ImageCrop, { file: pendingCropFile, aspectRatio: aspectRatioConstraint, maskShape: fileUIPreviewShape, maxOutputWidth: imageConstraints?.maxWidth, maxOutputHeight: imageConstraints?.maxHeight, maxOutputSizeBytes: maxSize, allowedMimeTypes: allowedMimeTypes, onConfirm: handleCropConfirm, onCancel: handleCropCancel, onUncroppable: handleUncroppable }))] }));
+                : (hasUploadCapability ? (_jsxs(_Fragment, { children: [renderUploadZone(false), !isUploadInteractionDisabled && renderProviderPickers()] })) : null)), pendingCropFile && aspectRatioConstraint && (_jsx(ImageCrop, { file: pendingCropFile, aspectRatio: aspectRatioConstraint, maskShape: fileUIPreviewShape, maxOutputWidth: imageConstraints?.maxWidth, maxOutputHeight: imageConstraints?.maxHeight, maxOutputSizeBytes: maxSize, allowedMimeTypes: allowedMimeTypes, onConfirm: handleCropConfirm, onCancel: handleCropCancel, onUncroppable: handleUncroppable }))] }));
 });
 // --- Wrapper ---
 /**
@@ -904,6 +1033,14 @@ export const FormFieldFile = forwardRef(({ preset = CorePresetNames.DEFAULT, htt
                 }
                 throw new Error('upload_failed');
             },
+            linkRemoteReference: async (url, body) => {
+                // Same route, same response shape as an upload — see `FileHttpOperations`.
+                const response = await httpClient.post(url, body);
+                if (response?.file?.fileId) {
+                    return { fileId: response.file.fileId, metadata: response.file };
+                }
+                throw new Error('link_failed');
+            },
             get: async (url) => {
                 return httpClient.get(url);
             },