@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/input/fileupload/components/SingleUpload.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var __jsx = _react["default"].createElement;
+var SingleFileUpload = function SingleFileUpload(_ref) {
+  var fileInputRef = _ref.fileInputRef,
+    caption = _ref.caption,
+    displayname = _ref.displayname,
+    contenttype = _ref.contenttype,
+    extensions = _ref.extensions,
+    filetype = _ref.filetype,
+    chooseFilter = _ref.chooseFilter,
+    disabled = _ref.disabled,
+    readonly = _ref.readonly,
+    required = _ref.required,
+    arialabel = _ref.arialabel,
+    tabindex = _ref.tabindex,
+    iconclass = _ref.iconclass,
+    styles = _ref.styles,
+    triggerFileSelect = _ref.triggerFileSelect,
+    onFileSelect = _ref.onFileSelect,
+    onBeforeselect = _ref.onBeforeselect;
+  return __jsx("div", {
+    className: "app-single-file-upload"
+  }, __jsx("div", {
+    className: "app-button-wrapper"
+  }, __jsx(_Box["default"], {
+    component: "form",
+    className: "form-horizontal"
+  }, __jsx("input", {
+    ref: fileInputRef,
+    type: "file",
+    name: "files",
+    accept: chooseFilter,
+    disabled: disabled,
+    required: required,
+    "aria-label": arialabel || displayname || "File selection field",
+    onChange: onFileSelect,
+    className: "file-input wm-fileupload-file-input",
+    tabIndex: tabindex
+  }), __jsx("button", {
+    id: "dropzone",
+    type: "button",
+    className: "app-button btn btn-default",
+    onClick: disabled || readonly ? undefined : triggerFileSelect,
+    disabled: disabled,
+    style: styles
+  }, __jsx("i", {
+    className: iconclass
+  }), __jsx("span", null, caption || displayname || "Select File")))));
+};
+var _default = exports["default"] = SingleFileUpload;

package/components/input/fileupload/index.d.ts

