[READ-ONLY] Mirror of https://github.com/probablykasper/svelte-droplet. File dropzone for Svelte
svelte-droplet.kasper.space
file-drop
svelte
typescript
Support file extensions in `acceptedMimes`
+23
-14
+3
CHANGELOG.md
+3
CHANGELOG.md
+1
-1
README.md
+1
-1
README.md
···
35
35
| Prop | Type | Description |
36
36
| :-------------- | :--------------- | :-------------------- |
37
37
| `handleFiles` | (files: File[]) => void | File handler function |
38
-
| `acceptedMimes` | string[] \| null | List of allowed mime types, like `image/jpeg` or `image/*`. Invalid files are ignored.<br>Defaults to `null` (all are allowed) |
38
+
| `acceptedMimes` | string[] \| null | List of allowed MIME types, like `image/jpeg` or `image/*`. Invalid files are ignored.<br>You can also use file extensions like `.jpg` but it will not enable `droppable` when the file is hovering, meaning you can't display a hover effect.<br>Defaults to `null` (all are allowed) |
39
39
| `max` | number \| null | Max number of files allowed. Extra files are ignored. Defaults to 0 (no limit) |
40
40
| `disabled` | boolean | Disables the component |
41
41
| `name` | string \| null | Name of the input field, useful for forms |
+19
-13
src/lib/FileDrop.svelte
+19
-13
src/lib/FileDrop.svelte
···
4
4
}
5
5
6
6
/**
7
-
* List of allowed mime types, like `image/jpeg` or `image/*`. Invalid files are ignored.
7
+
* List of allowed MIME types, like `image/jpeg` or `image/*`. Invalid files are ignored.
8
8
*
9
-
* Defaults to `null` (all are allowed)
9
+
* You can also use file extensions like `.jpg` but it will not enable `droppable` when the file is hovering, meaning you can't display a hover effect.
10
10
*
11
-
* Null: all are allowed (default)
11
+
* Defaults to `null` (all are allowed)
12
12
*/
13
13
export let acceptedMimes: string[] | null = null
14
14
···
42
42
function getAcceptedFiles(files: FileList | File[] = []): File[] {
43
43
let acceptedFiles = []
44
44
for (let i = 0; i < files.length; i++) {
45
-
if (acceptedMimes === null || isAcceptedMime(files[i].type)) {
45
+
if (acceptedMimes === null || isAccepted(files[i])) {
46
46
acceptedFiles.push(files[i])
47
47
}
48
48
}
···
52
52
return acceptedFiles
53
53
}
54
54
55
-
function isAcceptedMime(mime: string): boolean {
55
+
function isAccepted(item: DataTransferItem | File): boolean {
56
56
if (acceptedMimes === null) {
57
57
return true
58
58
}
59
-
for (const acceptedMime of acceptedMimes) {
60
-
if (acceptedMime === 'application/*' && mime.startsWith('application/')) {
59
+
for (const acceptedType of acceptedMimes) {
60
+
if (acceptedType.startsWith('.')) {
61
+
const file = item instanceof DataTransferItem ? item.getAsFile() : item
62
+
if (file?.name.endsWith(acceptedType)) {
63
+
return true
64
+
}
65
+
}
66
+
if (acceptedType === 'application/*' && item.type.startsWith('application/')) {
61
67
return true
62
-
} else if (acceptedMime === 'audio/*' && mime.startsWith('audio/')) {
68
+
} else if (acceptedType === 'audio/*' && item.type.startsWith('audio/')) {
63
69
return true
64
-
} else if (acceptedMime === 'video/*' && mime.startsWith('video/')) {
70
+
} else if (acceptedType === 'video/*' && item.type.startsWith('video/')) {
65
71
return true
66
-
} else if (acceptedMime === 'image/*' && mime.startsWith('image/')) {
72
+
} else if (acceptedType === 'image/*' && item.type.startsWith('image/')) {
67
73
return true
68
-
} else if (acceptedMime === 'text/*' && mime.startsWith('text/')) {
74
+
} else if (acceptedType === 'text/*' && item.type.startsWith('text/')) {
69
75
return true
70
-
} else if (mime === acceptedMime) {
76
+
} else if (item.type === acceptedType) {
71
77
return true
72
78
}
73
79
}
···
80
86
}
81
87
const items = Array.from(e.dataTransfer?.items || [])
82
88
for (const item of items) {
83
-
if (item.kind === 'file' && isAcceptedMime(item.type)) {
89
+
if (item.kind === 'file' && isAccepted(item)) {
84
90
droppable = true
85
91
return
86
92
}