Skip to content

Commit

Permalink
Merge pull request #10 from yosipy/2
Browse files Browse the repository at this point in the history 
AcceptedFiles and fileRejections directly as arguments to onSelect
  • Loading branch information
@yosipy
yosipy authored Jul 28, 2024
2 parents fc01f3d + ddc8b27 commit 4b00369
Show file tree
Hide file tree
Showing 14 changed files with 163 additions and 114 deletions.
17 changes: 7 additions & 10 deletions docs/examples/accepting-specific-file-types.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
useReactDropzoneVV,
ReactDropzoneVV,
RejectedClassifiedFile,
} from "@lib/index"
} from "react-dropzone-vv"

export const Accept: FC = () => {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>([])
Expand All @@ -35,15 +35,9 @@ export const Accept: FC = () => {

const reactDropzoneVV = useReactDropzoneVV({
accept: "image/png,.webp",
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
const tFileRejections = classifiedFiles.filter(
(classifiedFile) => classifiedFile.status == "rejected"
)
setAcceptedFiles(tAcceptedFiles)
setFileRejections(tFileRejections)
onSelect: async (props) => {
setAcceptedFiles(props.acceptedFiles)
setFileRejections(props.fileRejections)
},
})

Expand All @@ -58,6 +52,9 @@ export const Accept: FC = () => {
}}
>
<p>Drag & drop some files here, or click to select files</p>
<p>
{'(Allowed mime type is "image/png", or file extention is ".webp")'}
</p>
</ReactDropzoneVV>

<div>acceptedFiles</div>
Expand Down
15 changes: 6 additions & 9 deletions docs/examples/accepting-specific-file-types/Accept.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,9 @@ export const Accept: FC = () => {

const reactDropzoneVV = useReactDropzoneVV({
accept: "image/png,.webp",
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
const tFileRejections = classifiedFiles.filter(
(classifiedFile) => classifiedFile.status == "rejected"
)
setAcceptedFiles(tAcceptedFiles)
setFileRejections(tFileRejections)
onSelect: async (props) => {
setAcceptedFiles(props.acceptedFiles)
setFileRejections(props.fileRejections)
},
})

Expand All @@ -36,6 +30,9 @@ export const Accept: FC = () => {
}}
>
<p>Drag & drop some files here, or click to select files</p>
<p>
{'(Allowed mime type is "image/png", or file extention is ".webp")'}
</p>
</ReactDropzoneVV>

<div>acceptedFiles</div>
Expand Down
14 changes: 4 additions & 10 deletions docs/examples/basic-example.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
useReactDropzoneVV,
ReactDropzoneVV,
RejectedClassifiedFile,
} from "@lib/index"
} from "react-dropzone-vv"

