diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx index a660103fb..c9ae7d153 100644 --- a/src/components/FileInputField/FileInputField.jsx +++ b/src/components/FileInputField/FileInputField.jsx @@ -198,15 +198,20 @@ export const FileInputField = React.forwardRef((props, ref) => { type="button" > - {!selectedFileNames.length && ( + {isDragging && ( + + {translations.FileInputField.dropHere} + + )} + {!isDragging && !selectedFileNames.length && ( <> {translations.FileInputField.browse} {' '} {translations.FileInputField.drop} )} - {selectedFileNames.length === 1 && selectedFileNames[0]} - {selectedFileNames.length > 1 && ( + {!isDragging && selectedFileNames.length === 1 && selectedFileNames[0]} + {!isDragging && selectedFileNames.length > 1 && ( <> {selectedFileNames.length} {' '} diff --git a/src/components/FileInputField/FileInputField.module.scss b/src/components/FileInputField/FileInputField.module.scss index e71e75a9d..936c4f37f 100644 --- a/src/components/FileInputField/FileInputField.module.scss +++ b/src/components/FileInputField/FileInputField.module.scss @@ -64,6 +64,10 @@ --rui-local-border-color: #{settings.$drop-zone-active-border-color}; } + .dropHereText { + color: var(--rui-local-link-color, var(--rui-color-text-link)); + } + .dropZoneLink { @include links.base(); diff --git a/src/translations/en.js b/src/translations/en.js index 2fd451c57..50fc312a0 100644 --- a/src/translations/en.js +++ b/src/translations/en.js @@ -5,6 +5,7 @@ export default { FileInputField: { browse: 'Browse', drop: 'or drop file here', + dropHere: 'Drop here!', filesSelected: 'files selected', }, ModalCloseButton: {