made files a derived prop to change based on the file data type

added file type
This commit is contained in:
Nikhil Nandagopal 2021-03-12 14:34:05 +05:30
parent d7a5f36fea
commit 11c8d4f34b
2 changed files with 20 additions and 14 deletions

View File

@ -254,8 +254,9 @@ export const GLOBAL_DEFS = {
description: "string", description: "string",
}, },
file: { file: {
name: "text",
data: "string", data: "string",
name: "text",
type: "file",
}, },
}; };

View File

@ -197,7 +197,7 @@ class FilePickerWidget extends BaseWidget<
label: VALIDATION_TYPES.TEXT, label: VALIDATION_TYPES.TEXT,
maxNumFiles: VALIDATION_TYPES.NUMBER, maxNumFiles: VALIDATION_TYPES.NUMBER,
allowedFileTypes: VALIDATION_TYPES.ARRAY, allowedFileTypes: VALIDATION_TYPES.ARRAY,
files: VALIDATION_TYPES.ARRAY, selectedFiles: VALIDATION_TYPES.ARRAY,
isRequired: VALIDATION_TYPES.BOOLEAN, isRequired: VALIDATION_TYPES.BOOLEAN,
// onFilesSelected: VALIDATION_TYPES.ACTION_SELECTOR, // onFilesSelected: VALIDATION_TYPES.ACTION_SELECTOR,
}; };
@ -206,13 +206,13 @@ class FilePickerWidget extends BaseWidget<
static getDerivedPropertiesMap(): DerivedPropertiesMap { static getDerivedPropertiesMap(): DerivedPropertiesMap {
return { return {
isValid: `{{ this.isRequired ? this.files.length > 0 : true }}`, 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> { static getMetaPropertiesMap(): Record<string, any> {
return { return {
files: [], selectedFiles: [],
uploadedFileData: {}, uploadedFileData: {},
}; };
} }
@ -317,8 +317,8 @@ class FilePickerWidget extends BaseWidget<
}); });
this.state.uppy.on("file-removed", (file: any) => { 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; return file.id !== dslFile.id;
}) })
: []; : [];
@ -326,7 +326,9 @@ class FilePickerWidget extends BaseWidget<
}); });
this.state.uppy.on("files-added", (files: any[]) => { 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 fileReaderPromises = files.map((file) => {
const reader = new FileReader(); const reader = new FileReader();
@ -343,9 +345,9 @@ class FilePickerWidget extends BaseWidget<
textReader.onloadend = () => { textReader.onloadend = () => {
const text = textReader.result; const text = textReader.result;
const newFile = { const newFile = {
type: file.type,
id: file.id, id: file.id,
base64: base64data, base64: base64data,
blob: file.data,
raw: rawData, raw: rawData,
text: text, text: text,
data: data:
@ -365,7 +367,10 @@ class FilePickerWidget extends BaseWidget<
}); });
Promise.all(fileReaderPromises).then((files) => { Promise.all(fileReaderPromises).then((files) => {
this.props.updateWidgetMetaProperty("files", dslFiles.concat(files)); this.props.updateWidgetMetaProperty(
"selectedFiles",
dslFiles.concat(files),
);
}); });
}); });
@ -412,9 +417,9 @@ class FilePickerWidget extends BaseWidget<
componentDidUpdate(prevProps: FilePickerWidgetProps) { componentDidUpdate(prevProps: FilePickerWidgetProps) {
super.componentDidUpdate(prevProps); super.componentDidUpdate(prevProps);
if ( 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(); this.state.uppy.reset();
} else if ( } else if (
@ -443,7 +448,7 @@ class FilePickerWidget extends BaseWidget<
widgetId={this.props.widgetId} widgetId={this.props.widgetId}
key={this.props.widgetId} key={this.props.widgetId}
label={this.props.label} label={this.props.label}
files={this.props.files || []} files={this.props.selectedFiles || []}
isLoading={this.props.isLoading || this.state.isLoading} isLoading={this.props.isLoading || this.state.isLoading}
isDisabled={this.props.isDisabled} isDisabled={this.props.isDisabled}
/> />
@ -464,7 +469,7 @@ export interface FilePickerWidgetProps extends WidgetProps, WithMeta {
label: string; label: string;
maxNumFiles?: number; maxNumFiles?: number;
maxFileSize?: number; maxFileSize?: number;
files?: any[]; selectedFiles?: any[];
allowedFileTypes: string[]; allowedFileTypes: string[];
onFilesSelected?: string; onFilesSelected?: string;
fileDataType?: FileDataTypes; fileDataType?: FileDataTypes;