export const Basic: FC = () => {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>([])
Expand All @@ -34,15 +34,9 @@ export const Basic: FC = () => {
>([])

const reactDropzoneVV = useReactDropzoneVV({
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
const tFileRejections = classifiedFiles.filter(
(classifiedFile) => classifiedFile.status == "rejected"
)
setAcceptedFiles(tAcceptedFiles)
setFileRejections(tFileRejections)
onSelect: async (props) => {
setAcceptedFiles(props.acceptedFiles)
setFileRejections(props.fileRejections)
},
onError: (e) => {
console.log(e)
Expand Down
12 changes: 3 additions & 9 deletions docs/examples/basic-example/Basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,9 @@ export const Basic: FC = () => {
>([])

const reactDropzoneVV = useReactDropzoneVV({
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
const tFileRejections = classifiedFiles.filter(
(classifiedFile) => classifiedFile.status == "rejected"
)
setAcceptedFiles(tAcceptedFiles)
setFileRejections(tFileRejections)
onSelect: async (props) => {
setAcceptedFiles(props.acceptedFiles)
setFileRejections(props.fileRejections)
},
onError: (e) => {
console.log(e)
Expand Down
15 changes: 6 additions & 9 deletions docs/examples/opening-file-dialog-programmatically.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,14 @@ onMounted(() => {

```tsx
import { FC, useState } from "react"
import { useReactDropzoneVV, ReactDropzoneVV } from "@lib/index"
import { useReactDropzoneVV, ReactDropzoneVV } from "react-dropzone-vv"

export const OpenProgrammatically: FC = () => {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>([])
const [selectedFiles, setSelectedFiles] = useState<File[]>([])

const reactDropzoneVV = useReactDropzoneVV({
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
setAcceptedFiles(tAcceptedFiles)
onSelect: async ({ acceptedFiles }) => {
setSelectedFiles(acceptedFiles)
},
})

Expand All @@ -57,8 +54,8 @@ export const OpenProgrammatically: FC = () => {

<div>acceptedFiles</div>
<ul>
{acceptedFiles.map((acceptedFile, index) => (
<li key={index}>{acceptedFile.name}</li>
{selectedFiles.map((selectedFile, index) => (
<li key={index}>{selectedFile.name}</li>
))}
</ul>
</section>
Expand Down
13 changes: 5 additions & 8 deletions docs/examples/opening-file-dialog-programmatically/OpenProgrammatically.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,11 @@ import { FC, useState } from "react"
import { useReactDropzoneVV, ReactDropzoneVV } from "@lib/index"

export const OpenProgrammatically: FC = () => {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>([])
const [selectedFiles, setSelectedFiles] = useState<File[]>([])

const reactDropzoneVV = useReactDropzoneVV({
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
setAcceptedFiles(tAcceptedFiles)
onSelect: async ({ acceptedFiles }) => {
setSelectedFiles(acceptedFiles)
},
})

Expand All @@ -35,8 +32,8 @@ export const OpenProgrammatically: FC = () => {

<div>acceptedFiles</div>
<ul>
{acceptedFiles.map((acceptedFile, index) => (
<li key={index}>{acceptedFile.name}</li>
{selectedFiles.map((selectedFile, index) => (
<li key={index}>{selectedFile.name}</li>
))}
</ul>
</section>
Expand Down
14 changes: 4 additions & 10 deletions docs/introduction/Introduction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,9 @@ export const Introduction: FC = () => {

const reactDropzoneVV = useReactDropzoneVV({
accept: "image/*",
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
const tFileRejections = classifiedFiles.filter(
(classifiedFile) => classifiedFile.status == "rejected"
)
setAcceptedFiles(tAcceptedFiles)
setFileRejections(tFileRejections)
onSelect: async (props) => {
setAcceptedFiles(props.acceptedFiles)
setFileRejections(props.fileRejections)
},
onError: (e) => {
console.log(e)
Expand All @@ -39,7 +33,7 @@ export const Introduction: FC = () => {
}}
>
<p>Drag & drop some files here, or click to select files</p>
<p>{"(meme type: 'image/*')"}</p>
<p>{'(Allowed mime type is "image/*"")'}</p>
</ReactDropzoneVV>

<div>acceptedFiles</div>
Expand Down
16 changes: 5 additions & 11 deletions docs/introduction/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
useReactDropzoneVV,
ReactDropzoneVV,
RejectedClassifiedFile,
} from "@lib/index"
} from "react-dropzone-vv"

export const Introduction: FC = () => {
const [acceptedFiles, setAcceptedFiles] = useState<File[]>([])
Expand All @@ -26,15 +26,9 @@ export const Introduction: FC = () => {

const reactDropzoneVV = useReactDropzoneVV({
accept: "image/*",
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
const tFileRejections = classifiedFiles.filter(
(classifiedFile) => classifiedFile.status == "rejected"
)
setAcceptedFiles(tAcceptedFiles)
setFileRejections(tFileRejections)
onSelect: async (props) => {
setAcceptedFiles(props.acceptedFiles)
setFileRejections(props.fileRejections)
},
onError: (e) => {
console.log(e)
Expand All @@ -52,7 +46,7 @@ export const Introduction: FC = () => {
}}
>
<p>Drag & drop some files here, or click to select files</p>
<p>{"(meme type: 'image/*')"}</p>
<p>{'(Allowed mime type is "image/*"")'}</p>
</ReactDropzoneVV>

<div>acceptedFiles</div>
Expand Down
43 changes: 22 additions & 21 deletions docs/introduction/hooks-and-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,9 @@ export const Introduction: FC = () => {

const reactDropzoneVV = useReactDropzoneVV({
accept: "image/*",
onSelect: async (classifiedFiles) => {
const tAcceptedFiles = classifiedFiles
.filter((classifiedFile) => classifiedFile.status == "accepted")
.map((classifiedFile) => classifiedFile.file)
const tFileRejections = classifiedFiles.filter(
(classifiedFile) => classifiedFile.status == "rejected"
)
setAcceptedFiles(tAcceptedFiles)
setFileRejections(tFileRejections)
onSelect: async (props) => {
setAcceptedFiles(props.acceptedFiles)
setFileRejections(props.fileRejections)
},
onError: (e) => {
console.log(e)
Expand All @@ -29,20 +23,26 @@ export const Introduction: FC = () => {
### PROPS & METHODS
| Prop name | Type | Default | Description |
| --------------------- | ------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| accept | string | "" | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) states the following: The accept attribute takes as its value a comma-separated list of one or more file types, or [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers), describing which file types to allow. ex: `"audio/*,image/webp,.jpg,.pdf"` |
| disabled | boolean | false | |
| disabledDropOnDocment | boolean | false | |
| multiple | boolean | true | |
| onDrop | (files: File[]) => void | | Callback when Drop event occurs. |
| onSelect | (classifiedFiles: ClassifiedFile[]) => void | | Callbacks when the Drop event occurs and when a file is selected in a dialog. |
| onError | (error: Error) => void | | |
| Prop name | Type | Default | Description |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| accept | string | "" | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) states the following: The accept attribute takes as its value a comma-separated list of one or more file types, or [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers), describing which file types to allow. ex: `"audio/*,image/webp,.jpg,.pdf"` |
| disabled | boolean | false | |
| disabledDropOnDocment | boolean | false | |
| multiple | boolean | true | |
| onDrop | (files: File[]) => void | | Callback when Drop event occurs. |
| onSelect | (props: { acceptedFiles: File[], fileRejections: RejectedClassifiedFile[], classifiedFiles: ClassifiedFile[] }) => void | | Callbacks when the Drop event occurs and when a file is selected in a dialog. |
| onError | (error: Error) => void | | |
### Supplement
### Supplement onSelect
This section describes the arguments of the onSelect callback function, classifiedFiles.
ClassifiedFiles are of type ClassifiedFile[] and ClassifiedFile is defined as follows:
For most applications, two are sufficient: acceptedFiles and fileRejections.
Use acceptedFiles if you need a list of accepted files, and use fileRejections if you need a list of rejected files.
The fileRejections contains the reason for the rejection.
classifiedFiles is an array containing both acceptedFiles and fileRejections.
classifiedFiles is useful, for example, for adding your own custom validations.
ClassifiedFile type is defined as follows:
```ts
export type RejectedCode = "more-than-one-file" | "accept-violations"
Expand Down Expand Up @@ -82,6 +82,7 @@ How to split an array by status can be seen in the example.
}}
>
<p>Drag & drop some files here, or click to select files</p>
<p>{'(Allowed mime type is "image/*"")'}</p>
</ReactDropzoneVV>
```
Expand Down
Loading

0 comments on commit 4b00369

Please sign in to comment.