dbeaver/pro#4711 support uploadable textarea

webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx

@@ -17,7 +17,8 @@ import {
   getObjectPropertyValueType,
   type IObjectPropertyInfo,
 } from '@cloudbeaver/core-sdk';
-import { EMPTY_ARRAY, removeMetadataFromDataURL } from '@cloudbeaver/core-utils';
+import { EMPTY_ARRAY, getTextFileReadingProcess, removeMetadataFromDataURL } from '@cloudbeaver/core-utils';
+import { clsx } from '@dbeaver/ui-kit';
 
 import { FieldCheckbox } from '../../FormControls/Checkboxes/FieldCheckbox.js';
 import { Select } from '../../FormControls/Select.js';
@@ -30,6 +31,8 @@ import { Link } from '../../Link.js';
 import { useTranslate } from '../../localization/useTranslate.js';
 import { evaluate } from '../evaluate.js';
 import { SAVED_VALUE_INDICATOR } from '../../SAVED_VALUE_INDICATOR.js';
+import { UploadArea } from '../../UploadArea.js';
+import { Button } from '../../Button.js';
 
 interface RenderFieldProps {
   property: IObjectPropertyInfo;
@@ -204,6 +207,46 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     );
   }
 
+  if (controlType === 'uploadable-textarea' && state && property.id) {
+    async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
+      const file = event.target.files?.[0];
+
+      if (!file) {
+        throw new Error('File is not found');
+      }
+
+      const process = getTextFileReadingProcess(file);
+      const result = await process.promise;
+
+      if (state && property.id) {
+        state[property.id] = result;
+      }
+    }
+
+    return (
+      <div className="tw:flex tw:flex-col tw:gap-2">
+        <Textarea
+          required={required}
+          title={state[property.id]}
+          labelTooltip={property.description || property.displayName}
+          placeholder={placeholder}
+          name={property.id}
+          state={state}
+          disabled={disabled}
+          readOnly={readonly}
+          className={clsx('tw:flex-0!', className)}
+        >
+          {property.displayName ?? ''}
+        </Textarea>
+        <UploadArea disabled={disabled || readonly} reset onChange={handleFileUpload}>
+          <Button className="tw:w-max" tag="div" disabled={disabled || readonly} variant="secondary">
+            {translate('ui_file')}
+          </Button>
+        </UploadArea>
+      </div>
+    );
+  }
+
   if (controlType === 'file' && state) {
     return (
       <InputFileTextContent

webapp/packages/core-sdk/src/getObjectPropertyType.ts

@@ -7,20 +7,24 @@
  */
 import type { IObjectPropertyInfo } from './IObjectPropertyInfo.js';
 
-export type ObjectPropertyType = 'checkbox' | 'selector' | 'link' | 'textarea' | 'file' | 'input';
+export type ObjectPropertyType = 'checkbox' | 'selector' | 'link' | 'textarea' | 'file' | 'input' | 'uploadable-textarea';
 
 export function getObjectPropertyType(property: IObjectPropertyInfo): ObjectPropertyType {
   const dataType = property.dataType?.toLowerCase();
+  const isTextarea = dataType === 'string' && property.length === 'MULTILINE';
+  const isFile = property.features.includes('file');
 
   if (dataType === 'boolean') {
     return 'checkbox';
   } else if (property.validValues && property.validValues.length > 0) {
     return 'selector';
   } else if (property.features.includes('href')) {
     return 'link';
-  } else if (dataType === 'string' && property.length === 'MULTILINE') {
+  } else if (isTextarea && isFile) {
+    return 'uploadable-textarea';
+  } else if (isTextarea) {
     return 'textarea';
-  } else if (property.features.includes('file')) {
+  } else if (isFile) {
     return 'file';
   }