[READ-ONLY] Mirror of https://github.com/probablykasper/svelte-droplet. File dropzone for Svelte
svelte-droplet.kasper.space
file-drop
svelte
typescript
Add `max` property
+28
-6
+12
-3
README.md
+12
-3
README.md
···
11
11
}
12
12
</script>
13
13
<FileDrop {handleFiles} let:droppable>
14
-
<div class="zone" class:droppable>
15
-
Select or drop files here
16
-
</div>
14
+
<div class="zone" class:droppable>Select or drop files here</div>
17
15
</FileDrop>
18
16
```
17
+
18
+
## Props
19
+
| Prop | Type | Description |
20
+
| :-------------- | :--------------- | :------------------------------------------- |
21
+
| `acceptedMimes` | string[] \| null | List of allowed mime types, like `image/jpeg` or `image/*`. Invalid files are simply filtered out.<br>Null: all are allowed (default) |
22
+
| `max` | number \| null | Max number of files allowed. Extra files are ignored. Defaults to 0 (no limit) |
23
+
24
+
## Slot props
25
+
| Prop | Type | Description |
26
+
| :----------- | :------- | :------------ |
27
+
| `droppable` | boolean | True if the dropzone is currently hovered with valid files |
19
28
20
29
## Dev instructions
21
30
+16
-3
src/lib/FileDrop.svelte
+16
-3
src/lib/FileDrop.svelte
···
4
4
}
5
5
6
6
/**
7
-
* List of allowed mime types, like `image/jpeg` or `image/*`. Invalid files are simply filtered out.
7
+
* List of allowed mime types, like `image/jpeg` or `image/*`. Invalid files are ignored.
8
8
*
9
-
* Null: all file extensions are allowed (default)
9
+
* Null: all are allowed (default)
10
10
*/
11
11
export let acceptedMimes: string[] | null = null
12
12
13
+
/**
14
+
* Max number of files allowed. Extra files are ignored.
15
+
*
16
+
* Defaults to 0 (no limit)
17
+
*/
18
+
export let max = 0
19
+
13
20
let droppable = false
14
21
let input: HTMLInputElement
15
22
···
19
26
if (acceptedMimes === null || isAcceptedMime(files[i].type)) {
20
27
acceptedFiles.push(files[i])
21
28
}
29
+
}
30
+
if (max !== 0) {
31
+
acceptedFiles = acceptedFiles.slice(0, max)
22
32
}
23
33
return acceptedFiles
24
34
}
···
81
91
on:dragover|preventDefault={dragOver}
82
92
on:dragenter|preventDefault={dragOver}
83
93
on:dragleave|preventDefault={dragLeave}
94
+
tabindex="0"
84
95
on:click={() => input.click()}
85
96
>
86
97
<slot {droppable}>Upload</slot>
···
88
99
<input
89
100
type="file"
90
101
accept={acceptedMimes === null ? null : acceptedMimes.join(',')}
102
+
multiple={max !== 1}
91
103
bind:files={inputFiles}
92
104
on:change|preventDefault={handleChange}
93
105
bind:this={input}
94
-
multiple
95
106
/>
96
107
97
108
<style lang="sass">
109
+
div
110
+
cursor: pointer
98
111
input
99
112
display: none
100
113
</style>