feat(client): add ability to upload multiple files in UploadBlock

[stelbailey]

No description provided.

[neelneelneel]

Looks good overall, two things:

• The app developer should be able to control if multiple is on/off
• Value isn't set properly when there are multiple files. Users would not be able to access the location of the file in their scripts.

Remember to update the MigrationManager if changing the Block Definition.

[stelbailey]

Hi @neelneelneel ,

Thank you for the feedback! I've added a toggle switch to the options to allow the app developer to turn on/off multiple file uploading. Additionally, I updated the logic to set the value correctly for the file paths. I set the value to be a string of the file locations (separated by commas).

I was also hoping for some clarification on your note about the MigrationManager, I looked around and was not sure what you meant to update within that.

[johbaxter]

@stelbailey So if you make changes to any of the data properties, as for removing properties and or adding new properties that are required.

We have a migration manager that allows you to make structural changes to block definitions, to accommodate for the changes you made to the definition of the Upload Block.

For example, old apps may be on version "0.0.alpha-1" if you had breaking changes for upload blocks that were used in "0.0.alpha-1" you would create a new migration function to directly modify those blocks in the previous version tothe changes you have made to the block.

Ctrl + P for "MigrationManager" and take a look at how it gets called in our "BlocksRenderer"

[stelbailey]

Hey @neelneelneel, I made the changes that you had requested, and I had Arash look at my branch and he thinks it looks good. We didn't find a need to update MigrationManager, but also am looking for feedback regarding that. When you get a chance could you re-review this PR? Thank you!

[stelbailey]

JSON Block:

