@onehat/ui 0.3.181 → 0.3.186

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.181",
+	"version": "0.3.186",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -49,7 +49,8 @@
 		"react-draggable": "^4.4.5",
 		"react-native": "*",
 		"react-native-draggable": "^3.3.0",
-		"react-native-svg": "*"
+		"react-native-svg": "*",
+		"use-file-picker": "^2.1.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.1",

package/src/Components/Form/Field/Combo/Combo.js

@@ -686,6 +686,7 @@ export function ComboComponent(props) {
 					h={UiGlobals.mode === UI_MODE_WEB ? styles.FORM_COMBO_MENU_HEIGHT + 'px' : null}
 					newEntityDisplayValue={newEntityDisplayValue}
 					disablePresetButtons={!isEditor}
+					alternateRowBackgrounds={false}
 					onChangeSelection={(selection) => {
 
 						if (Repository && selection[0]?.isPhantom) {

package/src/Components/Grid/Grid.js

@@ -121,6 +121,7 @@ function GridComponent(props) {
 			flex,
 			bg = '#fff',
 			verifyCanEdit,
+			alternateRowBackgrounds = true,
 			alternatingInterval = 2,
 
 			// withComponent
@@ -410,7 +411,7 @@ function GridComponent(props) {
 								}
 							} else if (showHovers && isHovered) {
 								mixWith = styles.GRID_ROW_HOVER_BG;
-							} else if (index % alternatingInterval === 0) { // i.e. every second line, or every third line
+							} else if (alternateRowBackgrounds && index % alternatingInterval === 0) { // i.e. every second line, or every third line
 								mixWith = styles.GRID_ROW_ALTERNATE_BG;
 							}
 							if (mixWith) {

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -138,7 +138,15 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				} else {
 					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
 					const currentSorter = SecondaryRepository.sorters[0];
-					if (currentSorter.name !== SecondaryRepository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
+					if (currentSorter.name.match(/__sort_order$/)) { // when it's using a sort column, keep using it
+						if (currentSorter.direction !== 'DESC') {
+							SecondaryRepository.pauseEvents();
+							SecondaryRepository.sort(currentSorter.name, 'DESC');
+							SecondaryRepository.setPage(1);
+							SecondaryRepository.resumeEvents();
+							await SecondaryRepository.reload();
+						}
+					} else if (currentSorter.name !== SecondaryRepository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
 						SecondaryRepository.pauseEvents();
 						SecondaryRepository.sort(SecondaryRepository.schema.model.idProperty, 'DESC');
 						SecondaryRepository.setPage(1);

package/src/Components/Hoc/withEditor.js

@@ -135,7 +135,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				} else {
 					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
 					const currentSorter = Repository.sorters[0];
-					if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
+					if (currentSorter.name.match(/__sort_order$/)) { // when it's using a sort column, keep using it
+						if (currentSorter.direction !== 'DESC') {
+							Repository.pauseEvents();
+							Repository.sort(currentSorter.name, 'DESC');
+							Repository.setPage(1);
+							Repository.resumeEvents();
+							await Repository.reload();
+						}
+					} else if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
 						Repository.pauseEvents();
 						Repository.sort(Repository.schema.model.idProperty, 'DESC');
 						Repository.setPage(1);

package/src/Components/Hoc/withFilters.js

@@ -297,6 +297,10 @@ export default function withFilters(WrappedComponent) {
 								elementProps.autoSubmit = true;
 							}
 						}
+						if (!Element) {
+							debugger;
+							return; // to protect against errors
+						}
 						if (field === 'q') {
 							elementProps.flex = 1;
 							elementProps.minWidth = 100;

package/src/Components/Hoc/withPresetButtons.js

@@ -1,4 +1,7 @@
 import React, { useState, useEffect, } from 'react';
+import {
+	Modal,
+} from 'native-base';
 import Clipboard from '../Icons/Clipboard.js';
 import Duplicate from '../Icons/Duplicate.js';
 import Edit from '../Icons/Edit.js';
@@ -6,7 +9,9 @@ import Eye from '../Icons/Eye.js';
 import Trash from '../Icons/Trash.js';
 import Plus from '../Icons/Plus.js';
 import Print from '../Icons/Print.js';
+import UploadDownload from '../Icons/UploadDownload.js';
 import inArray from '../../Functions/inArray.js';
+import UploadsDownloadsWindow from '../Window/UploadsDownloadsWindow.js';
 import _ from 'lodash';
 
 // Note: A 'present button' will create both a context menu item 
@@ -20,6 +25,7 @@ const presetButtons = [
 	'copy',
 	'duplicate',
 	// 'print',
+	'uploadDownload',
 ];
 
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
@@ -34,6 +40,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				// extract and pass
 				contextMenuItems = [],
 				additionalToolbarButtons = [],
+				useUploadDownload = false,
 				onChangeColumnsConfig,
 				verifyCanEdit,
 				verifyCanDelete,
@@ -60,6 +67,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				// withComponent
 				self,
 
+				// withData
+				Repository,
+
 				// withEditor
 				userCanEdit = true,
 				userCanView = true,
@@ -77,6 +87,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				selectorSelected,
 			} = props,
 			[isReady, setIsReady] = useState(false),
+			[isModalShown, setIsModalShown] = useState(false),
 			[localContextMenuItems, setLocalContextMenuItems] = useState([]),
 			[localAdditionalToolbarButtons, setLocalAdditionalToolbarButtons] = useState([]),
 			[localColumnsConfig, setLocalColumnsConfig] = useState([]),
@@ -124,6 +135,11 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
+					case 'uploadDownload':
+						if (!useUploadDownload) {
+							isDisabled = true;
+						}
+						break;
 					default:
 				}
 				return isDisabled;
@@ -224,6 +240,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					// 	handler = onPrint;
 					// 	icon = <Print />;
 					// 	break;
+					case 'uploadDownload':
+						key = 'uploadDownloadBtn';
+						text = 'Upload/Download';
+						handler = onUploadDownload;
+						icon = <UploadDownload />;
+						break;
 					default:
 				}
 				return {
@@ -282,7 +304,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				if (showInfo) {
 					showInfo('Copied to clipboard!');
 				}
-			};
+			},
+			onUploadDownload = () => setIsModalShown(true),
+			onModalClose = () => setIsModalShown(false);
 			// onPrint = () => {
 			// 	debugger;
 			// };
@@ -298,18 +322,32 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			return null;
 		}
 
-		return <WrappedComponent
-					{...propsToPass}
-					disablePresetButtons={false}
-					contextMenuItems={[
-						...contextMenuItems,
-						...localContextMenuItems,
-					]}
-					additionalToolbarButtons={[
-						...additionalToolbarButtons,
-						...localAdditionalToolbarButtons,
-					]}
-					onChangeColumnsConfig={onChangeColumnsConfigDecorator}
-				/>;
+		return <>
+					<WrappedComponent
+						{...propsToPass}
+						disablePresetButtons={false}
+						contextMenuItems={[
+							...contextMenuItems,
+							...localContextMenuItems,
+						]}
+						additionalToolbarButtons={[
+							...additionalToolbarButtons,
+							...localAdditionalToolbarButtons,
+						]}
+						onChangeColumnsConfig={onChangeColumnsConfigDecorator}
+					/>
+					{isModalShown && 
+						<Modal
+							isOpen={true}
+							onClose={onModalClose}
+						>
+							<UploadsDownloadsWindow
+								reference="uploadsDownloads"
+								onClose={onModalClose}
+								Repository={Repository}
+								columnsConfig={props.columnsConfig}
+							/>
+						</Modal>}
+				</>;
 	};
 }

