Dropzone

Create a dropzone for file uploads.

Usage

<script>
    import { dropzone } from "@sveu/actions"

    function fn({ overDropzone, files }) {
        console.log(overDropzone, files)
    }

</script>

<div use:dropzone="{fn}">
    Drop files into dropZone
</div>
<script>
    import { dropzone } from "@sveu/actions"

    function fn({ overDropzone, files }) {
        console.log(overDropzone, files)
    }

</script>

<div use:dropzone="{fn}">
    Drop files into dropZone
</div>
svelte

Example

Drop files into dropZone

is Over Drop Zone: false
<script lang="ts">
    import { dropzone } from "@sveu/actions" 
    import type { DropzoneData } from "@sveu/actions"

    let over_dropzone = false

    let files_data: any[] = []

    function on_dropzone({ overDropzone, files }: DropzoneData) { 
        over_dropzone = overDropzone

        if (files) {
            files_data = files.map((file) => ({
                name: file.name,
                size: file.size,
                type: file.type,
                last_modified: file.lastModified,
            }))
        }
    }
</script>

<div class="flex text-center">
    <div class="h-auto w-full relative">
        <p>Drop files into dropZone</p>

        <!--   -->
        <div
            use:dropzone="{on_dropzone}"
            class="flex flex-col h-auto bg-gray-400/10 mt-6 w-full min-h-200px justify-center items-center">
            <div>is Over Drop Zone: {over_dropzone}</div>
            <div class="flex flex-wrap justify-center items-center">
                {#each files_data as file}
                    <div class="flex flex-col justify-center items-center">
                        <div>File Name: {file.name}</div>
                        <div>File Size: {file.size}</div>
                        <div>File Type: {file.type}</div>
                        <div>
                            File Last Modified: {new Intl.DateTimeFormat(
                                "en-US"
                            ).format(file.last_modified)}
                        </div>
                    </div>
                {/each}
            </div>
        </div>
    </div>
</div>
<script lang="ts">
    import { dropzone } from "@sveu/actions" 
    import type { DropzoneData } from "@sveu/actions"

    let over_dropzone = false

    let files_data: any[] = []

    function on_dropzone({ overDropzone, files }: DropzoneData) { 
        over_dropzone = overDropzone

        if (files) {
            files_data = files.map((file) => ({
                name: file.name,
                size: file.size,
                type: file.type,
                last_modified: file.lastModified,
            }))
        }
    }
</script>

<div class="flex text-center">
    <div class="h-auto w-full relative">
        <p>Drop files into dropZone</p>

        <!--   -->
        <div
            use:dropzone="{on_dropzone}"
            class="flex flex-col h-auto bg-gray-400/10 mt-6 w-full min-h-200px justify-center items-center">
            <div>is Over Drop Zone: {over_dropzone}</div>
            <div class="flex flex-wrap justify-center items-center">
                {#each files_data as file}
                    <div class="flex flex-col justify-center items-center">
                        <div>File Name: {file.name}</div>
                        <div>File Size: {file.size}</div>
                        <div>File Type: {file.type}</div>
                        <div>
                            File Last Modified: {new Intl.DateTimeFormat(
                                "en-US"
                            ).format(file.last_modified)}
                        </div>
                    </div>
                {/each}
            </div>
        </div>
    </div>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
Click fold/expand code

API

Arguments

Name Description Type Required
fn A function to be called when the dropzone is hovered or files are dropped. (data: DropzoneData) => void No


Events

Name Description Type
hover An event will fire once a file is over the dropzone CustomEvent<Boolean>
files An event will fire once a file is dropped. CustomEvent<File[]>


TIP

If you use typescript, you need to add ./node_modules/@sveu/actions/events.d.ts to your tsconfig.json file.

{
    ...

    "include": [
        ...
        "./node_modules/@sveu/actions/events.d.ts"
    ]
    ...
}
{
    ...

    "include": [
        ...
        "./node_modules/@sveu/actions/events.d.ts"
    ]
    ...
}
json
Last update at: Invalid Date