@lowdefy/blocks-files 0.0.0-experimental-20260707082859

package/dist/blocks/Upload/meta.js

@@ -0,0 +1,193 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import uploadTheme from '../../schemas/uploadTheme.js';
+export default {
+    category: 'input',
+    icons: [
+        'AiOutlineUpload'
+    ],
+    valueType: 'object',
+    cssKeys: {
+        element: 'The outer block wrapper around the upload button and list.',
+        trigger: 'The antd upload trigger (.ant-upload-select) that wraps the button.',
+        list: 'The uploaded file list container.',
+        item: 'Each uploaded file row in the list.'
+    },
+    events: {
+        onBeforeUpload: {
+            description: 'Triggered before a file is uploaded. If an action throws, the upload is cancelled.',
+            event: {
+                file: 'The file metadata (name, type, size, lastModified, uid, url).'
+            }
+        },
+        onChange: {
+            description: 'Triggered when the upload state is changing. With emitFileContent, triggered once the file content has been read, with the block value ({ file, fileList }) as the event, where file includes the base64 content.'
+        },
+        onProgress: {
+            description: 'Triggered when the upload state is in progress.',
+            event: {
+                file: 'The file being uploaded.',
+                fileList: 'The full list of files.'
+            }
+        },
+        onSuccess: {
+            description: 'Triggered when the upload state is done uploading.',
+            event: {
+                file: 'The uploaded file.',
+                fileList: 'The full list of files.'
+            }
+        },
+        onRemove: {
+            description: 'Triggered when the upload has been removed.',
+            event: {
+                file: 'The removed file.',
+                fileList: 'The full list of files.'
+            }
+        },
+        onError: {
+            description: 'Triggered when the upload has failed.',
+            event: {
+                file: 'The file that failed.',
+                fileList: 'The full list of files.'
+            }
+        },
+        onClick: 'Triggered when the upload button is clicked.'
+    },
+    properties: {
+        type: 'object',
+        properties: {
+            accept: {
+                type: 'string',
+                description: 'File types accepted by the input. See html file type input accept property at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept.'
+            },
+            button: {
+                type: 'object',
+                description: 'Button block properties. See <a href="/Button">Button</a> for all properties.',
+                default: {
+                    icon: 'UploadOutlined',
+                    title: 'Upload',
+                    type: 'default'
+                },
+                docs: {
+                    displayType: 'button'
+                },
+                properties: {
+                    title: {
+                        type: 'string',
+                        description: 'Button title text.'
+                    },
+                    icon: {
+                        type: [
+                            'string',
+                            'object'
+                        ],
+                        description: 'Button icon name or Icon block properties.',
+                        docs: {
+                            displayType: 'icon'
+                        }
+                    },
+                    type: {
+                        type: 'string',
+                        enum: [
+                            'default',
+                            'primary',
+                            'dashed',
+                            'text',
+                            'link'
+                        ],
+                        default: 'default',
+                        description: 'Button type.'
+                    },
+                    danger: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Set button style to danger.'
+                    },
+                    disabled: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'Disable the button.'
+                    },
+                    size: {
+                        type: 'string',
+                        enum: [
+                            'small',
+                            'default',
+                            'large'
+                        ],
+                        default: 'default',
+                        description: 'Button size.'
+                    }
+                }
+            },
+            disabled: {
+                type: 'boolean',
+                description: 'Disable the file input.'
+            },
+            emitFileContent: {
+                type: 'boolean',
+                default: false,
+                description: 'Instead of uploading, read the file and emit { name, size, type, content } — content a base64 string — as the block value and onChange event. Use with a CallAPI action to store the file with a server-side write request (e.g. AwsS3PutObject). Replaces uploadPolicyRequestId.'
+            },
+            maxCount: {
+                type: 'number',
+                description: 'Maximum number of files that can be uploaded.'
+            },
+            uploadPolicyRequestId: {
+                type: 'string',
+                description: 'Id of an upload-policy request (e.g. AwsS3PresignedPostPolicy, GcsSignedPostPolicy, AzureBlobUploadSas) that defines to which storage bucket and how the file should be uploaded. Required unless emitFileContent is true.',
+                docs: {
+                    displayType: 'manual',
+                    block: {
+                        id: 'block_properties_uploadPolicyRequestId',
+                        layout: {
+                            _global: 'settings_input_layout'
+                        },
+                        type: 'Label',
+                        required: true,
+                        properties: {
+                            title: 'uploadPolicyRequestId',
+                            span: 8,
+                            align: 'right'
+                        },
+                        blocks: [
+                            {
+                                id: 'block_properties_uploadPolicyRequestId_text',
+                                type: 'Markdown',
+                                style: {
+                                    color: '#8c8c8c'
+                                },
+                                properties: {
+                                    content: 'Id of an upload-policy request that defines to which storage bucket and how the file should be uploaded.'
+                                }
+                            }
+                        ]
+                    }
+                }
+            },
+            showUploadList: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether to show default upload list.'
+            },
+            singleFile: {
+                type: 'boolean',
+                default: false,
+                description: 'Only allow a single file to be uploaded. Only one file can be selected in the prompt.'
+            },
+            theme: uploadTheme
+        }
+    }
+};

