made files a derived prop to change based on the file data type
added file type
This commit is contained in:
parent
d7a5f36fea
commit
11c8d4f34b
|
|
@ -254,8 +254,9 @@ export const GLOBAL_DEFS = {
|
||||||
description: "string",
|
description: "string",
|
||||||
},
|
},
|
||||||
file: {
|
file: {
|
||||||
name: "text",
|
|
||||||
data: "string",
|
data: "string",
|
||||||
|
name: "text",
|
||||||
|
type: "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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user