Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add uploadedLabel option #137

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: add uploadedLabel option #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 22 additions & 21 deletions README.md
View file
Open in desktop
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
63 changes: 41 additions & 22 deletions src/FileUploader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ type Props = {
fileOrFiles?: Array<File> | File | null;
disabled?: boolean | false;
label?: string | undefined;
uploadedLabel?: string | undefined;
multiple?: boolean | false;
required?: boolean | false;
onSizeError?: (arg0: string) => void;
Expand All @@ -40,6 +41,7 @@ type Props = {
* @param typeError - boolean to check if the file has type errors
* @param disabled - boolean to check if input is disabled
* @param label - string to add custom label
* @param uploadedLabel - string to add custom label when a file was uploaded
* @returns JSX Element
*
* @internal
Expand All @@ -50,7 +52,8 @@ const drawDescription = (
uploaded: boolean,
typeError: boolean,
disabled: boolean | undefined,
label: string | undefined
label: string | undefined,
uploadedLabel: string | undefined
) => {
return typeError ? (
<span>File type/size error, Hovered on types!</span>
Expand All @@ -73,7 +76,15 @@ const drawDescription = (
</>
) : (
<>
<span>Uploaded Successfully!</span> Upload another?
{uploadedLabel ? (
<>
<span>{uploadedLabel}</span>
</>
) : (
<>
<span>Uploaded Successfully!</span> Upload another?
</>
)}
</>
)}
</Description>
Expand All @@ -83,25 +94,25 @@ const drawDescription = (
/**
* File uploading main function
* @param props - {name,
hoverTitle,
types,
handleChange,
classes,
children,
maxSize,
minSize,
fileOrFiles,
onSizeError,
onTypeError,
onSelect,
onDrop,
onTypeError,
disabled,
label,
multiple,
required,
onDraggingStateChange
}
hoverTitle,
types,
handleChange,
classes,
children,
maxSize,
minSize,
fileOrFiles,
onSizeError,
onTypeError,
onSelect,
onDrop,
onTypeError,
disabled,
label,
multiple,
required,
onDraggingStateChange
}
* @returns JSX Element
*/
const FileUploader: React.FC<Props> = (props: Props): JSX.Element => {
Expand All @@ -121,6 +132,7 @@ const FileUploader: React.FC<Props> = (props: Props): JSX.Element => {
onDrop,
disabled,
label,
uploadedLabel,
multiple,
required,
onDraggingStateChange,
Expand Down Expand Up @@ -244,7 +256,14 @@ const FileUploader: React.FC<Props> = (props: Props): JSX.Element => {
<>
<ImageAdd />
<DescriptionWrapper error={error}>
{drawDescription(currFiles, uploaded, error, disabled, label)}
{drawDescription(
currFiles,
uploaded,
error,
disabled,
label,
uploadedLabel
)}
<DrawTypes types={types} minSize={minSize} maxSize={maxSize} />
</DescriptionWrapper>
</>
Expand Down