package/dist/blocks/UploadDragger/UploadDragger.js

@@ -0,0 +1,124 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useEffect } from 'react';
+import { Upload as AntdUpload, theme as antdTheme } from 'antd';
+import { cn, renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import useFileList from '../utils/useFileList.js';
+import getEmitFileContent from '../utils/getEmitFileContent.js';
+import getUploadRequest from '../utils/getUploadRequest.js';
+import getOnPaste from '../utils/getOnPaste.js';
+import withTheme from '../../withTheme.js';
+import './style.module.css';
+const { Dragger } = AntdUpload;
+const UploadDragger = ({ blockId, classNames = {}, methods, properties, styles = {}, value })=>{
+    const [state, loadFileList, setFileList, removeFile, setValue] = useFileList({
+        properties,
+        methods,
+        value
+    });
+    const emitFileContent = properties.emitFileContent === true;
+    const uploadRequest = emitFileContent ? getEmitFileContent({
+        methods,
+        setFileList
+    }) : getUploadRequest({
+        methods,
+        setFileList
+    });
+    const onPaste = getOnPaste({
+        uploadRequest,
+        properties
+    });
+    useEffect(()=>{
+        if (!emitFileContent) {
+            methods.registerEvent({
+                name: '__getUploadPolicy',
+                actions: [
+                    {
+                        id: '__getUploadPolicy',
+                        type: 'Request',
+                        params: [
+                            properties.uploadPolicyRequestId
+                        ]
+                    }
+                ]
+            });
+        }
+    }, []);
+    useEffect(()=>{
+        if (JSON.stringify(value) !== JSON.stringify(state)) {
+            setValue(value);
+        }
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        methods.registerMethod('uploadFromPaste', async ()=>{
+            await onPaste();
+        });
+    }, [
+        onPaste
+    ]);
+    const { token } = antdTheme.useToken();
+    const height = type.isNone(properties.height) ? token.controlHeight : properties.height;
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: cn('lf-upload-dragger', classNames.element),
+        onPaste: onPaste,
+        style: {
+            '--lf-dragger-height': type.isNumber(height) ? `${height}px` : height,
+            ...styles.element
+        }
+    }, /*#__PURE__*/ React.createElement(Dragger, {
+        accept: properties.accept ?? '*',
+        beforeUpload: loadFileList,
+        classNames: {
+            trigger: classNames.trigger,
+            list: classNames.list,
+            item: classNames.item
+        },
+        styles: {
+            root: {
+                display: 'block'
+            },
+            trigger: styles.trigger,
+            list: styles.list,
+            item: styles.item
+        },
+        customRequest: uploadRequest,
+        disabled: properties.disabled,
+        fileList: state.fileList,
+        maxCount: properties.maxCount,
+        multiple: !properties.singleFile,
+        onRemove: removeFile,
+        showUploadList: properties.showUploadList,
+        onChange: ()=>{
+            // emitFileContent triggers onChange itself once the content is read,
+            // so the file object in the event payload carries the base64 content.
+            if (!emitFileContent) {
+                methods.triggerEvent({
+                    name: 'onChange'
+                });
+            }
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: cn(classNames.hint),
+        style: styles.hint
+    }, renderHtml({
+        html: properties.title ?? 'Click or drag to add a file.',
+        methods
+    }))));
+};
+export default withBlockDefaults(withTheme('Upload', UploadDragger));