@@ -0,0 +1,92 @@
+import React from "react";
+import { WmFileUploadProps } from "./props";
+export declare const WmFileUpload: React.MemoExoticComponent<(props: WmFileUploadProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmFileUpload component provides a file upload input with drag-and-drop and multiple file support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-fileupload--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-fileupload--docs)
+ *
+ * @param props - {@link WmFileUploadProps}
+ */
+declare const _default: React.ComponentType<{
+    caption?: string;
+    name: string;
+    multiple?: boolean;
+    fileuploadmessage?: string;
+    disabled?: boolean;
+    contenttype?: string;
+    maxfilesize?: string | number;
+    iconclass?: string;
+    cleariconclass?: string;
+    cleariconhint?: string;
+    uploadpath?: string;
+    datasource?: Record<string, unknown>;
+    selectedFiles?: string;
+    destination?: string;
+    filelistheight?: number;
+    showprogressbar?: boolean;
+    showprogressbarpercentage?: boolean;
+    deleteiconhint?: string;
+    extensions?: string;
+    filetype?: string;
+    readonly?: boolean;
+    required?: boolean;
+    deletedatasource?: Record<string, unknown>;
+    displayname?: string;
+    onBeforeselect?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, selectedFiles: File[]) => void;
+    onSelect?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, selectedFiles: File[]) => void;
+    onDelete?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>) => void;
+    onBeforedelete?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, file: File) => void;
+    onError?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, file: File) => void;
+    id?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/input/fileupload/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmFileUpload = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _constants = require("@wavemaker-ai/react-runtime/components/constants");
+var _useFileUpload2 = require("./useFileUpload");
+var _SingleUpload = _interopRequireDefault(require("./components/SingleUpload"));
+var _MultiUpload = _interopRequireDefault(require("./components/MultiUpload"));
+var _ListItems = _interopRequireDefault(require("./components/ListItems"));
+var _confirmDialog = require("@wavemaker-ai/react-runtime/components/dialogs/confirm-dialog");
+var _excluded = ["fileInputRef", "chooseFilter", "highlightDropArea", "uploadedFiles", "selectedFolders", "setSelectedFolders", "dragOverHandler", "onFileSelect", "onFileDrop", "setHighlightDropArea", "clearSelectedFile", "triggerFileSelect", "onFileDelete", "confirmDialogOpen", "confirmDialogProps", "closeConfirmDialog", "onBeforeselect"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var WmFileUpload = exports.WmFileUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? _constants.fileUploadConstants.DEFAULT_CLASSES.DEFAULT_CAPTIONS.SELECT : _props$caption,
+    name = props.name,
+    listener = props.listener,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.TAB_INDEX : _props$tabindex,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.MULTIPLE : _props$multiple,
+    _props$fileuploadmess = props.fileuploadmessage,
+    fileuploadmessage = _props$fileuploadmess === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.FILEUPLOAD_MESSAGE : _props$fileuploadmess,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? !_constants.fileUploadConstants.DEFAULT_VALUES.ENABLED : _props$disabled,
+    _props$contenttype = props.contenttype,
+    contenttype = _props$contenttype === void 0 ? "" : _props$contenttype,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.ICON_CLASS : _props$iconclass,
+    extensions = props.extensions,
+    filetype = props.filetype,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    displayname = props.displayname,
+    _props$width = props.width,
+    width = _props$width === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.WIDTH : _props$width,
+    height = props.height,
+    styles = props.styles,
+    className = props.className,
+    id = props.id,
+    filelistheight = props.filelistheight;
+  var _useFileUpload = (0, _useFileUpload2.useFileUpload)(props),
+    fileInputRef = _useFileUpload.fileInputRef,
+    chooseFilter = _useFileUpload.chooseFilter,
+    highlightDropArea = _useFileUpload.highlightDropArea,
+    uploadedFiles = _useFileUpload.uploadedFiles,
+    selectedFolders = _useFileUpload.selectedFolders,
+    setSelectedFolders = _useFileUpload.setSelectedFolders,
+    dragOverHandler = _useFileUpload.dragOverHandler,
+    onFileSelect = _useFileUpload.onFileSelect,
+    onFileDrop = _useFileUpload.onFileDrop,
+    setHighlightDropArea = _useFileUpload.setHighlightDropArea,
+    clearSelectedFile = _useFileUpload.clearSelectedFile,
+    triggerFileSelect = _useFileUpload.triggerFileSelect,
+    onFileDelete = _useFileUpload.onFileDelete,
+    confirmDialogOpen = _useFileUpload.confirmDialogOpen,
+    confirmDialogProps = _useFileUpload.confirmDialogProps,
+    closeConfirmDialog = _useFileUpload.closeConfirmDialog,
+    handleBeforeSelect = _useFileUpload.onBeforeselect,
+    restEvents = (0, _objectWithoutProperties2["default"])(_useFileUpload, _excluded);
+  return __jsx(_Box["default"], {
+    component: "div",
+    className: (0, _clsx["default"])("app-fileupload", "wm-fileupload-root", className),
+    id: id,
+    title: hint,
+    hidden: props.hidden,
+    style: styles
+  }, !multiple ? __jsx(_SingleUpload["default"], (0, _extends2["default"])({
+    fileInputRef: fileInputRef,
+    caption: caption,
+    displayname: displayname,
+    contenttype: contenttype,
+    extensions: extensions,
+    filetype: filetype,
+    chooseFilter: chooseFilter,
+    disabled: disabled,
+    readonly: readonly,
+    required: required,
+    arialabel: arialabel,
+    tabindex: tabindex,
+    iconclass: iconclass,
+    styles: styles,
+    triggerFileSelect: triggerFileSelect,
+    onFileSelect: onFileSelect,
+    onBeforeselect: handleBeforeSelect
+  }, restEvents)) : __jsx(_MultiUpload["default"], (0, _extends2["default"])({
+    fileInputRef: fileInputRef,
+    caption: caption,
+    multiple: multiple,
+    contenttype: contenttype,
+    extensions: extensions,
+    filetype: filetype,
+    chooseFilter: chooseFilter,
+    disabled: disabled,
+    readonly: readonly,
+    required: required,
+    arialabel: arialabel,
+    displayname: displayname,
+    tabindex: tabindex,
+    iconclass: iconclass,
+    styles: styles,
+    fileuploadmessage: fileuploadmessage,
+    highlightDropArea: highlightDropArea,
+    triggerFileSelect: triggerFileSelect,
+    onFileSelect: onFileSelect,
+    dragOverHandler: dragOverHandler,
+    onFileDrop: onFileDrop,
+    setHighlightDropArea: setHighlightDropArea,
+    onBeforeselect: handleBeforeSelect
+  }, restEvents)), __jsx(_ListItems["default"], (0, _extends2["default"])({
+    uploadedFiles: uploadedFiles,
+    selectedFolders: selectedFolders,
+    filelistheight: filelistheight,
+    readonly: readonly,
+    clearSelectedFile: clearSelectedFile,
+    onFileDelete: onFileDelete,
+    setSelectedFolders: setSelectedFolders,
+    onBeforedelete: props.onBeforedelete ? function (e, file) {
+      var _props$onBeforedelete, _listener$Widgets;
+      return (_props$onBeforedelete = props.onBeforedelete) === null || _props$onBeforedelete === void 0 ? void 0 : _props$onBeforedelete.call(props, e, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], file);
+    } : undefined
+  }, restEvents)), __jsx(_confirmDialog.WmConfirmDialog, {
+    name: "fileUploadConfirmDialog",
+    isopen: confirmDialogOpen,
+    title: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.title) || "",
+    message: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.message) || "",
+    oktext: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.oktext) || "OK",
+    canceltext: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.canceltext) || "Cancel",
+    onOk: function onOk(event) {
+      confirmDialogProps === null || confirmDialogProps === void 0 || confirmDialogProps.onOk();
+      closeConfirmDialog();
+    },
+    isDialog: false,
+    onCancel: function onCancel(event) {
+      confirmDialogProps === null || confirmDialogProps === void 0 || confirmDialogProps.onCancel();
+      closeConfirmDialog();
+    },
+    onClose: closeConfirmDialog,
+    listener: {}
+  }));
+}, function (prevProps, nextProps) {
+  var keysToCheck = ["caption", "name", "hint", "arialabel", "tabindex", "multiple", "fileuploadmessage", "show", "disabled", "contenttype", "maxfilesize", "iconclass", "cleariconclass", "cleariconhint", "uploadpath", "datasource", "selectedFiles", "destination", "filelistheight", "width", "showprogressbar", "showprogressbarpercentage", "deleteiconhint", "extensions", "filetype", "readonly", "required", "deletedatasource", "displayname", "height", "onBeforeselect", "onSelect", "onDelete", "onBeforedelete", "onError", "hidden"];
+
+  // Check if any props that affect rendering have changed
+  var propsChanged = keysToCheck.some(function (key) {
+    return prevProps[key] !== nextProps[key];
+  });
+
+  // Also check if the file lists have changed
+  var filesChanged = prevProps.datasource !== nextProps.datasource || prevProps.deletedatasource !== nextProps.deletedatasource;
+  return !propsChanged && !filesChanged;
+});
+WmFileUpload.displayName = "WmFileUpload";
+
+/**
+ * The WmFileUpload component provides a file upload input with drag-and-drop and multiple file support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-fileupload--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-fileupload--docs)
+ *
+ * @param props - {@link WmFileUploadProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmFileUpload);

package/components/input/fileupload/props.d.ts

@@ -0,0 +1,320 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Represents the state of a file being uploaded.
+ */
+export type FileUploadState = {
+    /** File name. */
+    name?: string;
+    /** Upload progress percentage (0-100). */
+    progress?: number;
+    /** Upload status (e.g., "success", "error"). */
+    status?: string;
+    /** Error message if the upload failed. */
+    errMsg?: string;
+    /** Unique identifier for the upload. */
+    uniqueId?: string;
+    /** Server response data. */
+    _response?: Record<string, unknown>;
+    /** File size in bytes. */
+    size?: number;
+    /** Stored file name on the server. */
+    storageName?: string;
+};
+/**
+ * Props specific to the WmFileUpload component.
+ */
+export interface FileUploadProps {
+    /**
+     * Caption text displayed on the upload button.
+     */
+    caption?: string;
+    /**
+     * The unique name of the file upload widget (required).
+     */
+    name: string;
+    /**
+     * Whether multiple file uploads are allowed.
+     */
+    multiple?: boolean;
+    /**
+     * Message displayed in the file upload area.
+     */
+    fileuploadmessage?: string;
+    /**
+     * Whether the file upload is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Accepted content type(s) for uploads.
+     */
+    contenttype?: string;
+    /**
+     * Maximum file size allowed (in bytes or as a string with unit).
+     */
+    maxfilesize?: string | number;
+    /**
+     * CSS class for the upload button icon.
+     */
+    iconclass?: string;
+    /**
+     * CSS class for the clear icon.
+     */
+    cleariconclass?: string;
+    /**
+     * Tooltip for the clear icon.
+     */
+    cleariconhint?: string;
+    /**
+     * Server path to upload files to.
+     */
+    uploadpath?: string;
+    /**
+     * Data source variable for the upload service.
+     */
+    datasource?: Record<string, unknown>;
+    /**
+     * Comma-separated list of selected file names.
+     */
+    selectedFiles?: string;
+    /**
+     * Upload destination folder.
+     */
+    destination?: string;
+    /**
+     * Height of the file list in pixels.
+     */
+    filelistheight?: number;
+    /**
+     * Whether to show the progress bar.
+     */
+    showprogressbar?: boolean;
+    /**
+     * Whether to show the percentage on the progress bar.
+     */
+    showprogressbarpercentage?: boolean;
+    /**
+     * Tooltip for the delete icon.
+     */
+    deleteiconhint?: string;
+    /**
+     * Allowed file extensions (comma-separated).
+     */
+    extensions?: string;
+    /**
+     * File type filter (e.g., "image", "audio").
+     */
+    filetype?: string;
+    /**
+     * Whether the file upload is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether file upload is required.
+     */
+    required?: boolean;
+    /**
+     * Data source variable for the delete service.
+     */
+    deletedatasource?: Record<string, unknown>;
+    /**
+     * Field to use as the display name for uploaded files.
+     */
+    displayname?: string;
+    /**
+     * Callback invoked before files are selected. Return `false` to prevent.
+     */
+    onBeforeselect?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, selectedFiles: File[]) => void;
+    /**
+     * Callback invoked when files are selected.
+     */
+    onSelect?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, selectedFiles: File[]) => void;
+    /**
+     * Callback invoked when a file is deleted.
+     */
+    onDelete?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked before a file is deleted.
+     */
+    onBeforedelete?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, file: File) => void;
+    /**
+     * Callback invoked when an upload error occurs.
+     */
+    onError?: ($event: React.MouseEvent | React.ChangeEvent, widget: Record<string, unknown>, file: File) => void;
+    /**
+     * The unique ID for the widget.
+     */
+    id?: string;
+}
+/**
+ * Combined props for the WmFileUpload component, including base WaveMaker props.
+ */
+export type WmFileUploadProps = Prettify<FileUploadProps & BaseProps>;
+/**
+ * Props shared by both SingleUpload and MultiUpload sub-components.
+ */
+export interface CommonFileProps {
+    /** Array of uploaded files with their state. */
+    uploadedFiles: (File & FileUploadState)[];
+    /** Array of selected folder references. */
+    selectedFolders: File[];
+    /** Height of the file list container. */
+    filelistheight?: string | number;
+    /** Whether the file list is read-only. */
+    readonly?: boolean;
+    /** Clears a selected file from the list. */
+    clearSelectedFile: (file: FileUploadState & File) => void;
+    /** Handler invoked before a file is deleted. */
+    onBeforedelete?: (e: React.MouseEvent, file: FileUploadState & File) => void;
+    /** Handler invoked when a file is deleted. */
+    onFileDelete: (e: React.MouseEvent, file: FileUploadState & File) => void;
+    /** Setter for the selected folders state. */
+    setSelectedFolders: React.Dispatch<React.SetStateAction<File[]>>;
+}
+/**
+ * Props for the SingleFileUpload sub-component.
+ */
+export interface SingleFileUploadProps {
+    /** Ref to the hidden file input element. */
+    fileInputRef: React.RefObject<HTMLInputElement | null>;
+    /** Caption for the upload button. */
+    caption?: string;
+    /** Display name field for files. */
+    displayname?: string;
+    /** Accepted content type(s). */
+    contenttype?: string;
+    /** Allowed file extensions. */
+    extensions?: string;
+    /** File type filter. */
+    filetype?: string;
+    /** Computed file type filter string. */
+    chooseFilter?: string;
+    /** Whether the upload is disabled. */
+    disabled?: boolean;
+    /** Whether the upload is read-only. */
+    readonly?: boolean;
+    /** Whether file selection is required. */
+    required?: boolean;
+    /** Aria label for accessibility. */
+    arialabel?: string;
+    /** Tab index for keyboard navigation. */
+    tabindex?: number;
+    /** CSS class for the icon. */
+    iconclass?: string;
+    /** Inline styles. */
+    styles?: React.CSSProperties;
+    /** Triggers the native file select dialog. */
+    triggerFileSelect: () => void;
+    /** Handler for file selection. */
+    onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Handler invoked before file selection. Can be called with (e) from button or (e, widget, files) from file select. */
+    onBeforeselect?: (e: React.MouseEvent | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, selectedFiles?: File[]) => void;
+}
+/**
+ * Props for the MultipleFileUpload sub-component.
+ */
+export interface MultipleFileUploadProps {
+    /** Ref to the hidden file input element. */
+    fileInputRef: React.RefObject<HTMLInputElement | null>;
+    /** Whether multiple files can be selected. */
+    multiple: boolean;
+    /** Caption for the upload button. */
+    caption?: string;
+    /** Accepted content type(s). */
+    contenttype?: string;
+    /** Allowed file extensions. */
+    extensions?: string;
+    /** File type filter. */
+    filetype?: string;
+    /** Computed file type filter string. */
+    chooseFilter?: string;
+    /** Whether the upload is disabled. */
+    disabled?: boolean;
+    /** Whether the upload is read-only. */
+    readonly?: boolean;
+    /** Whether file selection is required. */
+    required?: boolean;
+    /** Aria label for accessibility. */
+    arialabel?: string;
+    /** Display name field for files. */
+    displayname?: string;
+    /** Tab index for keyboard navigation. */
+    tabindex?: number;
+    /** CSS class for the icon. */
+    iconclass?: string;
+    /** Message displayed in the drop area. */
+    fileuploadmessage?: string;
+    /** Whether the drop area is highlighted. */
+    highlightDropArea: boolean;
+    /** Triggers the native file select dialog. */
+    triggerFileSelect: () => void;
+    /** Handler for file selection. */
+    onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Handler for drag-over events. */
+    dragOverHandler: (e: React.DragEvent) => void;
+    /** Handler for file drops. */
+    onFileDrop: (e: React.DragEvent) => void;
+    /** Setter for the drop area highlight state. */
+    setHighlightDropArea: (highlight: boolean) => void;
+    /** Handler invoked before file selection. Can be called with (e) from button or (e, widget, files) from file select. */
+    onBeforeselect?: (e: React.MouseEvent | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, selectedFiles?: File[]) => void;
+    /** Inline styles. */
+    styles?: React.CSSProperties;
+}
+/**
+ * Configuration for the upload variable/service.
+ */
+export interface UploadVariable {
+    /** Name of the upload variable. */
+    name: string;
+    /** Service information for the upload. */
+    serviceInfo: {
+        /** Content types consumed by the service. */
+        consumes: string[];
+        /** Parameters accepted by the service. */
+        parameters: Array<{
+            name: string;
+        }>;
+    };
+    /** Upload request parameters. */
+    params: {
+        /** The file to upload. */
+        files: File;
+        /** The upload path. */
+        uploadPath: string;
+    };
+    /** Variable configuration. */
+    config: {
+        /** Base URL for the service. */
+        baseUrl: string;
+        /** Context information. */
+        _context: {
+            /** Context name. */
+            name: string;
+        };
+    };
+}
+/**
+ * Configuration for the delete variable/service.
+ */
+export interface DeleteVariable {
+    /** Name of the delete variable. */
+    name: string;
+    /** Variable configuration. */
+    config: {
+        /** Base URL for the service. */
+        baseUrl: string;
+        /** Context information. */
+        _context: {
+            name: string;
+        };
+    };
+}
+/**
+ * Shape of the server response after uploading a file.
+ */
+export interface UploadResponse {
+    /** The name of the uploaded file. */
+    fileName?: string;
+    /** Additional response properties. */
+    [key: string]: unknown;
+}

package/components/input/fileupload/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});