diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx index a660103fb..3c946249a 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.dropFileHere} + + )} + {!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..0ba3f4956 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}; } + .dropFileHereText { + 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..425cb58d5 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', + dropFileHere: 'Drop file here', filesSelected: 'files selected', }, ModalCloseButton: {