Merge pull request #105 from KarimMokhtar/dev

fix: default styling and add required prop
KarimMokhtar · Feb 25, 2023 · e99cc22 · e99cc22
2 parents 30e8140 + 79afdc1
commit e99cc22
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,7 @@ export default DragDrop;
 | name         | string           | the name for your form (if exist)                                                                                   | `"myFile"`                                                |
 | multiple | boolean         | a boolean to determine whether the multiple files is enabled or not                                                    | `true OR false - false by default`                             |
 | label        | string           | the label (text) for your form (if exist) inside the uploading box - first word underlined                                                                                  | `"Upload or drop a file right here"`                      |
+| required     | boolean          | Conditionally set the input field as required | `true` or `false`|
 | disabled     | boolean          | this for disabled the input                                                                                         | `true OR false`                                           |
 | hoverTitle   | string           | text appears(hover) when trying to drop a file                                                                      | `"Drop here"`                                             |
 | fileOrFiles         | Array<File> or File or null     | this mainly made because if you would like to remove uploaded file(s) pass null or pass another file as initial        |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-drag-drop-files",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "description": "Light React Drag & Drop files and images library styled by styled-components",
   "author": "Karim <karimmokhtar28@gmail.com>",
   "license": "MIT",

diff --git a/src/FileUploader.tsx b/src/FileUploader.tsx
@@ -23,6 +23,7 @@ type Props = {
   disabled?: boolean | false;
   label?: string | undefined;
   multiple?: boolean | false;
+  required?: boolean | false;
   onSizeError?: (arg0: string) => void;
   onTypeError?: (arg0: string) => void;
   onDrop?: (arg0: File | Array<File>) => void;
@@ -98,6 +99,7 @@ const drawDescription = (
     disabled,
     label,
     multiple,
+    required,
     onDraggingStateChange
   }
  * @returns JSX Element
@@ -120,6 +122,7 @@ const FileUploader: React.FC<Props> = (props: Props): JSX.Element => {
     disabled,
     label,
     multiple,
+    required,
     onDraggingStateChange,
     dropMessageStyle
   } = props;
@@ -229,6 +232,7 @@ const FileUploader: React.FC<Props> = (props: Props): JSX.Element => {
         name={name}
         disabled={disabled}
         multiple={multiple}
+        required={required}
       />
       {dragging && (
         <HoverMsg style={dropMessageStyle}>

diff --git a/src/style.ts b/src/style.ts
@@ -15,10 +15,7 @@ const defaultStyle = css`
   border-radius: 5px;
   cursor: pointer;
   flex-grow: 0;
-`;
-export const UploaderWrapper = styled.label<any>`
-  position: relative;
-  ${(props) => (props.overRide ? '' : defaultStyle)};
+
   &.is-disabled {
     border: dashed 2px ${darkGray};
     cursor: no-drop;
@@ -31,8 +28,18 @@ export const UploaderWrapper = styled.label<any>`
       }
     }
   }
+`;
+export const UploaderWrapper = styled.label<any>`
+  position: relative;
+  ${(props) => (props.overRide ? '' : defaultStyle)};
+  &:focus-within {
+    outline: 2px solid black;
+  }
   & > input {
-    display: none;
+    display: block;
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
   }
 `;
 /**