[READ-ONLY] Mirror of https://github.com/probablykasper/svelte-tauri-filedrop. Tauri file drop handling component for Svelte
dropzone
filedrop
package
svelte
tauri
Indent with tabs
+134
-134
+27
-27
README.md
+27
-27
README.md
···
14
14
## Usage
15
15
```svelte
16
16
<script lang="ts">
17
-
import FileDrop from 'svelte-tauri-filedrop'
17
+
import FileDrop from 'svelte-tauri-filedrop'
18
18
19
-
function open(paths: string[]) {
20
-
// ...
21
-
}
19
+
function open(paths: string[]) {
20
+
// ...
21
+
}
22
22
</script>
23
23
24
24
<FileDrop extensions={['json']} handleFiles={open} let:files>
25
-
<div class="dropzone" class:droppable={files.length > 0}>
26
-
<h2>Drop JSON files</h2>
27
-
</div>
25
+
<div class="dropzone" class:droppable={files.length > 0}>
26
+
<h2>Drop JSON files</h2>
27
+
</div>
28
28
</FileDrop>
29
29
30
30
<style>
31
-
.dropzone {
32
-
margin: 20px;
33
-
padding: 20px;
34
-
background: #eee;
35
-
}
36
-
.droppable {
37
-
background: #d6dff0;
38
-
}
31
+
.dropzone {
32
+
margin: 20px;
33
+
padding: 20px;
34
+
background: #eee;
35
+
}
36
+
.droppable {
37
+
background: #d6dff0;
38
+
}
39
39
</style>
40
40
```
41
41
···
74
74
### Publish new version
75
75
1. Update `CHANGELOG.md`
76
76
2. Check for errors
77
-
```
78
-
npm run check
79
-
```
77
+
```
78
+
npm run check
79
+
```
80
80
3. Bump the version number
81
-
```
82
-
npm version --no-git-tag <version>
83
-
```
81
+
```
82
+
npm version --no-git-tag <version>
83
+
```
84
84
4. Generate the package
85
-
```
86
-
npm run package
87
-
```
85
+
```
86
+
npm run package
87
+
```
88
88
5. Publish the package
89
-
```
90
-
npm publish ./package
91
-
```
89
+
```
90
+
npm publish ./package
91
+
```
92
92
6. Commit with a tag in format "v#.#.#"
93
93
7. Create GitHub release with release notes
+9
-9
src/app.html
+9
-9
src/app.html
···
1
-
<!DOCTYPE html>
1
+
<!doctype html>
2
2
<html lang="en">
3
-
<head>
4
-
<meta charset="utf-8" />
5
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
-
%sveltekit.head%
7
-
</head>
8
-
<body>
9
-
<div>%sveltekit.body%</div>
10
-
</body>
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
+
%sveltekit.head%
7
+
</head>
8
+
<body>
9
+
<div>%sveltekit.body%</div>
10
+
</body>
11
11
</html>
+67
-67
src/lib/FileDrop.svelte
+67
-67
src/lib/FileDrop.svelte
···
1
1
<script lang="ts">
2
-
import { event } from '@tauri-apps/api'
3
-
import { onDestroy } from 'svelte'
2
+
import { event } from '@tauri-apps/api'
3
+
import { onDestroy } from 'svelte'
4
4
5
-
/**
6
-
* List of allowed file extensions. Disallowed files are filtered out.
7
-
*
8
-
* If it's null (default), all file extensions are allowed.
9
-
*/
10
-
export let extensions: null | string[] = null
11
-
/** Handle a file drop of one or more files */
12
-
export let handleFiles: (files: string[]) => void = () => {
13
-
// noop
14
-
}
15
-
/**
16
-
* Handle a file drop of a single file.
17
-
*
18
-
* Note that `handleFile()` is also called, no matter what.
19
-
*
20
-
* This is not called if any disallowed files were filtered out.
21
-
*/
22
-
export let handleOneFile: (file: string) => void = () => {
23
-
// noop
24
-
}
5
+
/**
6
+
* List of allowed file extensions. Disallowed files are filtered out.
7
+
*
8
+
* If it's null (default), all file extensions are allowed.
9
+
*/
10
+
export let extensions: null | string[] = null
11
+
/** Handle a file drop of one or more files */
12
+
export let handleFiles: (files: string[]) => void = () => {
13
+
// noop
14
+
}
15
+
/**
16
+
* Handle a file drop of a single file.
17
+
*
18
+
* Note that `handleFile()` is also called, no matter what.
19
+
*
20
+
* This is not called if any disallowed files were filtered out.
21
+
*/
22
+
export let handleOneFile: (file: string) => void = () => {
23
+
// noop
24
+
}
25
25
26
-
function getValidPaths(paths: string[]) {
27
-
if (extensions === null) {
28
-
return paths
29
-
}
30
-
let validPaths = []
31
-
for (const path of paths) {
32
-
for (const ext of extensions) {
33
-
if (path.endsWith('.' + ext)) {
34
-
validPaths.push(path)
35
-
break
36
-
}
37
-
}
38
-
}
39
-
return validPaths
40
-
}
26
+
function getValidPaths(paths: string[]) {
27
+
if (extensions === null) {
28
+
return paths
29
+
}
30
+
let validPaths = []
31
+
for (const path of paths) {
32
+
for (const ext of extensions) {
33
+
if (path.endsWith('.' + ext)) {
34
+
validPaths.push(path)
35
+
break
36
+
}
37
+
}
38
+
}
39
+
return validPaths
40
+
}
41
41
42
-
let files: string[] = []
42
+
let files: string[] = []
43
43
44
-
const fileDropHover = event.listen('tauri://file-drop-hover', (e) => {
45
-
files = getValidPaths(e.payload as string[])
46
-
})
47
-
onDestroy(async () => {
48
-
const unlisten = await fileDropHover
49
-
unlisten()
50
-
})
44
+
const fileDropHover = event.listen('tauri://file-drop-hover', (e) => {
45
+
files = getValidPaths(e.payload as string[])
46
+
})
47
+
onDestroy(async () => {
48
+
const unlisten = await fileDropHover
49
+
unlisten()
50
+
})
51
51
52
-
const fileDrop = event.listen('tauri://file-drop', (e) => {
53
-
const payload = e.payload as string[]
54
-
files = getValidPaths(payload)
55
-
if (files.length > 0) {
56
-
handleFiles(files)
57
-
}
58
-
if (payload.length === 1 && files.length === 1) {
59
-
handleOneFile(files[0])
60
-
}
61
-
files = []
62
-
})
63
-
onDestroy(async () => {
64
-
const unlisten = await fileDrop
65
-
unlisten()
66
-
})
52
+
const fileDrop = event.listen('tauri://file-drop', (e) => {
53
+
const payload = e.payload as string[]
54
+
files = getValidPaths(payload)
55
+
if (files.length > 0) {
56
+
handleFiles(files)
57
+
}
58
+
if (payload.length === 1 && files.length === 1) {
59
+
handleOneFile(files[0])
60
+
}
61
+
files = []
62
+
})
63
+
onDestroy(async () => {
64
+
const unlisten = await fileDrop
65
+
unlisten()
66
+
})
67
67
68
-
const fileDropCancelled = event.listen('tauri://file-drop-cancelled', () => {
69
-
files = []
70
-
})
71
-
onDestroy(async () => {
72
-
const unlisten = await fileDropCancelled
73
-
unlisten()
74
-
})
68
+
const fileDropCancelled = event.listen('tauri://file-drop-cancelled', () => {
69
+
files = []
70
+
})
71
+
onDestroy(async () => {
72
+
const unlisten = await fileDropCancelled
73
+
unlisten()
74
+
})
75
75
</script>
76
76
77
77
<slot {files} />
+3
-3
src/routes/+layout.svelte
+3
-3
src/routes/+layout.svelte
+11
-11
src/routes/+page.svelte
+11
-11
src/routes/+page.svelte
···
1
1
<script lang="ts">
2
-
import FileDrop from '$lib/index'
2
+
import FileDrop from '$lib/index'
3
3
4
-
let droppedFiles: string[] = []
5
-
function open(paths: string[]) {
6
-
droppedFiles = paths
7
-
}
4
+
let droppedFiles: string[] = []
5
+
function open(paths: string[]) {
6
+
droppedFiles = paths
7
+
}
8
8
</script>
9
9
10
10
<h1>Main Example</h1>
11
11
12
12
<FileDrop extensions={['json']} handleFiles={open} let:files>
13
-
<div class="dropzone" class:droppable={files.length > 0}>
14
-
<h2>Drop JSON files</h2>
15
-
{#each droppedFiles as file}
16
-
<div>{file}</div>
17
-
{/each}
18
-
</div>
13
+
<div class="dropzone" class:droppable={files.length > 0}>
14
+
<h2>Drop JSON files</h2>
15
+
{#each droppedFiles as file}
16
+
<div>{file}</div>
17
+
{/each}
18
+
</div>
19
19
</FileDrop>
20
20
21
21
<style lang="sass">
+17
-17
tsconfig.json
+17
-17
tsconfig.json
···
1
1
{
2
-
"extends": "./.svelte-kit/tsconfig.json",
3
-
"compilerOptions": {
4
-
"allowJs": true,
5
-
"checkJs": true,
6
-
"esModuleInterop": true,
7
-
"forceConsistentCasingInFileNames": true,
8
-
"resolveJsonModule": true,
9
-
"skipLibCheck": true,
10
-
"sourceMap": true,
11
-
"strict": true,
12
-
"moduleResolution": "bundler"
13
-
}
14
-
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15
-
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16
-
//
17
-
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18
-
// from the referenced tsconfig.json - TypeScript does not merge them in
2
+
"extends": "./.svelte-kit/tsconfig.json",
3
+
"compilerOptions": {
4
+
"allowJs": true,
5
+
"checkJs": true,
6
+
"esModuleInterop": true,
7
+
"forceConsistentCasingInFileNames": true,
8
+
"resolveJsonModule": true,
9
+
"skipLibCheck": true,
10
+
"sourceMap": true,
11
+
"strict": true,
12
+
"moduleResolution": "bundler"
13
+
}
14
+
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15
+
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
16
+
//
17
+
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18
+
// from the referenced tsconfig.json - TypeScript does not merge them in
19
19
}