package/dist/blocks/UploadDragger/meta.js

@@ -0,0 +1,142 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import uploadTheme from '../../schemas/uploadTheme.js';
+export default {
+    category: 'input',
+    icons: [],
+    valueType: 'object',
+    cssKeys: {
+        element: 'The outer dragger box (height container, background, border, shadow).',
+        hint: 'The hint content shown inside the drop area.',
+        trigger: 'The antd drag surface (.ant-upload-drag). Target for hover/drag-hover border and background.',
+        list: 'The uploaded file list container.',
+        item: 'Each uploaded file row in the list.'
+    },
+    events: {
+        onBeforeUpload: {
+            description: 'Triggered before a file is uploaded. If an action throws, the upload is cancelled.',
+            event: {
+                file: 'The file metadata (name, type, size, lastModified, uid, url).'
+            }
+        },
+        onChange: {
+            description: 'Triggered when the upload state is changing. With emitFileContent, triggered once the file content has been read, with the block value ({ file, fileList }) as the event, where file includes the base64 content.'
+        },
+        onProgress: {
+            description: 'Triggered when the upload state is in progress.',
+            event: {
+                file: 'The file being uploaded.',
+                fileList: 'The full list of files.'
+            }
+        },
+        onSuccess: {
+            description: 'Triggered when the upload state is done uploading.',
+            event: {
+                file: 'The uploaded file.',
+                fileList: 'The full list of files.'
+            }
+        },
+        onRemove: {
+            description: 'Triggered when the upload has been removed.',
+            event: {
+                file: 'The removed file.',
+                fileList: 'The full list of files.'
+            }
+        },
+        onError: {
+            description: 'Triggered when the upload has failed.',
+            event: {
+                file: 'The file that failed.',
+                fileList: 'The full list of files.'
+            }
+        }
+    },
+    properties: {
+        type: 'object',
+        properties: {
+            height: {
+                type: [
+                    'number',
+                    'string'
+                ],
+                description: 'Height of the dragger area. A number is applied in pixels; a string is passed through as a CSS length (e.g. "300px", "50vh"). Defaults to the antd `controlHeight` theme token. If `style.element.height` is set, it overrides this.'
+            },
+            title: {
+                type: 'string',
+                description: 'Title of the file input to be displayed on the draggable area.'
+            },
+            accept: {
+                type: 'string',
+                description: 'File types accepted by the input. See html file type input accept property at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept.'
+            },
+            disabled: {
+                type: 'boolean',
+                description: 'Disable the file input.'
+            },
+            emitFileContent: {
+                type: 'boolean',
+                default: false,
+                description: 'Instead of uploading, read the file and emit { name, size, type, content } — content a base64 string — as the block value and onChange event. Use with a CallAPI action to store the file with a server-side write request (e.g. AwsS3PutObject). Replaces uploadPolicyRequestId.'
+            },
+            maxCount: {
+                type: 'number',
+                description: 'Maximum number of files that can be uploaded.'
+            },
+            uploadPolicyRequestId: {
+                type: 'string',
+                description: 'Id of an upload-policy request (e.g. AwsS3PresignedPostPolicy, GcsSignedPostPolicy, AzureBlobUploadSas) that defines to which storage bucket and how the file should be uploaded. Required unless emitFileContent is true.',
+                docs: {
+                    displayType: 'manual',
+                    block: {
+                        id: 'block_properties_uploadPolicyRequestId',
+                        layout: {
+                            _global: 'settings_input_layout'
+                        },
+                        type: 'Label',
+                        required: true,
+                        properties: {
+                            title: 'uploadPolicyRequestId',
+                            span: 8,
+                            align: 'right'
+                        },
+                        blocks: [
+                            {
+                                id: 'block_properties_uploadPolicyRequestId_text',
+                                type: 'Markdown',
+                                style: {
+                                    color: '#8c8c8c'
+                                },
+                                properties: {
+                                    content: 'Id of an upload-policy request that defines to which storage bucket and how the file should be uploaded.'
+                                }
+                            }
+                        ]
+                    }
+                }
+            },
+            showUploadList: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether to show default upload list.'
+            },
+            singleFile: {
+                type: 'boolean',
+                default: false,
+                description: 'Only allow a single file to be uploaded. Only one file can be selected in the prompt.'
+            },
+            theme: uploadTheme
+        }
+    }
+};

