Feature/file date picker

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",
@@ -60,6 +67,7 @@
     "redux-form": "^8.2.6",
     "redux-saga": "^1.0.0",
     "reselect": "^4.0.0",
+    "shallowequal": "^1.1.0",
     "styled-components": "^4.1.3",
     "ts-loader": "^6.0.4",
     "typescript": "^3.6.3"

app/client/src/assets/icons/widget/file-upload.svg

@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.575 14.0467C24.1831 12.0607 23.1139 10.2723 21.5499 8.98712C19.9859 7.70191 18.0243 6.99954 16 7C12.6283 7 9.7 8.91333 8.24167 11.7133C6.52694 11.8986 4.94117 12.7111 3.78907 13.9945C2.63697 15.278 1.9998 16.942 2 18.6667C2 22.5283 5.13833 25.6667 9 25.6667H24.1667C27.3867 25.6667 30 23.0533 30 19.8333C30 16.7533 27.6083 14.2567 24.575 14.0467ZM18.3333 17.5V22.1667H13.6667V17.5H10.1667L15.5917 12.075C15.825 11.8417 16.1867 11.8417 16.42 12.075L21.8333 17.5H18.3333Z" fill="#F2FAFF" fill-opacity="0.9"/>
-</svg>

app/client/src/assets/icons/widget/rich text.svg

@@ -1,8 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 16.6667V7.33333C16 6.6 15.4 6 14.6667 6H5.33333C4.6 6 4 6.6 4 7.33333V16.6667C4 17.4 4.6 18 5.33333 18H14.6667C15.4 18 16 17.4 16 16.6667ZM6.9029 13.982C7.29516 13.4777 8.0533 13.4655 8.46152 13.957L8.53761 14.0486C8.94611 14.5405 9.7049 14.5279 10.0969 14.0228L10.8631 13.0355C11.2676 12.5142 12.0572 12.5207 12.4531 13.0486L13.4667 14.4C13.9611 15.0592 13.4907 16 12.6667 16H7.37797C6.54582 16 6.07773 15.0429 6.58862 14.3861L6.9029 13.982Z" fill="#F2FAFF" fill-opacity="0.9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 21C28 21.5523 27.5523 22 27 22H5C4.44772 22 4 21.5523 4 21C4 20.4477 4.44772 20 5 20H27C27.5523 20 28 20.4477 28 21Z" fill="#F2FAFF" fill-opacity="0.9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 25C28 25.5523 27.5523 26 27 26H5C4.44772 26 4 25.5523 4 25C4 24.4477 4.44772 24 5 24H27C27.5523 24 28 24.4477 28 25Z" fill="#F2FAFF" fill-opacity="0.9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 8C28 8.55228 27.5523 9 27 9H20C19.4477 9 19 8.55228 19 8C19 7.44772 19.4477 7 20 7H27C27.5523 7 28 7.44772 28 8Z" fill="#F2FAFF" fill-opacity="0.9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 12C28 12.5523 27.5523 13 27 13H20C19.4477 13 19 12.5523 19 12C19 11.4477 19.4477 11 20 11H27C27.5523 11 28 11.4477 28 12Z" fill="#F2FAFF" fill-opacity="0.9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 16C28 16.5523 27.5523 17 27 17H20C19.4477 17 19 16.5523 19 16C19 15.4477 19.4477 15 20 15H27C27.5523 15 28 15.4477 28 16Z" fill="#F2FAFF" fill-opacity="0.9"/>
-</svg>

app/client/src/components/designSystems/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 (
+      <Container {...this.props}>
+        <BaseButton text={"Upload files"} onClick={this.openModal} />
+        <DashboardModal
+          open={this.state.isOpen}
+          target={document.body}
+          closeModalOnClickOutside={true}
+          plugins={["GoogleDrive", "Url", "OneDrive", "Webcam"]}
+          onRequestClose={() => this.setState({ isOpen: false })}
+          uppy={this.props.uppy}
+        />
+      </Container>
+    );
+  }
+}
+
+export interface FilePickerComponentState {
+  isOpen: boolean;
+}
+
+export interface FilePickerComponentProps extends ComponentProps {
+  label: string;
+  uppy: any;
+}
+
+export default FilePickerComponent;

