Merge pull request #3514 from appsmithorg/fix/file-picker

[Fix] Made bade 64 encoding the default type for S3

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -2,6 +2,7 @@ import { WidgetConfigReducerState } from "reducers/entityReducers/widgetConfigRe
 import { WidgetProps } from "widgets/BaseWidget";
 import moment from "moment-timezone";
 import { generateReactKey } from "utils/generators";
+import { FileDataTypes } from "widgets/FilepickerWidget";
 
 const WidgetConfigResponse: WidgetConfigReducerState = {
   config: {
@@ -211,6 +212,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       columns: 4,
       maxNumFiles: 1,
       maxFileSize: 5,
+      fileDataType: FileDataTypes.Base64,
       widgetName: "FilePicker",
       isDefaultClickDisabled: true,
       version: 1,

app/client/src/utils/autocomplete/EntityDefinitions.ts

@@ -220,7 +220,7 @@ export const entityDefinitions = {
       "Filepicker widget is used to allow users to upload files from their local machines to any cloud storage via API. Cloudinary and Amazon S3 have simple APIs for cloud storage uploads",
     "!url": "https://docs.appsmith.com/widget-reference/filepicker",
     isVisible: isVisible,
-    files: "[?]",
+    files: "[file]",
     isDisabled: "bool",
     uploadedFileUrls: "string",
   },
@@ -253,6 +253,11 @@ export const GLOBAL_DEFS = {
     title: "string",
     description: "string",
   },
+  file: {
+    data: "string",
+    name: "text",
+    type: "file",
+  },
 };
 
 export const GLOBAL_FUNCTIONS = {

app/client/src/widgets/FilepickerWidget.tsx

@@ -112,6 +112,28 @@ class FilePickerWidget extends BaseWidget<
             isBindProperty: true,
             isTriggerProperty: false,
           },
+          {
+            helpText: "Set the format of the data read from the files",
+            propertyName: "fileDataType",
+            label: "Data Format",
+            controlType: "DROP_DOWN",
+            options: [
+              {
+                label: FileDataTypes.Base64,
+                value: FileDataTypes.Base64,
+              },
+              {
+                label: FileDataTypes.Binary,
+                value: FileDataTypes.Binary,
+              },
+              {
+                label: FileDataTypes.Text,
+                value: FileDataTypes.Text,
+              },
+            ],
+            isBindProperty: false,
+            isTriggerProperty: false,
+          },
           {
             propertyName: "isRequired",
             label: "Required",
@@ -175,7 +197,7 @@ class FilePickerWidget extends BaseWidget<
       label: VALIDATION_TYPES.TEXT,
       maxNumFiles: VALIDATION_TYPES.NUMBER,
       allowedFileTypes: VALIDATION_TYPES.ARRAY,
-      files: VALIDATION_TYPES.ARRAY,
+      selectedFiles: VALIDATION_TYPES.ARRAY,
       isRequired: VALIDATION_TYPES.BOOLEAN,
       // onFilesSelected: VALIDATION_TYPES.ACTION_SELECTOR,
     };
@@ -184,13 +206,13 @@ class FilePickerWidget extends BaseWidget<
   static getDerivedPropertiesMap(): DerivedPropertiesMap {
     return {
       isValid: `{{ this.isRequired ? this.files.length > 0 : true }}`,
-      value: `{{this.files}}`,
+      files: `{{this.selectedFiles.map((file) => { return { ...file, data: this.fileDataType === "Base64" ? file.base64 : this.fileDataType === "Binary" ? file.raw : file.text } })}}`,
     };
   }
 
   static getMetaPropertiesMap(): Record<string, any> {
     return {
-      files: [],
+      selectedFiles: [],
       uploadedFileData: {},
     };
   }
@@ -295,8 +317,8 @@ class FilePickerWidget extends BaseWidget<
       });
 
     this.state.uppy.on("file-removed", (file: any) => {
-      const updatedFiles = this.props.files
+      const updatedFiles = this.props.selectedFiles
-        ? this.props.files.filter((dslFile) => {
+        ? this.props.selectedFiles.filter((dslFile) => {
             return file.id !== dslFile.id;
           })
         : [];
@@ -304,7 +326,9 @@ class FilePickerWidget extends BaseWidget<
     });
 
     this.state.uppy.on("files-added", (files: any[]) => {
-      const dslFiles = this.props.files ? [...this.props.files] : [];
+      const dslFiles = this.props.selectedFiles
+        ? [...this.props.selectedFiles]
+        : [];
 
       const fileReaderPromises = files.map((file) => {
         const reader = new FileReader();
@@ -321,11 +345,17 @@ class FilePickerWidget extends BaseWidget<
               textReader.onloadend = () => {
                 const text = textReader.result;
                 const newFile = {
+                  type: file.type,
                   id: file.id,
                   base64: base64data,
-                  blob: file.data,
                   raw: rawData,
                   text: text,
+                  data:
+                    this.props.fileDataType === FileDataTypes.Base64
+                      ? base64data
+                      : this.props.fileDataType === FileDataTypes.Binary
+                      ? rawData
+                      : text,
                   name: file.meta ? file.meta.name : undefined,
                 };
 
@@ -337,7 +367,10 @@ class FilePickerWidget extends BaseWidget<
       });
 
       Promise.all(fileReaderPromises).then((files) => {
-        this.props.updateWidgetMetaProperty("files", dslFiles.concat(files));
+        this.props.updateWidgetMetaProperty(
+          "selectedFiles",
+          dslFiles.concat(files),
+        );
       });
     });
 
@@ -384,9 +417,9 @@ class FilePickerWidget extends BaseWidget<
   componentDidUpdate(prevProps: FilePickerWidgetProps) {
     super.componentDidUpdate(prevProps);
     if (
-      prevProps.files &&
+      prevProps.selectedFiles &&
-      prevProps.files.length > 0 &&
+      prevProps.selectedFiles.length > 0 &&
-      this.props.files === undefined
+      this.props.selectedFiles === undefined
     ) {
       this.state.uppy.reset();
     } else if (
@@ -415,7 +448,7 @@ class FilePickerWidget extends BaseWidget<
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         label={this.props.label}
-        files={this.props.files || []}
+        files={this.props.selectedFiles || []}
         isLoading={this.props.isLoading || this.state.isLoading}
         isDisabled={this.props.isDisabled}
       />
@@ -436,13 +469,20 @@ export interface FilePickerWidgetProps extends WidgetProps, WithMeta {
   label: string;
   maxNumFiles?: number;
   maxFileSize?: number;
-  files?: any[];
+  selectedFiles?: any[];
   allowedFileTypes: string[];
   onFilesSelected?: string;
+  fileDataType: FileDataTypes;
   isRequired?: boolean;
   uploadedFileUrlPaths?: string;
 }
 
+export enum FileDataTypes {
+  Base64 = "Base64",
+  Text = "Text",
+  Binary = "Binary",
+}
+
 export default FilePickerWidget;
 export const ProfiledFilePickerWidget = Sentry.withProfiler(
   withMeta(FilePickerWidget),

app/server/appsmith-plugins/amazons3Plugin/src/main/resources/editor.json

@@ -137,7 +137,7 @@
           "label": "Base64 Encode File - Yes/No",
           "configProperty": "actionConfiguration.pluginSpecifiedTemplates[5].value",
           "controlType": "DROP_DOWN",
-          "initialValue": "NO",
+          "initialValue": "YES",
           "options": [
             {
               "label": "Yes",