{
    "queries": {
        "Get File": {
            "id": "Get File",
            "cells": [
                {
                    "id": "4751",
                    "widget": "code",
                    "parameters": {
                        "code": "def getfile():\r\n    file = \"{{singleFile.value}}\"\r\n    return file\r\n\r\ngetfile()",
                        "type": "py"
                    }
                }
            ]
        },
        "Get Files": {
            "id": "Get Files",
            "cells": [
                {
                    "id": "48037",
                    "widget": "code",
                    "parameters": {
                        "code": "def getfiles():\r\n    file = \"{{multipleFiles.value}}\"\r\n    return file\r\n\r\ngetfiles()",
                        "type": "py"
                    }
                }
            ]
        }
    },
    "blocks": {
        "welcome-container-block": {
            "parent": {
                "id": "page-1",
                "slot": "content"
            },
            "slots": {
                "children": {
                    "children": [
                        "container--8419"
                    ],
                    "name": "children"
                }
            },
            "widget": "container",
            "data": {
                "style": {
                    "padding": "4px",
                    "overflow": "hidden",
                    "flexWrap": "wrap",
                    "flexDirection": "column",
                    "display": "flex",
                    "gap": "8px"
                }
            },
            "listeners": {},
            "id": "welcome-container-block"
        },
        "page-1": {
            "slots": {
                "content": {
                    "children": [
                        "welcome-container-block",
                        "container--8140"
                    ],
                    "name": "content"
                }
            },
            "widget": "page",
            "data": {
                "style": {
                    "padding": "24px",
                    "fontFamily": "roboto",
                    "flexDirection": "column",
                    "display": "flex",
                    "gap": "8px"
                }
            },
            "listeners": {
                "onPageLoad": []
            },
            "id": "page-1"
        },
        "container--8419": {
            "id": "container--8419",
            "widget": "container",
            "parent": {
                "id": "welcome-container-block",
                "slot": "children"
            },
            "data": {
                "style": {
                    "display": "flex",
                    "flexDirection": "row",
                    "padding": "4px",
                    "gap": "8px",
                    "flexWrap": "wrap"
                }
            },
            "listeners": {},
            "slots": {
                "children": {
                    "name": "children",
                    "children": [
                        "text--9528",
                        "upload--3790",
                        "button--4158",
                        "text--9466",
                        "text--8939"
                    ]
                }
            }
        },
        "container--8140": {
            "id": "container--8140",
            "widget": "container",
            "parent": {
                "id": "page-1",
                "slot": "content"
            },
            "data": {
                "style": {
                    "display": "flex",
                    "flexDirection": "row",
                    "padding": "4px",
                    "gap": "8px",
                    "flexWrap": "wrap"
                }
            },
            "listeners": {},
            "slots": {
                "children": {
                    "name": "children",
                    "children": [
                        "text--4785",
                        "upload--4152",
                        "button--1231",
                        "text--4218",
                        "text--5636"
                    ]
                }
            }
        },
        "upload--4152": {
            "id": "upload--4152",
            "widget": "upload",
            "parent": {
                "id": "container--8140",
                "slot": "children"
            },
            "data": {
                "style": {
                    "width": "100%",
                    "padding": "4px"
                },
                "value": "",
                "label": "Example Input",
                "hint": "",
                "loading": false,
                "disabled": false,
                "required": false,
                "multifile": true
            },
            "listeners": {
                "onChange": []
            },
            "slots": {
                "content": {
                    "name": "content",
                    "children": []
                }
            }
        },
        "upload--3790": {
            "id": "upload--3790",
            "widget": "upload",
            "parent": {
                "id": "container--8419",
                "slot": "children"
            },
            "data": {
                "style": {
                    "width": "100%",
                    "padding": "4px"
                },
                "value": "",
                "label": "Example Input",
                "hint": "",
                "loading": false,
                "disabled": false,
                "required": false,
                "multifile": false
            },
            "listeners": {
                "onChange": []
            },
            "slots": {
                "content": {
                    "name": "content",
                    "children": []
                }
            }
        },
        "text--9528": {
            "id": "text--9528",
            "widget": "text",
            "parent": {
                "id": "container--8419",
                "slot": "children"
            },
            "data": {
                "style": {
                    "padding": "4px",
                    "whiteSpace": "pre-line",
                    "textOverflow": "ellipsis"
                },
                "text": "Single File Upload (Existing Functionality)",
                "variant": "h2"
            },
            "listeners": {},
            "slots": {}
        },
        "text--4785": {
            "id": "text--4785",
            "widget": "text",
            "parent": {
                "id": "container--8140",
                "slot": "children"
            },
            "data": {
                "style": {
                    "padding": "4px",
                    "whiteSpace": "pre-line",
                    "textOverflow": "ellipsis"
                },
                "text": "Multiple File Upload (New)",
                "variant": "h2"
            },
            "listeners": {},
            "slots": {}
        },
        "button--4158": {
            "id": "button--4158",
            "widget": "button",
            "parent": {
                "id": "container--8419",
                "slot": "children"
            },
            "data": {
                "style": {},
                "label": "Update",
                "loading": false,
                "disabled": false,
                "variant": "contained",
                "color": "primary"
            },
            "listeners": {
                "onClick": [
                    {
                        "message": "RUN_QUERY",
                        "payload": {
                            "queryId": "Get File"
                        }
                    }
                ]
            },
            "slots": {}
        },
        "button--1231": {
            "id": "button--1231",
            "widget": "button",
            "parent": {
                "id": "container--8140",
                "slot": "children"
            },
            "data": {
                "style": {},
                "label": "Update",
                "loading": false,
                "disabled": false,
                "variant": "contained",
                "color": "primary"
            },
            "listeners": {
                "onClick": [
                    {
                        "message": "RUN_QUERY",
                        "payload": {
                            "queryId": "Get Files"
                        }
                    }
                ]
            },
            "slots": {}
        },
        "text--4218": {
            "id": "text--4218",
            "widget": "text",
            "parent": {
                "id": "container--8140",
                "slot": "children"
            },
            "data": {
                "style": {
                    "padding": "4px",
                    "whiteSpace": "pre-line",
                    "textOverflow": "ellipsis"
                },
                "text": "File values:",
                "variant": "p"
            },
            "listeners": {},
            "slots": {}
        },
        "text--9466": {
            "id": "text--9466",
            "widget": "text",
            "parent": {
                "id": "container--8419",
                "slot": "children"
            },
            "data": {
                "style": {
                    "padding": "4px",
                    "whiteSpace": "pre-line",
                    "textOverflow": "ellipsis"
                },
                "text": "File value: ",
                "variant": "p"
            },
            "listeners": {},
            "slots": {}
        },
        "text--8939": {
            "id": "text--8939",
            "widget": "text",
            "parent": {
                "id": "container--8419",
                "slot": "children"
            },
            "data": {
                "style": {
                    "padding": "4px",
                    "whiteSpace": "pre-line",
                    "textOverflow": "ellipsis"
                },
                "text": "{{Get File.output}}",
                "variant": "p"
            },
            "listeners": {},
            "slots": {}
        },
        "text--5636": {
            "id": "text--5636",
            "widget": "text",
            "parent": {
                "id": "container--8140",
                "slot": "children"
            },
            "data": {
                "style": {
                    "padding": "4px",
                    "whiteSpace": "pre-line",
                    "textOverflow": "ellipsis"
                },
                "text": "{{Get Files.output}}",
                "variant": "p"
            },
            "listeners": {},
            "slots": {}
        }
    },
    "variables": {
        "Get File": {
            "type": "query",
            "to": "Get File"
        },
        "Get Files": {
            "type": "query",
            "to": "Get Files"
        },
        "singleFile": {
            "type": "block",
            "to": "upload--3790"
        },
        "multipleFiles": {
            "type": "block",
            "to": "upload--4152"
        }
    },
    "dependencies": {},
    "executionOrder": [],
    "version": "1.0.0-alpha.3"
}