Add text when the user is dragging files over FileInputField

Author: atmelmicro

src/components/FileInputField/FileInputField.jsx

@@ -198,15 +198,20 @@ export const FileInputField = React.forwardRef((props, ref) => {
             type="button"
           >
             <Text lines={1}>
-              {!selectedFileNames.length && (
+              {isDragging && (
+                <span className={styles.dropHereText}>
+                  {translations.FileInputField.dropHere}
+                </span>
+              )}
+              {!isDragging && !selectedFileNames.length && (
                 <>
                   <span className={styles.dropZoneLink}>{translations.FileInputField.browse}</span>
                   {' '}
                   {translations.FileInputField.drop}
                 </>
               )}
-              {selectedFileNames.length === 1 && selectedFileNames[0]}
-              {selectedFileNames.length > 1 && (
+              {!isDragging && selectedFileNames.length === 1 && selectedFileNames[0]}
+              {!isDragging && selectedFileNames.length > 1 && (
                 <>
                   {selectedFileNames.length}
                   {' '}

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();
 

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: {