@lowdefy/plugin-aws 4.1.0 → 4.2.1

package/dist/blocks/S3Download/S3Download.js

@@ -0,0 +1,70 @@
+/*
+  Copyright 2020-2024 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 } from 'antd';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+const downloadFile = async ({ file, methods })=>{
+    const s3DownloadPolicy = await methods.triggerEvent({
+        name: '__getS3DownloadPolicy',
+        event: {
+            file
+        }
+    });
+    window.open(s3DownloadPolicy?.responses?.__getS3DownloadPolicy?.response?.[0]);
+};
+const S3Download = ({ blockId, methods, properties })=>{
+    useEffect(()=>{
+        methods.registerEvent({
+            name: '__getS3DownloadPolicy',
+            actions: [
+                {
+                    id: '__getS3DownloadPolicy',
+                    type: 'Request',
+                    params: [
+                        properties.s3GetPolicyRequestId
+                    ]
+                }
+            ]
+        });
+    }, []);
+    return /*#__PURE__*/ React.createElement(Upload, {
+        id: blockId,
+        className: methods.makeCssClass([
+            properties.style
+        ]),
+        fileList: properties.fileList ?? [],
+        onPreview: async (file)=>await downloadFile({
+                file,
+                methods
+            }),
+        showUploadList: {
+            showRemoveIcon: false,
+            showDownloadIcon: true
+        },
+        onDownload: async (file)=>await downloadFile({
+                file,
+                methods
+            })
+    });
+};
+S3Download.defaultProps = blockDefaultProps;
+S3Download.meta = {
+    category: 'display',
+    icons: [],
+    styles: [
+        'blocks/S3Download/style.less'
+    ]
+};
+export default S3Download;

package/dist/blocks/S3Download/schema.json

@@ -0,0 +1,85 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "required": ["s3GetPolicyRequestId"],
+    "properties": {
+      "fileList": {
+        "type": "array",
+        "description": "List of files to be downloaded. If files were uploaded using an S3Upload block, the fileList value can just be mapped to this field.",
+        "items": {
+          "type": "object",
+          "required": ["key"],
+          "properties": {
+            "key": {
+              "type": "string",
+              "description": "S3 file key."
+            },
+            "lastModified": {
+              "type": "string",
+              "description": "File last modified date."
+            },
+            "name": {
+              "type": "string",
+              "description": "File name."
+            },
+            "size": {
+              "type": "number",
+              "description": "File size in bytes."
+            },
+            "type": {
+              "type": "string",
+              "description": "File MIME type."
+            }
+          }
+        }
+      },
+      "s3GetPolicyRequestId": {
+        "type": "string",
+        "description": "Id of a request of type s3GetPolicyRequestId that defines to which S3 bucket and what file should be downloaded.",
+        "docs": {
+          "displayType": "manual",
+          "block": {
+            "id": "block_properties_s3GetPolicyRequestId",
+            "layout": { "_global": "settings_input_layout" },
+            "type": "Label",
+            "required": true,
+            "properties": {
+              "title": "s3GetPolicyRequestId",
+              "span": 8,
+              "align": "right"
+            },
+            "blocks": [
+              {
+                "id": "block_properties_s3GetPolicyRequestId_text",
+                "type": "Markdown",
+                "style": {
+                  "color": "#8c8c8c"
+                },
+                "properties": {
+                  "content": "Id of a request of type AwsS3PresignedGetPolicy that defines to which S3 bucket and what file should be downloaded."
+                }
+              }
+            ]
+          }
+        }
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to download component.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "properties": {
+      "onChange": {
+        "type": "array",
+        "description": "Triggered when the upload state is changing."
+      }
+    }
+  }
+}

package/dist/blocks/S3Download/style.less