app/client/src/components/designSystems/blueprint/DropdownComponent.tsx

@@ -86,7 +86,6 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
       return null;
     }
     const isSelected: boolean = this.isOptionSelected(option);
-    console.log("is selected " + isSelected);
     return (
       <MenuItem
         icon={isSelected ? "tick" : "blank"}

app/client/src/components/propertyControls/DropDownControl.tsx

@@ -38,8 +38,10 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
     if (!itemProps.modifiers.matchesPredicate) {
       return null;
     }
+    const isSelected: boolean = this.isOptionSelected(option);
     return (
       <MenuItem
+        icon={isSelected ? "tick" : "blank"}
         active={itemProps.modifiers.active}
         key={option.value}
         onClick={itemProps.handleClick}
@@ -48,6 +50,10 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
     );
   };
 
+  isOptionSelected = (selectedOption: DropdownOption) => {
+    return selectedOption.value === this.props.propertyValue;
+  };
+
   getControlType(): ControlType {
     return "DROP_DOWN";
   }
@@ -55,6 +61,8 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
 
 export interface DropDownControlProps extends ControlProps {
   options: DropdownOption[];
+  placeholderText: string;
+  propertyValue: string;
 }
 
 export default DropDownControl;

app/client/src/components/propertyControls/MultiSelectControl.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import { ControlType } from "../../constants/PropertyControlConstants";
+import { MenuItem } from "@blueprintjs/core";
+import { IItemRendererProps } from "@blueprintjs/select";
+import { ControlWrapper, StyledMultiSelectDropDown } from "./StyledControls";
+import _ from "lodash";
+import { DropdownOption } from "../../widgets/DropdownWidget";
+
+class MultiSelectControl extends BaseControl<MultiSelectControlProps> {
+  render() {
+    const selectedItems: DropdownOption[] = [];
+    _.map(this.props.propertyValue, value => {
+      const option = _.find(this.props.options, option => {
+        return option.value === value;
+      });
+      if (option) selectedItems.push(option);
+      return option;
+    });
+    return (
+      <ControlWrapper>
+        <label>{this.props.label}</label>
+        {
+          <StyledMultiSelectDropDown
+            items={this.props.options}
+            placeholder={this.props.placeholderText}
+            itemRenderer={this.renderItem}
+            tagRenderer={this.renderTag}
+            selectedItems={selectedItems}
+            tagInputProps={{ onRemove: this.onItemRemoved }}
+            onItemSelect={this.onItemSelect}
+            noResults={<MenuItem disabled={true} text="No results." />}
+          />
+        }
+      </ControlWrapper>
+    );
+  }
+
+  onItemRemoved = (_tag: string, index: number) => {
+    const optionValues = this.props.propertyValue.filter(
+      (value: string, valueIndex: number) => {
+        return valueIndex !== index;
+      },
+    );
+    this.updateProperty(this.props.propertyName, optionValues);
+  };
+
+  renderTag = (option: DropdownOption) => {
+    return option.label;
+  };
+
+  onItemSelect = (option: DropdownOption): void => {
+    if (this.isOptionSelected(option)) {
+      const optionValues = this.props.propertyValue.filter((value: string) => {
+        return value !== option.value;
+      });
+      this.updateProperty(this.props.propertyName, optionValues);
+    } else {
+      const optionValues = this.props.propertyValue || [];
+      optionValues.push(option.value);
+      this.updateProperty(this.props.propertyName, optionValues);
+    }
+  };
+
+  renderItem = (option: DropdownOption, itemProps: IItemRendererProps) => {
+    if (!itemProps.modifiers.matchesPredicate) {
+      return null;
+    }
+    const isSelected: boolean = this.isOptionSelected(option);
+    return (
+      <MenuItem
+        icon={isSelected ? "tick" : "blank"}
+        active={itemProps.modifiers.active}
+        key={option.value}
+        onClick={itemProps.handleClick}
+        text={option.label}
+      />
+    );
+  };
+
+  isOptionSelected = (selectedOption: DropdownOption) => {
+    return (
+      _.findIndex(this.props.propertyValue, value => {
+        return value === selectedOption.value;
+      }) !== -1
+    );
+  };
+
+  getControlType(): ControlType {
+    return "MULTI_SELECT";
+  }
+}
+
+export interface MultiSelectControlProps extends ControlProps {
+  options: DropdownOption[];
+  placeholderText: string;
+  propertyValue: string[];
+}
+
+export default MultiSelectControl;

