DragDrop.svelte 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <script lang="ts" generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body">
  2. import { onMount, onDestroy } from 'svelte'
  3. import type { Uppy } from '@uppy/core';
  4. import DragDropPlugin from '@uppy/drag-drop'
  5. let container: HTMLElement;
  6. let plugin: DragDropPlugin<M, B>;
  7. export let uppy: Uppy<M, B>;
  8. export let props: Object | undefined = {};
  9. const installPlugin = () => {
  10. const options = {
  11. id: 'svelte:DragDrop',
  12. inline: true,
  13. ...props,
  14. target: container
  15. }
  16. uppy.use(DragDropPlugin, options);
  17. plugin = uppy.getPlugin(options.id) as DragDropPlugin<M, B>;
  18. }
  19. const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
  20. if (plugin != null) uppyInstance.removePlugin(plugin);
  21. }
  22. onMount(() => installPlugin())
  23. onDestroy(() => uninstallPlugin())
  24. $: {
  25. const options = {
  26. id: 'svelte:DragDrop',
  27. ...props,
  28. target: container
  29. }
  30. uppy.setOptions(options)
  31. }
  32. </script>
  33. <div class="uppy-Container" bind:this={container} />