@@ -0,0 +1,17 @@
+/*
+  Copyright 2020-2024 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 'antd/lib/upload/style/index.less';

package/dist/blocks/S3UploadButton/S3UploadButton.js

@@ -12,146 +12,21 @@
   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 React, { useEffect } from 'react';
 import { blockDefaultProps } from '@lowdefy/block-utils';
-import { get } from '@lowdefy/helpers';
 import { Button } from '@lowdefy/blocks-antd/blocks';
 import { Upload } from 'antd';
-const makeFileValue = (file, s3Parameters)=>{
-    const { lastModified, name, percent, size, status, type, uid } = file;
-    const { bucket, key } = get(s3Parameters, uid, {
-        default: {}
-    });
-    return {
-        bucket,
-        key,
-        lastModified,
-        name,
-        percent,
-        size,
-        status,
-        type,
-        uid
-    };
-};
-const makeOnChangeValue = (s3Parameters, changeEvent)=>{
-    const { file, fileList } = changeEvent;
-    return {
-        file: makeFileValue(file, s3Parameters),
-        fileList: fileList.map((fl)=>makeFileValue(fl, s3Parameters))
-    };
-};
-const getDisabled = ({ properties, value })=>{
-    if (properties.disabled) return true;
-    return properties.singleFile && value && (value.fileList || []).length >= 1;
-};
-const getCustomRequest = ({ methods, setS3Parameters })=>async ({ file, onError, onProgress, onSuccess })=>{
-        let meta;
-        try {
-            const { name, size, type, uid } = file;
-            const s3PostPolicyResponse = await methods.triggerEvent({
-                name: '__getS3PostPolicy',
-                event: {
-                    filename: name,
-                    size,
-                    type,
-                    uid
-                }
-            });
-            if (s3PostPolicyResponse.success !== true) {
-                throw new Error('S3 post policy request error.');
-            }
-            const { url, fields } = s3PostPolicyResponse.responses.__getS3PostPolicy.response[0];
-            const { bucket, key } = fields;
-            meta = {
-                bucket,
-                key,
-                filename: name,
-                size,
-                type,
-                uid
-            };
-            setS3Parameters((prevState)=>{
-                const ret = {
-                    ...prevState
-                };
-                ret[uid] = {
-                    bucket,
-                    key
-                };
-                return ret;
-            });
-            // Set 20 % progress on policy is acquired else user waits to long before progress is reported
-            onProgress({
-                percent: 20
-            });
-            // Create FormData with all required fields in S3 policy
-            const formData = new FormData();
-            Object.keys(fields).forEach((field)=>{
-                formData.append(field, fields[field]);
-            });
-            // file needs to be the last field in the form
-            formData.append('file', file);
-            const xhr = new XMLHttpRequest();
-            xhr.upload.onprogress = (event)=>{
-                if (event.lengthComputable) {
-                    onProgress({
-                        percent: event.loaded / event.total * 80 + 20
-                    });
-                }
-            };
-            xhr.addEventListener('error', async (event)=>{
-                await methods.triggerEvent({
-                    name: 'onError',
-                    event: {
-                        meta,
-                        event
-                    }
-                });
-                onError(event);
-            });
-            xhr.addEventListener('load', async (event)=>{
-                await methods.triggerEvent({
-                    name: 'onSuccess',
-                    event: {
-                        meta,
-                        event
-                    }
-                });
-                onSuccess(event);
-            });
-            xhr.addEventListener('loadend', async (event)=>{
-                await methods.triggerEvent({
-                    name: 'onDone',
-                    event: {
-                        meta,
-                        event
-                    }
-                });
-            });
-            xhr.open('post', url);
-            xhr.send(formData);
-        } catch (error) {
-            console.error(error);
-            await methods.triggerEvent({
-                name: 'onError',
-                event: {
-                    meta,
-                    error
-                }
-            });
-            onError(error);
-        }
-    };
+import useFileList from '../utils/useFileList.js';
+import getS3Upload from '../utils/getS3Upload.js';
 const S3UploadButtonBlock = ({ blockId, components, events, methods, properties, value })=>{
-    // Use state here because we need to set s3 bucket and key as block value
-    // The customRequest function does not have access to the updated block value,
-    // so it cannot set the value directly. customRequest sets the parameters to s3Parameters state,
-    // and then onChange updates the block value.
-    const [s3Parameters, setS3Parameters] = useState(value);
-    const customRequest = getCustomRequest({
+    const [state, loadFileList, setFileList, removeFile, setValue] = useFileList({
+        properties,
+        methods,
+        value
+    });
+    const s3UploadRequest = getS3Upload({
         methods,
-        setS3Parameters
+        setFileList
     });
     useEffect(()=>{
         methods.setValue({
@@ -171,19 +46,25 @@ const S3UploadButtonBlock = ({ blockId, components, events, methods, properties,
             ]
         });
     }, []);
-    const disabled = getDisabled({
-        properties,
+    useEffect(()=>{
+        if (JSON.stringify(value) !== JSON.stringify(state)) {
+            setValue(value);
+        }
+    }, [
         value
-    });
+    ]);
     return /*#__PURE__*/ React.createElement(Upload, {
-        accept: properties.accept,
-        customRequest: customRequest,
-        disabled: disabled,
+        accept: properties.accept ?? '*',
+        beforeUpload: loadFileList,
+        customRequest: s3UploadRequest,
+        disabled: properties.disabled,
+        fileList: state.fileList,
         id: blockId,
+        maxCount: properties.maxCount,
         multiple: !properties.singleFile,
+        onRemove: removeFile,
         showUploadList: properties.showUploadList,
-        onChange: (event)=>{
-            methods.setValue(makeOnChangeValue(s3Parameters, event));
+        onChange: ()=>{
             methods.triggerEvent({
                 name: 'onChange'
             });
@@ -193,7 +74,7 @@ const S3UploadButtonBlock = ({ blockId, components, events, methods, properties,
         components: components,
         events: events,
         properties: {
-            disabled,
+            disabled: properties.disabled,
             icon: 'AiOutlineUpload',
             title: 'Upload',
             type: 'default',

package/dist/blocks/S3UploadButton/schema.json

@@ -24,6 +24,10 @@
         "type": "boolean",
         "description": "Disable the file input."
       },
+      "maxCount": {
+        "type": "number",
+        "description": "Maximum number of files that can be uploaded."
+      },
       "s3PostPolicyRequestId": {
         "type": "string",
         "description": "Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 bucket and how the file should be uploaded.",
@@ -63,7 +67,7 @@
       "singleFile": {
         "type": "boolean",
         "default": false,
-        "description": "Only allow a single file to be uploaded. Only one file can be selected in the prompt and the upload button is disabled after a file is uploaded."
+        "description": "Only allow a single file to be uploaded. Only one file can be selected in the prompt."
       }
     }
   },

package/dist/blocks/S3UploadDragger/S3UploadDragger.js

@@ -0,0 +1,101 @@
+/*
+  Copyright 2020-2024 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 } from 'antd';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import useFileList from '../utils/useFileList.js';
+import getS3Upload from '../utils/getS3Upload.js';
+import getOnPaste from '../utils/getOnPaste.js';
+const { Dragger } = Upload;
+const S3UploadDragger = ({ blockId, methods, properties, value })=>{
+    const [state, loadFileList, setFileList, removeFile, setValue] = useFileList({
+        properties,
+        methods,
+        value
+    });
+    const s3UploadRequest = getS3Upload({
+        methods,
+        setFileList
+    });
+    const onPaste = getOnPaste({
+        s3UploadRequest,
+        properties
+    });
+    useEffect(()=>{
+        methods.registerEvent({
+            name: '__getS3PostPolicy',
+            actions: [
+                {
+                    id: '__getS3PostPolicy',
+                    type: 'Request',
+                    params: [
+                        properties.s3PostPolicyRequestId
+                    ]
+                }
+            ]
+        });
+    }, []);
+    useEffect(()=>{
+        if (JSON.stringify(value) !== JSON.stringify(state)) {
+            setValue(value);
+        }
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        methods.registerMethod('uploadFromPaste', async ()=>{
+            await onPaste();
+        });
+    }, [
+        onPaste
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        onPaste: onPaste
+    }, /*#__PURE__*/ React.createElement(Dragger, {
+        accept: properties.accept ?? '*',
+        beforeUpload: loadFileList,
+        className: methods.makeCssClass([
+            properties.style
+        ]),
+        customRequest: s3UploadRequest,
+        disabled: properties.disabled,
+        fileList: state.fileList,
+        maxCount: properties.maxCount,
+        multiple: !properties.singleFile,
+        onRemove: removeFile,
+        showUploadList: properties.showUploadList,
+        onChange: ()=>{
+            methods.triggerEvent({
+                name: 'onChange'
+            });
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "ant-upload-hint"
+    }, renderHtml({
+        html: properties.title ?? 'Click or drag to add a file.',
+        methods
+    }))));
+};
+S3UploadDragger.defaultProps = blockDefaultProps;
+S3UploadDragger.meta = {
+    valueType: 'object',
+    category: 'input',
+    icons: [],
+    styles: [
+        'blocks/S3UploadDragger/style.less'
+    ]
+};
+export default S3UploadDragger;

package/dist/blocks/S3UploadDragger/schema.json

@@ -0,0 +1,81 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "required": ["s3PostPolicyRequestId"],
+    "properties": {
+      "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."
+      },
+      "maxCount": {
+        "type": "number",
+        "description": "Maximum number of files that can be uploaded."
+      },
+      "s3PostPolicyRequestId": {
+        "type": "string",
+        "description": "Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 bucket and how the file should be uploaded.",
+        "docs": {
+          "displayType": "manual",
+          "block": {
+            "id": "block_properties_s3PostPolicyRequestId",
+            "layout": { "_global": "settings_input_layout" },
+            "type": "Label",
+            "required": true,
+            "properties": {
+              "title": "s3PostPolicyRequestId",
+              "span": 8,
+              "align": "right"
+            },
+            "blocks": [
+              {
+                "id": "block_properties_s3PostPolicyRequestId_text",
+                "type": "Markdown",
+                "style": {
+                  "color": "#8c8c8c"
+                },
+                "properties": {
+                  "content": "Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 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."
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to draggable area.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "properties": {
+      "onChange": {
+        "type": "array",
+        "description": "Triggered when the upload state is changing."
+      }
+    }
+  }
+}

package/dist/blocks/S3UploadDragger/style.less

@@ -0,0 +1,17 @@
+/*
+  Copyright 2020-2024 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 'antd/lib/upload/style/index.less';

package/dist/blocks/S3UploadPhoto/S3UploadPhoto.js

@@ -13,144 +13,20 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useEffect, useState } from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-import { get } from '@lowdefy/helpers';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
 import { Upload } from 'antd';
-const makeFileValue = (file, s3Parameters)=>{
-    const { lastModified, name, percent, size, status, type, uid } = file;
-    const { bucket, key } = get(s3Parameters, uid, {
-        default: {}
-    });
-    return {
-        bucket,
-        key,
-        lastModified,
-        name,
-        percent,
-        size,
-        status,
-        type,
-        uid
-    };
-};
-const makeOnChangeValue = (s3Parameters, changeEvent)=>{
-    const { file, fileList } = changeEvent;
-    return {
-        file: makeFileValue(file, s3Parameters),
-        fileList: fileList.map((fl)=>makeFileValue(fl, s3Parameters))
-    };
-};
-const getCustomRequest = ({ methods, setS3Parameters, setLoading })=>async ({ file, onError, onProgress, onSuccess })=>{
-        let meta;
-        try {
-            setLoading(true);
-            const { name, size, type, uid } = file;
-            if (size > 1024 * 1024 * 10) throw new Error('File cannot exceed 10mb.');
-            const s3PostPolicyResponse = await methods.triggerEvent({
-                name: '__getS3PostPolicy',
-                event: {
-                    filename: name,
-                    size,
-                    type,
-                    uid
-                }
-            });
-            if (s3PostPolicyResponse.success !== true) {
-                throw new Error('S3 post policy request error.');
-            }
-            const { url, fields } = s3PostPolicyResponse.responses.__getS3PostPolicy.response[0];
-            const { bucket, key } = fields;
-            meta = {
-                bucket,
-                key,
-                filename: name,
-                size,
-                type,
-                uid
-            };
-            setS3Parameters((prevState)=>{
-                const ret = {
-                    ...prevState
-                };
-                ret[uid] = {
-                    bucket,
-                    key
-                };
-                return ret;
-            });
-            // Set 20 % progress on policy is acquired else user waits to long before progress is reported
-            onProgress({
-                percent: 20
-            });
-            // Create FormData with all required fields in S3 policy
-            const formData = new FormData();
-            Object.keys(fields).forEach((field)=>{
-                formData.append(field, fields[field]);
-            });
-            // file needs to be the last field in the form
-            formData.append('file', file);
-            const xhr = new XMLHttpRequest();
-            xhr.upload.onprogress = (event)=>{
-                if (event.lengthComputable) {
-                    onProgress({
-                        percent: event.loaded / event.total * 80 + 20
-                    });
-                }
-            };
-            xhr.addEventListener('error', async (event)=>{
-                await methods.triggerEvent({
-                    name: 'onError',
-                    event: {
-                        meta,
-                        event
-                    }
-                });
-                onError(event);
-            });
-            xhr.addEventListener('load', async (event)=>{
-                await methods.triggerEvent({
-                    name: 'onSuccess',
-                    event: {
-                        meta,
-                        event
-                    }
-                });
-                onSuccess(event);
-            });
-            xhr.addEventListener('loadend', async (event)=>{
-                await methods.triggerEvent({
-                    name: 'onDone',
-                    event: {
-                        meta,
-                        event
-                    }
-                });
-                setLoading(false);
-            });
-            xhr.open('post', url);
-            xhr.send(formData);
-        } catch (error) {
-            console.error(error);
-            await methods.triggerEvent({
-                name: 'onError',
-                event: {
-                    meta,
-                    error
-                }
-            });
-            onError(error);
-        }
-    };
+import useFileList from '../utils/useFileList.js';
+import getS3Upload from '../utils/getS3Upload.js';
 const S3UploadPhoto = ({ blockId, components: { Icon }, events, methods, properties, value })=>{
-    // Use state here because we need to set s3 bucket and key as block value
-    // The customRequest function does not have access to the updated block value,
-    // so it cannot set the value directly. customRequest sets the parameters to s3Parameters state,
-    // and then onChange updates the block value.
-    const [s3Parameters, setS3Parameters] = useState(value);
+    const [state, loadFileList, setFileList, removeFile, setValue] = useFileList({
+        properties,
+        methods,
+        value
+    });
     const [loading, setLoading] = useState(false);
-    const customRequest = getCustomRequest({
+    const s3UploadRequest = getS3Upload({
         methods,
-        setS3Parameters,
+        setFileList,
         setLoading
     });
     useEffect(()=>{
@@ -171,22 +47,36 @@ const S3UploadPhoto = ({ blockId, components: { Icon }, events, methods, propert
             ]
         });
     }, []);
+    useEffect(()=>{
+        if (JSON.stringify(value) !== JSON.stringify(state)) {
+            setValue(value);
+        }
+    }, [
+        value
+    ]);
     return /*#__PURE__*/ React.createElement(Upload, {
-        listType: "picture-card",
-        className: "avatar-uploader",
         accept: "image/*",
-        customRequest: customRequest,
-        maxCount: 1,
+        beforeUpload: loadFileList,
+        className: "avatar-uploader",
+        customRequest: s3UploadRequest,
+        disabled: properties.disabled,
+        fileList: state.fileList,
         id: blockId,
+        listType: "picture-card",
+        maxCount: properties.maxCount,
         multiple: !properties.singleFile,
+        onRemove: removeFile,
         showUploadList: properties.showUploadList,
-        onChange: (event)=>{
-            methods.setValue(makeOnChangeValue(s3Parameters, event));
+        onChange: ()=>{
             methods.triggerEvent({
                 name: 'onChange'
             });
         }
-    }, /*#__PURE__*/ React.createElement("div", null, loading ? /*#__PURE__*/ React.createElement(Icon, {
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: methods.makeCssClass([
+            properties.style
+        ])
+    }, loading ? /*#__PURE__*/ React.createElement(Icon, {
         blockId: `${blockId}_icon`,
         events: events,
         properties: {
@@ -204,7 +94,10 @@ const S3UploadPhoto = ({ blockId, components: { Icon }, events, methods, propert
         style: {
             marginTop: 8
         }
-    }, "Upload a photo")));
+    }, renderHtml({
+        html: properties.title ?? 'Upload image',
+        methods
+    }))));
 };
 S3UploadPhoto.defaultProps = blockDefaultProps;
 S3UploadPhoto.meta = {

package/dist/blocks/S3UploadPhoto/schema.json

@@ -4,6 +4,19 @@
     "type": "object",
     "required": ["s3PostPolicyRequestId"],
     "properties": {
+      "title": {
+        "type": "string",
+        "description": "Title of the file input to be displayed instead of 'Upload image'.",
+        "default": "Upload image"
+      },
+      "disabled": {
+        "type": "boolean",
+        "description": "Disable the file input."
+      },
+      "maxCount": {
+        "type": "number",
+        "description": "Maximum number of files that can be uploaded."
+      },
       "s3PostPolicyRequestId": {
         "type": "string",
         "description": "Id of a request of type AwsS3PresignedPostPolicy that defines to which S3 bucket and how the file should be uploaded.",
@@ -43,7 +56,14 @@
       "singleFile": {
         "type": "boolean",
         "default": false,
-        "description": "Only allow a single file to be uploaded. Only one file can be selected in the prompt and the upload button is disabled after a file is uploaded."
+        "description": "Only allow a single file to be uploaded. Only one file can be selected in the prompt."
+      },
+      "style": {
+        "type": "object",
+        "description": "Css style object to applied to draggable area.",
+        "docs": {
+          "displayType": "yaml"
+        }
       }
     }
   },
@@ -53,10 +73,6 @@
       "onChange": {
         "type": "array",
         "description": "Triggered when the upload state is changing."
-      },
-      "onClick": {
-        "type": "array",
-        "description": "Triggered when the upload button is clicked."
       }
     }
   }

package/dist/blocks/utils/getOnPaste.js

@@ -0,0 +1,48 @@
+/*
+  Copyright 2020-2024 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.
+*/ const getFileFromEvent = async (event)=>{
+    const items = event.clipboardData.items;
+    for (const item of items){
+        if (item.kind === 'file') {
+            return item.getAsFile();
+        }
+    }
+};
+const getFileFromNavigator = async ()=>{
+    const items = await navigator.clipboard.read();
+    for (const item of items){
+        for (const type of item.types){
+            if (type === 'image/png' || type === 'image/jpeg') {
+                const blob = await item.getType(type);
+                return new File([
+                    blob
+                ], 'clipboard.png', {
+                    type: blob.type
+                });
+            }
+        }
+    }
+};
+const getOnPaste = ({ s3UploadRequest, properties })=>async (event)=>{
+        event?.preventDefault?.();
+        if (properties.disabled) return;
+        const file = event ? await getFileFromEvent(event) : await getFileFromNavigator();
+        if (!file) return;
+        file.uid = `${properties.fileName ?? file.name ?? 'clipboard'}-${Date.now()}`;
+        await s3UploadRequest({
+            file
+        });
+    };
+export default getOnPaste;

package/dist/blocks/utils/getS3Upload.js

@@ -0,0 +1,81 @@
+/*
+  Copyright 2020-2024 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.
+*/ const getS3Upload = ({ methods, setFileList, setLoading = ()=>null })=>async ({ file })=>{
+        if (!file) {
+            console.warn('File is undefined in useS3Upload');
+            return;
+        }
+        try {
+            setLoading(true);
+            const { lastModified, name, size, type, uid } = file;
+            const s3PostPolicyResponse = await methods.triggerEvent({
+                name: '__getS3PostPolicy',
+                event: {
+                    file: {
+                        name,
+                        lastModified,
+                        size,
+                        type,
+                        uid
+                    }
+                }
+            });
+            if (s3PostPolicyResponse.success !== true) {
+                throw new Error('S3 post policy request error.');
+            }
+            const { url, fields = {} } = s3PostPolicyResponse.responses.__getS3PostPolicy.response[0];
+            const { bucket, key } = fields;
+            file.bucket = bucket;
+            file.key = key;
+            file.percent = 20;
+            const formData = new FormData();
+            Object.keys(fields).forEach((field)=>{
+                formData.append(field, fields[field]);
+            });
+            formData.append('file', file);
+            const xhr = new XMLHttpRequest();
+            xhr.upload.onprogress = async (event)=>{
+                if (event.lengthComputable) {
+                    await setFileList({
+                        event: 'onProgress',
+                        file,
+                        percent: event.loaded / event.total * 80 + 20
+                    });
+                }
+            };
+            xhr.addEventListener('error', async ()=>{
+                await setFileList({
+                    event: 'onError',
+                    file
+                });
+            });
+            xhr.addEventListener('loadend', async ()=>{
+                await setFileList({
+                    event: 'onSuccess',
+                    file
+                });
+                setLoading(false);
+            });
+            xhr.open('post', url);
+            xhr.send(formData);
+        } catch (error) {
+            console.error(error);
+            await setFileList({
+                event: 'onError',
+                file
+            });
+        }
+    };
+export default getS3Upload;

package/dist/blocks/utils/useFileList.js

@@ -0,0 +1,115 @@
+/*
+  Copyright 2020-2024 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 { useState } from 'react';
+import { type } from '@lowdefy/helpers';
+const useFileList = ({ properties, methods, value = {} })=>{
+    const checkedValue = (value)=>{
+        let file = type.isObject(value?.file) ? value.file : null;
+        if (!file && type.isObject(value?.fileList?.[0])) {
+            file = value.fileList[0];
+        }
+        const fileList = type.isArray(value?.fileList) ? value.fileList : [];
+        if (properties.singleFile === true) {
+            fileList.splice(1);
+        }
+        if (type.isInt(properties.maxCount)) {
+            fileList.splice(properties.maxCount);
+        }
+        return {
+            file,
+            fileList
+        };
+    };
+    const [state, setState] = useState(checkedValue(value));
+    const setValue = (stateValue)=>{
+        setState(()=>{
+            return checkedValue(stateValue);
+        });
+    };
+    const setFileList = async ({ event, file, percent })=>{
+        if (!file) {
+            throw new Error('File is undefined in useFileList');
+        }
+        // destruct the file object to avoid the file object being mutated.
+        const { bucket, key, lastModified, name, size, status, type, uid } = file;
+        const fileObj = {
+            bucket,
+            key,
+            lastModified,
+            name,
+            percent: percent ?? file.percent ?? 0,
+            size,
+            status,
+            type,
+            uid,
+            url: file instanceof Blob || file instanceof File ? URL.createObjectURL(file) : null
+        };
+        switch(event){
+            case 'onProgress':
+                fileObj.status = 'uploading';
+                fileObj.percent = percent ?? fileObj.percent;
+                break;
+            case 'onSuccess':
+                fileObj.status = 'done';
+                fileObj.percent = 100;
+                break;
+            case 'onRemove':
+                fileObj.status = 'removed';
+                break;
+            default:
+                fileObj.status = 'error';
+                break;
+        }
+        state.fileList.splice(state.fileList.findIndex((f)=>f.uid === fileObj.uid), 1, fileObj);
+        const nextState = checkedValue({
+            file: fileObj,
+            fileList: state.fileList
+        });
+        await methods.triggerEvent({
+            name: event,
+            event: nextState
+        });
+        setValue(nextState);
+        methods.setValue(nextState);
+    };
+    const loadFileList = (file, nextFiles)=>{
+        if (properties.singleFile === true && nextFiles.filter((f)=>type.isString(f.uid)).length > 1) {
+            return false;
+        }
+        if (type.isInt(properties.maxCount) && nextFiles.filter((f)=>type.isString(f.uid)).length > properties.maxCount) {
+            return false;
+        }
+        setValue({
+            file,
+            fileList: [
+                ...nextFiles,
+                ...state.fileList
+            ]
+        });
+    };
+    const removeFile = (file)=>{
+        state.fileList.splice(state.fileList.findIndex((f)=>f.uid === file.uid), 1);
+        setValue(state);
+        methods.setValue(state);
+    };
+    return [
+        state,
+        loadFileList,
+        setFileList,
+        removeFile,
+        setValue
+    ];
+};
+export default useFileList;

package/dist/blocks.js

@@ -12,5 +12,7 @@
   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.
-*/ export { default as S3UploadButton } from './blocks/S3UploadButton/S3UploadButton.js';
+*/ export { default as S3Download } from './blocks/S3Download/S3Download.js';
+export { default as S3UploadDragger } from './blocks/S3UploadDragger/S3UploadDragger.js';
+export { default as S3UploadButton } from './blocks/S3UploadButton/S3UploadButton.js';
 export { default as S3UploadPhoto } from './blocks/S3UploadPhoto/S3UploadPhoto.js';

package/dist/connections/AwsS3Bucket/AwsS3PresignedPostPolicy/AwsS3PresignedPostPolicy.js

@@ -14,9 +14,10 @@
   limitations under the License.
 */ import AWS from 'aws-sdk';
 import schema from './schema.js';
+import { type } from '@lowdefy/helpers';
 function AwsS3PresignedPostPolicy({ request, connection }) {
     const { accessKeyId, secretAccessKey, region, bucket } = connection;
-    const { acl, conditions, expires, key } = request;
+    const { acl, conditions, expires, key, fields = {} } = request;
     const params = {
         Bucket: bucket,
         Fields: {
@@ -32,6 +33,14 @@ function AwsS3PresignedPostPolicy({ request, connection }) {
     if (acl) {
         params.Fields.acl = acl;
     }
+    if (type.isObject(fields) === false) {
+        throw new Error('properties.fields must be an object.');
+    }
+    Object.keys(fields).forEach((field)=>{
+        if (fields[field]) {
+            params.Fields[field] = fields[field];
+        }
+    });
     const s3 = new AWS.S3({
         accessKeyId,
         secretAccessKey,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/plugin-aws",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "license": "Apache-2.0",
   "description": "",
   "homepage": "https://lowdefy.com",
@@ -40,9 +40,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "4.1.0",
-    "@lowdefy/blocks-antd": "4.1.0",
-    "@lowdefy/helpers": "4.1.0",
+    "@lowdefy/block-utils": "4.2.1",
+    "@lowdefy/blocks-antd": "4.2.1",
+    "@lowdefy/helpers": "4.2.1",
     "antd": "4.24.14",
     "aws-sdk": "2.1459.0",
     "react": "18.2.0",
@@ -50,9 +50,9 @@
   },
   "devDependencies": {
     "@emotion/jest": "11.10.5",
-    "@lowdefy/ajv": "4.1.0",
-    "@lowdefy/block-dev": "4.1.0",
-    "@lowdefy/jest-yaml-transform": "4.1.0",
+    "@lowdefy/ajv": "4.2.1",
+    "@lowdefy/block-dev": "4.2.1",
+    "@lowdefy/jest-yaml-transform": "4.2.1",
     "@swc/cli": "0.1.63",
     "@swc/core": "1.3.99",
     "@swc/jest": "0.2.29",