Native file support

Besides custom data passing between components.

Vue dnd also supports native ondrop events.

Import NativeFile type

Before we create the drop zone, we need to import the special NativeFile type.

import { NativeFile } from '@mmis1000/vue-dnd'

This type is a special type that makes the useDroppable hook to receive any drop events.

Init the hook and handle the events

You just use this type like a regular Type, and handle the native event.

const image = ref('')
const { propsItem, hoverState } = useDroppable(
    NativeFile.withFilter(ev => {
        return (ev.dataTransfer?.types.indexOf('Files') ?? -1) >= 0
    }),
    {
        onDrop(ev: DragEvent) {
            if (ev.dataTransfer?.files.length ?? 0 > 0) {
                const file = ev.dataTransfer!.files.item(0)!
                if (!file.type.startsWith('image/')) {
                    console.log('not a image')
                    return
                }
                const url = URL.createObjectURL(file)
                if (image.value !== '') {
                    URL.revokeObjectURL(image.value)
                }
                image.value = url
                console.log('a image dropped')
            }
        }
    }
);

Result

example Source

Drop image here

Note

This type does supports withFilter that accept a argument of DragEvent, but you can't get the file content of native drop events before ondrop happens.

This is a native limit and there is no way to workaround it.