package/src/Components/Panel/Panel.js

@@ -13,6 +13,7 @@ import Inflector from 'inflector-js';
 import Header from './Header.js';
 import Mask from './Mask.js';
 import withCollapsible from '../Hoc/withCollapsible.js';
+import withComponent from '../Hoc/withComponent.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -169,4 +170,4 @@ function Panel(props) {
 
 }
 
-export default withCollapsible(Panel);
+export default withComponent(withCollapsible(Panel));

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -0,0 +1,189 @@
+/**
+ * COPYRIGHT NOTICE
+ * This file is categorized as "Custom Source Code"
+ * and is subject to the terms and conditions defined in the
+ * "LICENSE.txt" file, which is part of this source code package.
+ */
+import { useState, } from 'react';
+import {
+	Icon,
+} from 'native-base';
+import Excel from '../Icons/Excel';
+import Panel from '../Panel/Panel.js';
+import Form from '../Form/Form.js';
+import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
+import downloadWithFetch from '../../Functions/downloadWithFetch.js';
+import withAlert from '../Hoc/withAlert.js';
+import withComponent from '../Hoc/withComponent.js';
+import Cookies from 'js-cookie';
+import _ from 'lodash';
+
+function UploadsDownloadsWindow(props) {
+	const
+		{
+			Repository,
+			columnsConfig = [],
+
+			// withComponent
+			self,
+
+			// withAlert
+			alert,
+			showInfo,
+		} = props,
+		[importFile, setImportFile] = useState(null),
+		[width, height] = useAdjustedWindowSize(400, 400),
+		onDownload = (isTemplate = false) => {
+			const
+				baseURL = Repository.api.baseURL,
+				filters = Repository.filters.reduce((result, current) => {
+					result[current.name] = current.value;
+					return result;
+				}, {}),
+				columns = columnsConfig.map((column) => {
+					return column.fieldName;
+				}),
+				order = Repository.getSortField() + ' ' + Repository.getSortDirection(),
+				model = Repository.name,
+				url = baseURL + 'Reports/getReport',
+				download_token = 'dl' + (new Date()).getTime(),
+				options = {
+					// method: 'GET',
+					method: 'POST',
+					body: JSON.stringify({
+						download_token,
+						report_id: 1,
+						filters,
+						columns,
+						order,
+						model,
+						isTemplate,
+					}),
+					headers: _.merge({ 'Content-Type': 'application/json' }, Repository.headers),
+				},
+				fetchWindow = downloadWithFetch(url, options),
+				interval = setInterval(function() {
+					const cookie = Cookies.get(download_token);
+					if (fetchWindow.window && cookie) {
+						clearInterval(interval);
+						Cookies.remove(download_token);
+						fetchWindow.window.close();
+					}
+				}, 1000);
+		},
+		onDownloadTemplate = () => {
+			onDownload(true);
+		},
+		onUpload = async () => {
+			const
+				url = Repository.api.baseURL + Repository.name + '/uploadBatch',
+				result = await Repository._send('POST', url, { importFile })
+										.catch(error => {
+											if (Repository.debugMode) {
+												console.log(url + ' error', error);
+												console.log('response:', error.response);
+											}
+										});
+			if (Repository.debugMode) {
+				console.log('Result ' + url, result);
+			}
+			const
+				parsed = JSON.parse(result.data),
+				{
+					data,
+					success,
+					message,
+				} = parsed;
+			if (!success) {
+				const msgElements = ['Could not upload.'];
+				if (message === 'Errors') {
+					// assemble the errors from the upload
+					_.each(data, (obj) => {
+						// {
+						// 	"2": "ID does not exist."
+						// }
+						const line = Object.entries(obj)
+											.map(([key, value]) => `Line ${key}: ${value}`)
+											.join("\n");
+						msgElements.push(line);
+					});
+				}
+				alert(msgElements.join("\n"));
+			} else {
+				setImportFile(null);
+				self.formSetValue('file', null);
+				showInfo("Upload successful.\n");
+			}
+		};
+	
+	return <Panel
+				{...props}
+				parent={self}
+				reference="UploadsDownloadsWindow"
+				isCollapsible={false}
+				title="Uploads & Downloads"
+				bg="#fff"
+				w={width}
+				h={height}
+				flex={null}
+			>
+				<Form
+					{...props}
+					parent={self}
+					reference="form"
+					items={[
+						{
+							"type": "Column",
+							"flex": 1,
+							"defaults": {},
+							"items": [
+								{
+									type: 'DisplayField',
+									text: 'Download an Excel file of the current grid contents.',
+								},
+								{
+									type: 'Button',
+									text: 'Download',
+									isEditable: false,
+									leftIcon: <Icon as={Excel} />,
+									onPress: () => onDownload(),
+								},
+								{
+									type: 'DisplayField',
+									text: 'Upload an Excel file to the current grid.',
+									mt: 10,
+								},
+								{
+									type: 'File',
+									name: 'file',
+									onChangeValue: setImportFile,
+									accept: '.xlsx',
+								},
+								{
+									type: 'Button',
+									text: 'Upload',
+									isEditable: false,
+									leftIcon: <Icon as={Excel} />,
+									isDisabled: !importFile,
+									onPress: onUpload,
+								},
+								{
+									type: 'Button',
+									text: 'Get Template',
+									isEditable: false,
+									onPress: onDownloadTemplate,
+									variant: 'ghost',
+								},
+							]
+						},
+					]}
+					// record={selection}
+					// onCancel={onCancel}
+					// onSave={onSave}
+					// onClose={onClose}
+					// onDelete={onDelete}
+				/>
+			</Panel>;
+}
+
+export default withComponent(withAlert(UploadsDownloadsWindow));