app/client/src/components/propertyControls/StyledControls.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Select } from "@blueprintjs/select";
+import { Select, MultiSelect } from "@blueprintjs/select";
 import { Switch, InputGroup } from "@blueprintjs/core";
 import { DropdownOption } from "../../widgets/DropdownWidget";
 import { ContainerOrientation } from "../../constants/WidgetConstants";
@@ -35,6 +35,15 @@ export const StyledDropDown = styled(DropDown)`
   }
 `;
 
+const MultiSelectDropDown = MultiSelect.ofType<DropdownOption>();
+export const StyledMultiSelectDropDown = styled(MultiSelectDropDown)`
+  &&& button {
+    background: ${props => props.theme.colors.paneInputBG};
+    color: ${props => props.theme.colors.textOnDarkBG};
+    box-shadow: none;
+  }
+`;
+
 export const StyledSwitch = styled(Switch)`
   &&&&& input:checked ~ span {
     background: ${props => props.theme.colors.primary};

app/client/src/constants/PropertyControlConstants.tsx

@@ -6,6 +6,7 @@ export type ControlType =
   | "CHECKBOX"
   | "DATE_PICKER"
   | "DROP_DOWN"
+  | "MULTI_SELECT"
   | "COLOR_PICKER"
   | "TIMEZONE_PICKER"
   | "ACTION_SELECTOR"

app/client/src/constants/WidgetConstants.tsx

@@ -9,6 +9,7 @@ export type WidgetType =
   | "DROP_DOWN_WIDGET"
   | "CHECKBOX_WIDGET"
   | "RADIO_GROUP_WIDGET"
+  | "FILE_PICKER_WIDGET"
   | "INPUT_WIDGET"
   | "SWITCH_WIDGET";
 

app/client/src/icons/WidgetIcons.tsx

@@ -13,6 +13,7 @@ import { ReactComponent as InputIcon } from "../assets/icons/widget/input.svg";
 import { ReactComponent as SwitchIcon } from "../assets/icons/widget/switch.svg";
 import { ReactComponent as TextIcon } from "../assets/icons/widget/text.svg";
 import { ReactComponent as ImageIcon } from "../assets/icons/widget/image.svg";
+import { ReactComponent as FilePickerIcon } from "../assets/icons/widget/filepicker.svg";
 
 /* eslint-disable react/display-name */
 
@@ -84,6 +85,11 @@ export const WidgetIcons: {
       <ImageIcon />
     </IconWrapper>
   ),
+  FILE_PICKER_WIDGET: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <FilePickerIcon />
+    </IconWrapper>
+  ),
 };
 
 export type WidgetIcon = (typeof WidgetIcons)[keyof typeof WidgetIcons];

app/client/src/mockResponses/PropertyPaneConfigResponse.tsx

@@ -459,13 +459,13 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
             controlType: "SWITCH",
           },
           {
-            id: "13.5",
+            id: "15.3",
             propertyName: "isDisabled",
             label: "Disabled",
             controlType: "SWITCH",
           },
           {
-            id: "13.5",
+            id: "15.4",
             propertyName: "isVisible",
             label: "Visibile",
             controlType: "SWITCH",
@@ -510,7 +510,7 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
             controlType: "OPTION_INPUT",
           },
           {
-            id: "13.5",
+            id: "16.4",
             propertyName: "isVisible",
             label: "Visibile",
             controlType: "SWITCH",
@@ -530,6 +530,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,
 };

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,
 };

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",

app/client/src/pages/Editor/index.tsx

@@ -92,8 +92,9 @@ class Editor extends Component<EditorProps> {
         >
           <div className={Classes.DIALOG_BODY}>
             <p>
-              Your awesome application is now published with the current
+              {
-              changes!
+                "Your awesome application is now published with the current changes!"
+              }
             </p>
           </div>
           <div className={Classes.DIALOG_FOOTER}>

app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx

@@ -36,6 +36,7 @@ export interface PropertyConfig {
   TABLE_WIDGET: PropertySection[];
   DROP_DOWN_WIDGET: PropertySection[];
   CHECKBOX_WIDGET: PropertySection[];
+  FILE_PICKER_WIDGET: PropertySection[];
   RADIO_GROUP_WIDGET: PropertySection[];
 }
 
@@ -43,16 +44,16 @@ export interface PropertyPaneConfigState {
   config: PropertyConfig;
   configVersion: number;
 }
+
 /**
  * TODO: Remove hardcoding of config response
  */
-
 const propertyPaneConfigReducer = createReducer(initialState, {
   [ReduxActionTypes.FETCH_PROPERTY_PANE_CONFIGS_SUCCESS]: (
     state: PropertyPaneConfigState,
     action: ReduxAction<PropertyPaneConfigState>,
   ) => {
-    return { ...PropertyPaneConfigResponse };
+    return { ...action.payload };
   },
 });
 

app/client/src/reducers/entityReducers/widgetConfigReducer.tsx

@@ -18,6 +18,7 @@ import { DropdownWidgetProps } from "../../widgets/DropdownWidget";
 import { CheckboxWidgetProps } from "../../widgets/CheckboxWidget";
 import { RadioGroupWidgetProps } from "../../widgets/RadioGroupWidget";
 import { AlertWidgetProps } from "../../widgets/AlertWidget";
+import { FilePickerWidgetProps } from "../../widgets/FilepickerWidget";
 
 const initialState: WidgetConfigReducerState = WidgetConfigResponse;
 
@@ -42,6 +43,7 @@ export interface WidgetConfigReducerState {
     CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps;
     RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
     ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
+    FILE_PICKER_WIDGET: Partial<FilePickerWidgetProps> & WidgetConfigProps;
   };
   configVersion: number;
 }

app/client/src/utils/PropertyControlRegistry.tsx

@@ -12,6 +12,9 @@ import SwitchControl, {
 import OptionControl from "../components/propertyControls/OptionControl";
 import { ControlProps } from "../components/propertyControls/BaseControl";
 import CodeEditorControl from "../components/propertyControls/CodeEditorControl";
+import MultiSelectControl, {
+  MultiSelectControlProps,
+} from "../components/propertyControls/MultiSelectControl";
 
 class PropertyControlRegistry {
   static registerPropertyControlBuilders() {
@@ -30,6 +33,11 @@ class PropertyControlRegistry {
         return <DropDownControl {...controlProps} />;
       },
     });
+    PropertyControlFactory.registerControlBuilder("MULTI_SELECT", {
+      buildPropertyControl(controlProps: MultiSelectControlProps): JSX.Element {
+        return <MultiSelectControl {...controlProps} />;
+      },
+    });
     PropertyControlFactory.registerControlBuilder("SWITCH", {
       buildPropertyControl(controlProps: SwitchControlProps): JSX.Element {
         return <SwitchControl {...controlProps} />;

app/client/src/utils/WidgetRegistry.tsx

@@ -15,6 +15,9 @@ import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget";
 import DropdownWidget, { DropdownWidgetProps } from "../widgets/DropdownWidget";
 import ImageWidget, { ImageWidgetProps } from "../widgets/ImageWidget";
 import TableWidget, { TableWidgetProps } from "../widgets/TableWidget";
+import FilePickerWidget, {
+  FilePickerWidgetProps,
+} from "../widgets/FilepickerWidget";
 class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
     WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
@@ -75,6 +78,11 @@ class WidgetBuilderRegistry {
         return <TableWidget {...widgetData} />;
       },
     });
+    WidgetFactory.registerWidgetBuilder("FILE_PICKER_WIDGET", {
+      buildWidget(widgetData: FilePickerWidgetProps): JSX.Element {
+        return <FilePickerWidget {...widgetData} />;
+      },
+    });
   }
 }
 

app/client/src/widgets/BaseWidget.tsx

@@ -16,6 +16,7 @@ import DraggableComponent from "../components/editorComponents/DraggableComponen
 import ResizableComponent from "../components/editorComponents/ResizableComponent";
 import { ActionPayload } from "../constants/ActionConstants";
 import { WidgetFunctionsContext } from "../pages/Editor/WidgetsEditor";
+import shallowequal from "shallowequal";
 
 abstract class BaseWidget<
   T extends WidgetProps,
@@ -118,6 +119,13 @@ abstract class BaseWidget<
     }
   }
 
+  shouldComponentUpdate(nextProps: WidgetProps, nextState: WidgetState) {
+    const isNotEqual =
+      !shallowequal(nextProps, this.props) ||
+      !shallowequal(nextState, this.state);
+    return isNotEqual;
+  }
+
   abstract getWidgetType(): WidgetType;
 
   getPositionStyle(): BaseStyle {

app/client/src/widgets/ButtonWidget.tsx

@@ -22,8 +22,8 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, WidgetState> {
         style={this.getPositionStyle()}
         buttonStyle={this.props.buttonStyle}
         widgetId={this.props.widgetId}
-        widgetName={this.props.widgetName}
         key={this.props.widgetId}
+        widgetName={this.props.widgetName}
         text={this.props.text}
         disabled={this.props.isDisabled}
         onClick={this.onButtonClickBound}

app/client/src/widgets/FilepickerWidget.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+import Uppy from "@uppy/core";
+import GoogleDrive from "@uppy/google-drive";
+import Webcam from "@uppy/webcam";
+import Url from "@uppy/url";
+import OneDrive from "@uppy/onedrive";
+import FilePickerComponent from "../components/designSystems/appsmith/FilePickerComponent";
+
+class FilePickerWidget extends BaseWidget<FilePickerWidgetProps, WidgetState> {
+  uppy: any;
+
+  constructor(props: FilePickerWidgetProps) {
+    super(props);
+    this.refreshUppy(props);
+  }
+
+  refreshUppy = (props: FilePickerWidgetProps) => {
+    this.uppy = Uppy({
+      id: this.props.widgetId,
+      autoProceed: true,
+      allowMultipleUploads: true,
+      debug: false,
+      restrictions: {
+        maxFileSize: null,
+        maxNumberOfFiles: props.maxNumFiles,
+        minNumberOfFiles: null,
+        allowedFileTypes: props.allowedFileTypes,
+      },
+    })
+      .use(GoogleDrive, { companionUrl: "https://companion.uppy.io" })
+      .use(Url, { companionUrl: "https://companion.uppy.io" })
+      .use(OneDrive, {
+        companionUrl: "https://companion.uppy.io/",
+      })
+      .use(Webcam, {
+        onBeforeSnapshot: () => Promise.resolve(),
+        countdown: false,
+        mirror: true,
+        facingMode: "user",
+        locale: {},
+      });
+  };
+
+  componentDidUpdate(prevProps: FilePickerWidgetProps) {
+    super.componentDidUpdate(prevProps);
+    if (
+      prevProps.allowedFileTypes !== this.props.allowedFileTypes ||
+      prevProps.maxNumFiles !== this.props.maxNumFiles
+    ) {
+      this.refreshUppy(this.props);
+    }
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+    this.refreshUppy(this.props);
+  }
+
+  componentWillUnmount() {
+    this.uppy.close();
+  }
+
+  getPageView() {
+    return (
+      <FilePickerComponent
+        uppy={this.uppy}
+        style={this.getPositionStyle()}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        label={this.props.label}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "FILE_PICKER_WIDGET";
+  }
+}
+
+export interface FilePickerWidgetProps extends WidgetProps {
+  label: string;
+  maxNumFiles?: number;
+  allowedFileTypes: string[];
+}
+
+export default FilePickerWidget;

app/client/yarn.lock

@@ -1852,6 +1852,166 @@
     lodash.unescape "4.0.1"
     semver "^6.3.0"
 
+"@uppy/companion-client@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@uppy/companion-client/-/companion-client-1.4.1.tgz#138032c145ef0961f7f3a047b36b593d6fc772d2"
+  integrity sha512-ZQpEibQMDRwCzp3zugRHlCl/ne7UpCF+4ZfayhspGt7nz8tuUZXuDH15LhyMS06Y9S/kXTRMrA/w5bY42QtHDw==
+  dependencies:
+    namespace-emitter "^2.0.1"
+
+"@uppy/core@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@uppy/core/-/core-1.5.1.tgz#61a083ea18e35d53e37248db6a379d480abe39c1"
+  integrity sha512-8HyCSKxece1PyOCx2oiZ8M61+ci6WSvlVukztBaU2eV2wjVYM/Bqxdv3dQtcjLwV82+2LD+9pYp2mlvou4bP5A==
+  dependencies:
+    "@uppy/store-default" "^1.2.0"
+    "@uppy/utils" "^2.0.0"
+    cuid "^2.1.1"
+    lodash.throttle "^4.1.1"
+    mime-match "^1.0.2"
+    namespace-emitter "^2.0.1"
+    preact "8.2.9"
+
+"@uppy/dashboard@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@uppy/dashboard/-/dashboard-1.4.1.tgz#8b9c1841d4f2594fa998d1a95282dd3f907d009d"
+  integrity sha512-/JG5YTPOu2oz2qQNSPEnXFTY2S0YWxPiV7x5SCwqP3zMI2g/tlG5l8sYTN2+KCWS8JZZaqyEaSWIh8KKQULcTQ==
+  dependencies:
+    "@uppy/informer" "^1.3.1"
+    "@uppy/provider-views" "^1.4.0"
+    "@uppy/status-bar" "^1.3.1"
+    "@uppy/thumbnail-generator" "^1.4.0"
+    "@uppy/utils" "^2.0.0"
+    classnames "^2.2.6"
+    cuid "^2.1.1"
+    is-shallow-equal "^1.0.1"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    memoize-one "^5.0.4"
+    preact "8.2.9"
+    preact-css-transition-group "^1.3.0"
+    resize-observer-polyfill "^1.5.0"
+
+"@uppy/drag-drop@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@uppy/drag-drop/-/drag-drop-1.3.1.tgz#d2af47a33d0f4eef7283dabcc174a782b3134a5f"
+  integrity sha512-0LOMG766h+E0QKuYy7IgMGXhODhBAIEA5IzBEGF9LWdaYvsAx1JM9Z+wMEn3egu2qFVTTSyhOojROoaV1yDHBg==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
+"@uppy/file-input@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@uppy/file-input/-/file-input-1.3.1.tgz#86e92fa1c7cd379a55b64a828df6369030366377"
+  integrity sha512-Z8Qvdbaaw0SzPwg0gSws2SYKdOS86QDHbRLnNJNEXRNrETlYjeqZvAOAtanQZhzkKkxXrpS1jr/VISjNS16f4A==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
+"@uppy/google-drive@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@uppy/google-drive/-/google-drive-1.3.2.tgz#473ab3cd44eb0df252e9b462c2b25cf31bbb4d7e"
+  integrity sha512-CezojbaXQomhdItkTPu9j7yguVjaX02kIfr3a6ojXBuFhMY2JVb7ef8EkfabAa28RwK+l8sqEkg/AQjVfqZI8w==
+  dependencies:
+    "@uppy/companion-client" "^1.4.1"
+    "@uppy/provider-views" "^1.4.0"
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
+"@uppy/informer@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@uppy/informer/-/informer-1.3.1.tgz#ce9ac6fea1e695e5a38a65f2760ec1a4d522fde4"
+  integrity sha512-SuD686BxdEo4eAHSxjK0haPE0x8Pi2qsKUtRITx4CM+t4NKrg21/MRjD/dD4r4ydyYO5HhC5wTZfkAMA8BRVzQ==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
+"@uppy/onedrive@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@uppy/onedrive/-/onedrive-0.1.1.tgz#0874117b8e3c12bbdd86987cd24ba518b4a5721c"
+  integrity sha512-t9vwG+dmYJYa5JuPB05jQgV1V3mOgnVTSU5ScxloqI2O0FC9VFWh1P7M0A5AlwfO0BOrTU4oXRG9m6jWOdx2CA==
+  dependencies:
+    "@uppy/companion-client" "^1.4.1"
+    "@uppy/provider-views" "^1.4.0"
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
+"@uppy/progress-bar@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@uppy/progress-bar/-/progress-bar-1.3.1.tgz#0b551fb4182abab9f587170d2ce5202928ab2c74"
+  integrity sha512-GlAfyXJWsY+9kpu1H2LCv/mDe6roNQAlznHPF1S6045NvxphQLIqebe9+ZK8nVhZKY6QnioXl57cay4N9cjvjQ==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
+"@uppy/provider-views@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@uppy/provider-views/-/provider-views-1.4.0.tgz#ffe4b9bb8424b96b9a5f49d65097992c8b9c2886"
+  integrity sha512-y9laKMGu4GshqMmsxCBovqBtNKl4FOvwZvfuZZ4QC71xpuGLrEi/Y21JMHkh0aVTWxN4AmlMkj5t9fDKuhAxXw==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    classnames "^2.2.6"
+    preact "8.2.9"
+
+"@uppy/react@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@uppy/react/-/react-1.3.2.tgz#6c924ea19ed4cca7c4c46636b7e47085377b26fd"
+  integrity sha512-EzXDxyyMQZNoDwiUJwxRM9NNUppcFrqZ7aE2BZrGVBHKH0Rr9jSTDxkEts/kRQ+uUbsQhF3ppU6kYdR0H1bdbA==
+  dependencies:
+    "@uppy/dashboard" "^1.4.1"
+    "@uppy/drag-drop" "^1.3.1"
+    "@uppy/progress-bar" "^1.3.1"
+    "@uppy/status-bar" "^1.3.1"
+    "@uppy/utils" "^2.0.0"
+    prop-types "^15.6.1"
+
+"@uppy/status-bar@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@uppy/status-bar/-/status-bar-1.3.1.tgz#36525803d5a55e6c3043604cf429b21d8afbae86"
+  integrity sha512-bEHyQOFRnqPXbAjvbPHtCdlMzrT91lR/r+zL4hRHU+pAJLIebLlhsXcxkKrJWtho6s0TcKXq/KGUPRVFIPVYww==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    classnames "^2.2.6"
+    lodash.throttle "^4.1.1"
+    preact "8.2.9"
+
+"@uppy/store-default@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@uppy/store-default/-/store-default-1.2.0.tgz#4007b84e6eef24b3f07b0fe5457548386cea77d9"
+  integrity sha512-mnkxdX4DJMP2nrBklh5MXdn31bAyBSlCcp4+BZanFwv4WiCEpg/ruYzNzaJ1nVyuINJEDj2nx/DWxo+1F6WuWw==
+
+"@uppy/thumbnail-generator@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@uppy/thumbnail-generator/-/thumbnail-generator-1.4.0.tgz#746e1b10a126b4b6992fe1bc5311f86c3c2321c0"
+  integrity sha512-Ftgr36xp6zS1Wh37ceURV/I9LiG7oI3F6YD0cviCI5dw8vYpjV8k9TvE6NBfZ3cnHk/+DAevaOR+pyjBIvQYHA==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    exif-js "2.3.0"
+
+"@uppy/url@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@uppy/url/-/url-1.3.2.tgz#94a994585e7e744d146c20279da1aa06143bff6c"
+  integrity sha512-mvP+b4nFHHqcdQE6Wy+hDHIpZsUdffHWHLFOgvM/g7DIcyrqrlhBRCfXHPYI7kl8QWqg7IbWFrQ6OYeOI9AgAg==
+  dependencies:
+    "@uppy/companion-client" "^1.4.1"
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
+"@uppy/utils@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@uppy/utils/-/utils-2.0.0.tgz#f603458cedb3d86017e33f00cce32e20f690b6f5"
+  integrity sha512-FWuSmdCK+dB5ybGlTp5xx1C6hf9Tsdl58Lrfg9KUF/4ogkzupj/2uEYmcn26S0GZ8FJPWNG/858EeF/bZNFAQw==
+  dependencies:
+    lodash.throttle "^4.1.1"
+
+"@uppy/webcam@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@uppy/webcam/-/webcam-1.3.1.tgz#e9bb68eee6a3cdff11888705b7d35ab0a655e09b"
+  integrity sha512-9wo2cC2Vw1Rqc7IL1C8btT4BiB5DouLbIKJM/oSgmQ8SatwytMDPtAA0qgD0i/cC6rmGZh1J6W7IdnstJFoUSA==
+  dependencies:
+    "@uppy/utils" "^2.0.0"
+    preact "8.2.9"
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -3110,7 +3270,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2, classnames@^2.2.5:
+classnames@^2.2, classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -3787,6 +3947,11 @@ csstype@^2.2.0, csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
 
+cuid@^2.1.1:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/cuid/-/cuid-2.1.6.tgz#dc3a20b5a7497d36d32c0bf8a2997524c9c796c4"
+  integrity sha512-ZFp7PS6cSYMJNch9fc3tyHdE4T8TDo3Y5qAxb0KSA9mpiYDo7z9ql1CznFuuzxea9STVIDy0tJWm2lYiX2ZU1Q==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -4712,6 +4877,11 @@ execa@^2.0.3:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+exif-js@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/exif-js/-/exif-js-2.3.0.tgz#9d10819bf571f873813e7640241255ab9ce1a814"
+  integrity sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ=
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -6323,6 +6493,11 @@ is-root@2.1.0:
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
   integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
+is-shallow-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-shallow-equal/-/is-shallow-equal-1.0.1.tgz#c410b51eb1c12ee50cd02891d32d1691a132d73c"
+  integrity sha512-lq5RvK+85Hs5J3p4oA4256M1FEffzmI533ikeDHvJd42nouRRx5wBzt36JuviiGe5dIPyHON/d0/Up+PBo6XkQ==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -7295,6 +7470,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@4.x, lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7325,6 +7505,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -7494,7 +7679,7 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
-"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
+"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0, memoize-one@^5.0.4:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
@@ -7622,6 +7807,13 @@ mime-db@1.40.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.42.0.tgz#3e252907b4c7adb906597b4b65636272cf9e7bac"
   integrity sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==
 
+mime-match@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/mime-match/-/mime-match-1.0.2.tgz#3f87c31e9af1a5fd485fb9db134428b23bbb7ba8"
+  integrity sha1-P4fDHprxpf1IX7nbE0Qosju7e6g=
+  dependencies:
+    wildcard "^1.1.0"
+
 mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.24"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
@@ -7826,6 +8018,11 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+namespace-emitter@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/namespace-emitter/-/namespace-emitter-2.0.1.tgz#978d51361c61313b4e6b8cf6f3853d08dfa2b17c"
+  integrity sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==
+
 nan@^2.12.1, nan@^2.13.2:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
@@ -9452,6 +9649,16 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.1
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+preact-css-transition-group@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/preact-css-transition-group/-/preact-css-transition-group-1.3.0.tgz#06fe468b26f7802e95b829a762db0bc199aef399"
+  integrity sha1-Bv5Giyb3gC6VuCmnYtsLwZmu85k=
+
+preact@8.2.9:
+  version "8.2.9"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-8.2.9.tgz#813ba9dd45e5d97c5ea0d6c86d375b3be711cc40"
+  integrity sha512-ThuGXBmJS3VsT+jIP+eQufD3L8pRw/PY3FoCys6O9Pu6aF12Pn9zAJDX99TfwRAFOCEKm/P0lwiPTbqKMJp0fA==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -10402,7 +10609,7 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
   integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
 
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
@@ -12479,6 +12686,11 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2 || 2"
 
+wildcard@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-1.1.2.tgz#a7020453084d8cd2efe70ba9d3696263de1710a5"
+  integrity sha1-pwIEUwhNjNLv5wup02liY94XEKU=
+
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"