diff --git a/app/client/package.json b/app/client/package.json
index b14fe3cab6..6e211dec35 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -24,6 +24,13 @@
"@types/react-redux": "^7.0.1",
"@types/react-router-dom": "^4.3.5",
"@types/styled-components": "^4.1.8",
+ "@uppy/core": "^1.5.1",
+ "@uppy/file-input": "^1.3.1",
+ "@uppy/google-drive": "^1.3.2",
+ "@uppy/onedrive": "^0.1.1",
+ "@uppy/react": "^1.3.2",
+ "@uppy/url": "^1.3.2",
+ "@uppy/webcam": "^1.3.1",
"axios": "^0.18.0",
"eslint": "^6.4.0",
"flow-bin": "^0.91.0",
diff --git a/app/client/src/assets/icons/widget/file-upload.svg b/app/client/src/assets/icons/widget/file-upload.svg
deleted file mode 100644
index 3339c43747..0000000000
--- a/app/client/src/assets/icons/widget/file-upload.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/app/client/src/assets/icons/widget/file upload.svg b/app/client/src/assets/icons/widget/filepicker.svg
similarity index 100%
rename from app/client/src/assets/icons/widget/file upload.svg
rename to app/client/src/assets/icons/widget/filepicker.svg
diff --git a/app/client/src/assets/icons/widget/rich text.svg b/app/client/src/assets/icons/widget/rich text.svg
deleted file mode 100644
index 99149884a5..0000000000
--- a/app/client/src/assets/icons/widget/rich text.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/app/client/src/components/appsmith/FilePickerComponent.tsx b/app/client/src/components/appsmith/FilePickerComponent.tsx
new file mode 100644
index 0000000000..e8d9a9d708
--- /dev/null
+++ b/app/client/src/components/appsmith/FilePickerComponent.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { ComponentProps } from "../appsmith/BaseComponent";
+import "@uppy/core/dist/style.css";
+import "@uppy/dashboard/dist/style.css";
+import "@uppy/webcam/dist/style.css";
+import { Container } from "./ContainerComponent";
+import { BaseButton } from "../blueprint/ButtonComponent";
+import { DashboardModal } from "@uppy/react";
+
+class FilePickerComponent extends React.Component<
+ FilePickerComponentProps,
+ FilePickerComponentState
+> {
+ constructor(props: FilePickerComponentProps) {
+ super(props);
+ this.state = {
+ isOpen: false,
+ };
+ }
+
+ openModal = () => {
+ this.setState({ isOpen: true });
+ };
+
+ render() {
+ return (
+
+
+ this.setState({ isOpen: false })}
+ uppy={this.props.uppy}
+ />
+
+ );
+ }
+}
+
+export interface FilePickerComponentState {
+ isOpen: boolean;
+}
+
+export interface FilePickerComponentProps extends ComponentProps {
+ label: string;
+ uppy: any;
+}
+
+export default FilePickerComponent;
diff --git a/app/client/src/components/blueprint/DropdownComponent.tsx b/app/client/src/components/blueprint/DropdownComponent.tsx
index 2542c7e78f..2b2f7b50b9 100644
--- a/app/client/src/components/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/blueprint/DropdownComponent.tsx
@@ -86,7 +86,6 @@ class DropDownComponent extends React.Component {
return null;
}
const isSelected: boolean = this.isOptionSelected(option);
- console.log("is selected " + isSelected);
return (
),
+ FILE_PICKER_WIDGET: (props: IconProps) => (
+
+
+
+ ),
};
export type WidgetIcon = (typeof WidgetIcons)[keyof typeof WidgetIcons];
diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
index 62bd4e65ba..5acfd8e8e5 100644
--- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
+++ b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
@@ -524,6 +524,76 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
],
},
],
+ FILE_PICKER_WIDGET: [
+ {
+ sectionName: "General",
+ id: "18",
+ children: [
+ {
+ id: "18.1",
+ propertyName: "label",
+ label: "Label",
+ inputType: "INTEGER",
+ placeholderText: "Enter Label",
+ controlType: "INPUT_TEXT",
+ },
+ {
+ id: "18.2",
+ propertyName: "maxNumFiles",
+ label: "No. of files",
+ placeholderText: "Enter No. of files",
+ controlType: "INPUT_TEXT",
+ },
+ {
+ id: "18.3",
+ propertyName: "allowedFileTypes",
+ label: "Allowed File Types",
+ placeholderText: "Enter No. of files",
+ options: [
+ {
+ label: "Any File",
+ value: "*",
+ },
+ {
+ label: "Images",
+ value: "image/*",
+ },
+ {
+ label: "Videos",
+ value: "video/*",
+ },
+ {
+ label: "Audio",
+ value: "audio/*",
+ },
+ {
+ label: "Text",
+ value: "text/*",
+ },
+ {
+ label: "JPEG",
+ value: "image/jpeg",
+ },
+ {
+ label: "PNG",
+ value: "*.png",
+ },
+ {
+ label: "GIF",
+ value: "*.gif",
+ },
+ ],
+ controlType: "MULTI_SELECT",
+ },
+ {
+ id: "18.4",
+ propertyName: "isVisible",
+ label: "Visibile",
+ controlType: "SWITCH",
+ },
+ ],
+ },
+ ],
},
configVersion: 1,
};
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index 86bc27203d..93f81bdcec 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -105,6 +105,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
message: "",
widgetName: "Alert",
},
+ FILE_PICKER_WIDGET: {
+ rows: 3,
+ columns: 3,
+ widgetName: "FilePicker",
+ },
},
configVersion: 1,
};
diff --git a/app/client/src/mockResponses/WidgetSidebarResponse.tsx b/app/client/src/mockResponses/WidgetSidebarResponse.tsx
index 36af23f569..0071497082 100644
--- a/app/client/src/mockResponses/WidgetSidebarResponse.tsx
+++ b/app/client/src/mockResponses/WidgetSidebarResponse.tsx
@@ -68,6 +68,12 @@ const WidgetSidebarResponse: {
widgetCardName: "DatePicker",
key: generateReactKey(),
},
+ {
+ type: "FILE_PICKER_WIDGET",
+ icon: "icon-filepicker",
+ widgetCardName: "FilePicker",
+ key: generateReactKey(),
+ },
{
type: "BUTTON_WIDGET",
icon: "icon-button",
diff --git a/app/client/src/propertyControls/DropDownControl.tsx b/app/client/src/propertyControls/DropDownControl.tsx
index 278686a29b..8198bf4254 100644
--- a/app/client/src/propertyControls/DropDownControl.tsx
+++ b/app/client/src/propertyControls/DropDownControl.tsx
@@ -38,8 +38,10 @@ class DropDownControl extends BaseControl {
if (!itemProps.modifiers.matchesPredicate) {
return null;
}
+ const isSelected: boolean = this.isOptionSelected(option);
return (