package/src/Functions/downloadWithFetch.js

@@ -1,13 +1,16 @@
 const downloadWithFetch = (url, options = {}) => {
+	let obj = {};
 	fetch(url, options)
 		.then( res => res.blob() )
 		.then( blob => {
 			const
 				winName = 'ReportWindow',
 				opts = 'resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1',
-				externalWindow = window.open('', winName, opts),
-				file = externalWindow.URL.createObjectURL(blob);
-			externalWindow.location.assign(file);
+				win = window.open('', winName, opts),
+				file = win.URL.createObjectURL(blob);
+			obj.window = win;
+			win.location.assign(file);
 		});
+	return obj;
 };
 export default downloadWithFetch;

package/src/PlatformImports/Web/File.js

@@ -1,11 +1,8 @@
-import { useState, useEffect, useRef, } from 'react';
+import { useEffect, } from 'react';
 import {
-	Box,
 	Button,
 	Column,
-	Pressable,
 	Row,
-	Spinner,
 	Text,
 } from 'native-base';
 import {
@@ -14,52 +11,22 @@ import {
 	UI_MODE_REACT_NATIVE,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
-import {
-	FILE_MODE_IMAGE,
-	FILE_MODE_FILE,
-} from '../../Constants/File.js';
-import { Avatar, Dropzone, FileMosaic, FileCard, FileInputButton, } from "@files-ui/react";
-import inArray from '../../Functions/inArray.js';
+// import {
+// 	FileAmountLimitValidator,
+// 	FileTypeValidator,
+// 	FileSizeValidator,
+// 	ImageDimensionsValidator,
+// } from 'use-file-picker/validators';
+import { useFilePicker, useImperativeFilePicker } from 'use-file-picker'; // https://www.npmjs.com/package/use-file-picker
 import IconButton from '../../Components/Buttons/IconButton.js';
 import Xmark from '../../Components/Icons/Xmark.js'
 import withAlert from '../../Components/Hoc/withAlert.js';
 import withValue from '../../Components/Hoc/withValue.js';
-import downloadWithFetch from '../../Functions/downloadWithFetch.js';
+import Loading from '../../Components/Messages/Loading.js';
 import _ from 'lodash';
 
-const
-	EXPANDED_MAX = 100,
-	COLLAPSED_MAX = 2;
-
-function FileCardCustom(props) {
-	const
-		{
-			id,
-			name: filename,
-			type: mimetype,
-			onDelete,
-			downloadUrl,
-			uploadStatus,
-		} = props,
-		isDownloading = uploadStatus && inArray(uploadStatus, ['preparing', 'uploading', 'success']);
-	return <Pressable
-				px={3}
-				py={1}
-				alignItems="center"
-				flexDirection="row"
-				borderRadius={5}
-				borderWidth={1}
-				borderColor="primary.700"
-				onPress={() => {
-					downloadWithFetch(downloadUrl);
-				}}
-			>
-				{isDownloading && <Spinner mr={2} />}
-				<Text>{filename}</Text>
-				{onDelete && <IconButton ml={1} icon={Xmark} onPress={() => onDelete(id)} />}
-			</Pressable>;
-}
 
+// This component is used to present a single file upload button
 
 function FileComponent(props) {
 
@@ -68,186 +35,99 @@ function FileComponent(props) {
 	}
 
 	const {
-			canCrud = true,
-			_dropZone = {},
-			_fileMosaic = {},
-			useFileMosaic = true,
-			accept, // 'image/*'
-			maxFiles = null,
-			disabled = false,
-			clickable = true,
-			confirmBeforeDelete = false,
-
-			// parentContainer
-			selectorSelected,
+			encodeAsBase64 = true,
+			readAs = 'BinaryString', // 'DataURL', 'Text', 'BinaryString', 'ArrayBuffer'
+			accept, // ['.png', '.txt'], 'image/*', '.txt'
+			multiple = false,
+			readFilesContent = true, // Ignores files content and omits reading process if set to false
+			validators, // [ new FileAmountLimitValidator({ max: 1 }), new FileTypeValidator(['jpg', 'png']), new FileSizeValidator({ maxFileSize: 50 * 1024 * 1024 /* 50 MB */ }), new ImageDimensionsValidator({maxHeight: 900,maxWidth: 1600,minHeight: 600,minWidth: 768,}),]
+			onFilesSelected, // always called, even if there are errors
+			onFilesRejected, // called when there were validation errors
+			onFilesSuccessfullySelected, // called when there were no validation errors
+			onFileRemoved, // called when a file is removed from the list of selected files
+			onClear, // called when the selection is cleared
 
 			// withValue
 			value,
 			setValue,
-
-			// withAlert
-			alert,
-			confirm,
-
 		} = props,
 		styles = UiGlobals.styles,
-		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
-		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity.id) : selectorSelected?.id,
-		modelid = useRef(modelidCalc),
-		[isReady, setIsReady] = useState(false),
-		[isUploading, setIsUploading] = useState(false),
-		[showAll, setShowAll] = useState(false),
-		[files, setFiles] = useState([]),
-		// buildFiles = () => {
-		// 	const files = _.map(Repository.entities, (entity) => {
-		// 		return {
-		// 			id: entity.id, //	string | number	The identifier of the file
-		// 			// file: null, //	File	The file object obtained from client drop or selection
-		// 			name: entity.attachments__filename, // string	The name of the file
-		// 			type: entity.attachments__mimetype, // string	The file mime type.
-		// 			size: entity.attachments__size, //	number	The size of the file in bytes.
-		// 			// valid: null, //	boolean	If present, it will show a valid or rejected message ("valid", "denied"). By default valid is undefined.
-		// 			// errors: null, //	string[]	The list of errors according to the validation criteria or the result of the given custom validation function.
-		// 			// uploadStatus: null, //	UPLOADSTATUS	The current upload status. (e.g. "uploading").
-		// 			// uploadMessage: null, //	string	A message that shows the result of the upload process.
-		// 			imageUrl: entity.attachments__uri, //	string	A string representation or web url of the image that will be set to the "src" prop of an <img/> tag. If given, the component will use this image source instead of reading the image file.
-		// 			downloadUrl: entity.attachments__uri, //	string	The url to be used to perform a GET request in order to download the file. If defined, the download icon will be shown.
-		// 			// progress: null, //	number	The current percentage of upload progress. This value will have a higher priority over the upload progress value calculated inside the component.
-		// 			// extraUploadData: null, //	Record<string, any>	The additional data that will be sent to the server when files are uploaded individually
-		// 			// extraData: null, //	Object	Any kind of extra data that could be needed.
-		// 			// serverResponse: null, //	ServerResponse	The upload response from server.
-		// 			// xhr: null, //	XMLHttpRequest	A reference to the XHR object that allows the upload, progress and abort events.
-		// 		};
-		// 	});
-		// 	setFiles(files);
-		// },
-		clearFiles = () => {
-			setFiles([]);
-		},
-		toggleShowAll = () => {
-			setShowAll(!showAll);
-		},
-		onDropzoneChange = (files) => {
-			if (!files.length) {
-				alert('No files accepted. Perhaps they were too large or the wrong file type?');
-				return;
-			}
-			setFiles(files);
-		},
-		onUploadStart = (files) => {
-			setIsUploading(true);
-		},
-		onUploadFinish = (files) => {
-			let isDoneUploading = true,
-				isError = false;
-
-			_.each(files, (file) => {
-				if (!file.xhr || file.xhr.status !== 200) {
-					isDoneUploading = false;
-					return false; // break
-				}
-			});
-
-			if (isDoneUploading) {
-				_.each(files, (file) => {
-					if (file.uploadStatus === 'error') {
-						isError = true;
-						const msg = file.serverResponse?.payload || 'An error occurred';
-						alert(msg);
-						return false;
-					}
-				});
-				if (!isError) {
-					setIsUploading(false);
+		{
+			openFilePicker,
+			filesContent,
+			loading,
+			errors,
+			plainFiles,
+			clear,
+		} = useFilePicker({
+			readAs,
+			accept,
+			multiple,
+			readFilesContent,
+			validators,
+			onFilesSelected,
+			onFilesRejected,
+			onFilesSuccessfullySelected: ({ filesContent, plainFiles }) => {
+				let value = filesContent[0].content;
+				if (readAs === 'BinaryString' && encodeAsBase64) {
+					value = btoa(value); // convert to base64 encoded string
 				}
-			}
-		},
-		onFileDelete = (id) => {
-			if (confirmBeforeDelete) {
-				confirm('Are you sure you want to delete the file?', () => doDelete(id));
-			} else {
-				doDelete(id);
-			}
-		},
-		doDelete = (id) => {
-
-
-		};
-
-	if (canCrud) {
-		_fileMosaic.onDelete = onFileDelete;
+				setValue(value);
+			},
+			onFileRemoved,
+			onClear: () => setValue(null),
+		});
+
+	useEffect(() => {
+		if (errors.length) {
+			const
+				errorStack = errors.map(err => err.name + ': ' + err.reason),
+				msg = errorStack.join("\n");
+			alert(msg);
+		}
+	}, [errors.length]);
+
+	useEffect(() => {
+		if (!value && filesContent.length) {
+			clear();
+		}
+	}, [value, filesContent.length]);
+
+	if (loading) {
+		return <Loading />;
 	}
-	let content = <Column
-						w="100%"
-						p={2}
-						background={styles.ATTACHMENTS_BG}
-					>
-						<Row flexWrap="wrap">
-							{files.map((file) => {
-								return <Box
-											key={file.id}
-											marginRight={4}
-										>
-											{useFileMosaic &&
-												<FileMosaic
-													{...file}
-													backgroundBlurImage={false}
-													{..._fileMosaic}
-												/>}
-											{!useFileMosaic &&
-												<FileCardCustom
-													{...file}
-													backgroundBlurImage={false}
-													{..._fileMosaic}
-												/>}
-										</Box>;
-							})}
-						</Row>
-						{Repository.total <= COLLAPSED_MAX ? null :
-							<Button
-								onPress={toggleShowAll}
-								mt={4}
-								_text={{
-									color: 'trueGray.600',
-									fontStyle: 'italic',
-									textAlign: 'left',
-									width: '100%',
-								}}
-								variant="ghost"
-							>{'Show ' + (showAll ? ' Less' : ' All ' + Repository.total)}</Button>}
-					</Column>;
-	
-	if (canCrud) {
-		content = <Dropzone
-						value={files}
-						onChange={onDropzoneChange}
-						accept={accept}
-						maxFiles={maxFiles}
-						maxFileSize={styles.ATTACHMENTS_MAX_FILESIZE}
-						autoClean={true}
-						uploadConfig={{
-							url: Repository.api.baseURL + Repository.name + '/uploadAttachment',
-							method: 'POST',
-							headers: Repository.headers,
-							autoUpload: true,
-						}}
-						headerConfig={{
-							deleteFiles: false,
-						}}
-						onUploadStart={onUploadStart}
-						onUploadFinish={onUploadFinish}
-						background={styles.ATTACHMENTS_BG}
-						color={styles.ATTACHMENTS_COLOR}
-						minHeight={150}
-						footer={false}
-						clickable={clickable}
-						{..._dropZone}
-					>
-						{content}
-					</Dropzone>;
 
+	let assembledComponents = null;
+	if (_.isEmpty(filesContent)) {
+		assembledComponents = <Button onPress={() => openFilePicker()}>Select File</Button>;
+	} else {
+		assembledComponents = <Row
+									px={3}
+									py={1}
+									alignItems="center"
+									borderRadius={5}
+									borderWidth={1}
+									borderColor="primary.700"
+								>
+									<IconButton
+										_icon={{
+											as: Xmark,
+											color: 'trueGray.600',
+											size: 'sm',
+										}}
+										onPress={() => clear()}
+										h="100%"
+										bg={styles.FORM_COMBO_TRIGGER_BG}
+										_hover={{
+											bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+										}}
+										mr={1}
+									/>
+									<Text>{plainFiles[0].name}</Text>
+								</Row>;
 	}
-	return content;
+
+	return assembledComponents;
 }
 
 export default withAlert(withValue(FileComponent));