Skip to content

Commit

Permalink
Merge pull request #144 from KarimMokhtar/dev
Browse files Browse the repository at this point in the history 
Fix file size calculationsm add uploaded label and fix for in input
  • Loading branch information
@KarimMokhtar
KarimMokhtar authored Oct 22, 2024
2 parents 85e1805 + 65418fb commit 7147b96
Show file tree
Hide file tree
Showing 8 changed files with 10,097 additions and 10,240 deletions.
4 changes: 3 additions & 1 deletion CONTRIBUTION.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# How to contribute:

- Fork the repo
- install the dependencies using `yarn install`, Make sure your node v. is `16`
- Make your changes and create a PR
- Make sure that you follow the "Semantic Commit Messages" below

Expand Down Expand Up @@ -30,4 +32,4 @@ More Examples:
- `style`: (formatting, missing semi colons, etc; no production code change)
- `refactor`: (refactoring production code, eg. renaming a variable)
- `test`: (adding missing tests, refactoring tests; no production code change)
- `chore`: (updating grunt tasks etc; no production code change)
- `chore`: (updating grunt tasks etc; no production code change)
43 changes: 22 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,27 +50,28 @@ export default DragDrop;

## Options

| Option | Type | Description | value example |
| ------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| 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 |
| classes | string | string with the classes wished to add | `"drop_area drop_zone"` |
| types | Array<strings> | array of strings with extensions to check and go throw | `['png', 'jpeg', ...]` |
| onTypeError | function | function that will be called only of error occurred related to type | `(err) => console.log(err)` |
| children | JSX Element, any | if you want to replace the current design inside the box of drop zone. (**it will remove the default exist style**) | `<div><p>this is inside drop area</p></div>` or just text |
| maxSize | number | the maximum size of the file (number in mb) | 2 |
| minSize | number | the minimum size of the file (number in mb) | 1 |
| onSizeError | function | function that will be called only if error related to min or max size occurred | `(file) => console.log(file)` |
| onDrop | function | function that will be called when the user drops file(s) on the drop area only | `(file) => console.log(file)` |
| onSelect | function | function that will be called when the user selects file(s) on click the file area only | `(file) => console.log(file)` |
| handleChange | function | function that will be called when the user selects or drops file(s) | `(file) => console.log(file)` |
| onDraggingStateChange | function | function that will be called with the state of dragging | `(dragging) => console.log(dragging)` |
| dropMessageStyle | CSS Properties | A CSS property to style the hover message | `{backgroundColor: 'red'}` |
| Option | Type | Description | value example |
|-----------------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|
| 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"` |
| uploadedLabel | string | the label (text) for your form (if exist) after a file was uploaded inside the uploading box | `"Uploaded Successfully! Upload another?"` |
| 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 |
| classes | string | string with the classes wished to add | `"drop_area drop_zone"` |
| types | Array<strings> | array of strings with extensions to check and go throw | `['png', 'jpeg', ...]` |
| onTypeError | function | function that will be called only of error occurred related to type | `(err) => console.log(err)` |
| children | JSX Element, any | if you want to replace the current design inside the box of drop zone. (**it will remove the default exist style**) | `<div><p>this is inside drop area</p></div>` or just text |
| maxSize | number | the maximum size of the file (number in mb) | 2 |
| minSize | number | the minimum size of the file (number in mb) | 1 |
| onSizeError | function | function that will be called only if error related to min or max size occurred | `(file) => console.log(file)` |
| onDrop | function | function that will be called when the user drops file(s) on the drop area only | `(file) => console.log(file)` |
| onSelect | function | function that will be called when the user selects file(s) on click the file area only | `(file) => console.log(file)` |
| handleChange | function | function that will be called when the user selects or drops file(s) | `(file) => console.log(file)` |
| onDraggingStateChange | function | function that will be called with the state of dragging | `(dragging) => console.log(dragging)` |
| dropMessageStyle | CSS Properties | A CSS property to style the hover message | `{backgroundColor: 'red'}` |

## How to contribute:
- Please follow the instructions inside this file: [here](CONTRIBUTION.md)
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-drag-drop-files",
"version": "2.3.10",
"version": "2.3.11",
"description": "Light React Drag & Drop files and images library styled by styled-components",
"author": "Karim <karimmokhtar28@gmail.com>",
"license": "MIT",
Expand Down Expand Up @@ -62,7 +62,7 @@
},
"dependencies": {
"prop-types": "^15.7.2",
"styled-components": "^5.3.0"
"styled-components": "^6.1.11"
},
"peerDependencies": {
"react": "^18.0.0",
Expand Down
Loading

0 comments on commit 7147b96

Please sign in to comment.