package/dist/blocks/UploadDragger/style.module.css

@@ -0,0 +1,30 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@layer components {
+  /* Height applies to the drop zone, not the outer wrapper, so the file list
+     (rendered as a sibling of `.ant-upload-drag` inside the Dragger root) can
+     flow inline below it instead of overflowing a fixed-height container. */
+  :global(.lf-upload-dragger .ant-upload-drag) {
+    height: var(--lf-dragger-height);
+  }
+  /* antd v6 applies `padding: token.padding` to `.ant-upload-drag .ant-upload`,
+     which overflows the drag area when the wrapper height is small. Scope the
+     override to this block and let users add padding via style.hint. */
+  :global(.lf-upload-dragger .ant-upload-drag .ant-upload) {
+    padding: 0;
+  }
+}

package/dist/blocks/UploadPhoto/UploadPhoto.js

@@ -0,0 +1,126 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useEffect, useState } from 'react';
+import { cn, renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { Upload as AntdUpload } from 'antd';
+import useFileList from '../utils/useFileList.js';
+import getEmitFileContent from '../utils/getEmitFileContent.js';
+import getUploadRequest from '../utils/getUploadRequest.js';
+import withTheme from '../../withTheme.js';
+const UploadPhoto = ({ blockId, classNames = {}, components: { Icon }, events, methods, properties, styles = {}, value })=>{
+    const [state, loadFileList, setFileList, removeFile, setValue] = useFileList({
+        properties,
+        methods,
+        value
+    });
+    const [loading, setLoading] = useState(false);
+    const emitFileContent = properties.emitFileContent === true;
+    const uploadRequest = emitFileContent ? getEmitFileContent({
+        methods,
+        setFileList,
+        setLoading
+    }) : getUploadRequest({
+        methods,
+        setFileList,
+        setLoading
+    });
+    useEffect(()=>{
+        methods.setValue({
+            file: null,
+            fileList: []
+        });
+        if (!emitFileContent) {
+            methods.registerEvent({
+                name: '__getUploadPolicy',
+                actions: [
+                    {
+                        id: '__getUploadPolicy',
+                        type: 'Request',
+                        params: [
+                            properties.uploadPolicyRequestId
+                        ]
+                    }
+                ]
+            });
+        }
+    }, []);
+    useEffect(()=>{
+        if (JSON.stringify(value) !== JSON.stringify(state)) {
+            setValue(value);
+        }
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: cn('lf-upload-photo', classNames.element),
+        style: styles.element
+    }, /*#__PURE__*/ React.createElement(AntdUpload, {
+        accept: "image/*",
+        beforeUpload: loadFileList,
+        classNames: {
+            trigger: classNames.trigger,
+            list: classNames.list,
+            item: classNames.item
+        },
+        styles: {
+            trigger: styles.trigger,
+            list: styles.list,
+            item: styles.item
+        },
+        customRequest: uploadRequest,
+        disabled: properties.disabled,
+        fileList: state.fileList,
+        listType: "picture-card",
+        maxCount: properties.maxCount,
+        multiple: !properties.singleFile,
+        onRemove: removeFile,
+        showUploadList: properties.showUploadList,
+        onChange: ()=>{
+            // emitFileContent triggers onChange itself once the content is read,
+            // so the file object in the event payload carries the base64 content.
+            if (!emitFileContent) {
+                methods.triggerEvent({
+                    name: 'onChange'
+                });
+            }
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "lf-upload-photo-content"
+    }, /*#__PURE__*/ React.createElement(Icon, {
+        blockId: `${blockId}_icon`,
+        classNames: {
+            element: cn('lf-upload-photo-icon', classNames.icon)
+        },
+        events: events,
+        properties: {
+            name: loading ? 'AiOutlineLoading' : 'AiOutlineCamera',
+            size: 24
+        },
+        styles: {
+            element: styles.icon
+        }
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: cn('lf-upload-photo-title', classNames.title),
+        style: {
+            marginTop: 8,
+            ...styles.title
+        }
+    }, renderHtml({
+        html: properties.title ?? 'Upload image',
+        methods
+    })))));
+};
+export default withBlockDefaults(withTheme('Upload', UploadPhoto));