chanced / filedrop-svelte Goto Github PK

Newer Svelte versions give the following warning:

[vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

I want to use multiple FileDrops, therefore disable windowDrop.

I expected

<FileDrop windowDrop="false" on:filedrop={(e) => { files = e.detail.files }}>
        Upload files
</FileDrop>

but I get a TypeScript error. How can I pass the additional option?

When using the "click to upload" feature, the on:filedrop event doesn't fire when you attempt to upload the same file a second time. This appears to be a fairly well-known behavior of the <input type="file"> component:

• https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file

Repro case should be something like the following:

// my-test.svelte
<script>
  function onDrop(event:CustomEvent) {
    console.info("dropped", event)
  }
</script>
<div 
    use:filedrop={{ clickToUpload: true }} 
    on:filedrop={onDrop}
/>

Run the above then:

• click on the dropzone and select a file -- notice that the console message is printed.
• click on dropzone again and select the same file -- notice that the console message is not printed this time.
• click on dropzone and select a different file -- notice that the message is printed

In my app, I have added a timeout to my onDrop() which clears the field between clicks, which fixes the problem.
I'm sure there is a more elegant solution.

onDrop(event:CustomEvent) {
    console.info("dropped", event)
    const input = (event.target as HTMLElement)?.querySelector?.("input") as HTMLInputElement
    if (input) {
      setTimeout(() => {
        try {
          input.value = ""
        } catch (e) {}
      }, 100)
    }
}

The REPL link included in README shows me this error 'default' is not exported by https://unpkg.com/[email protected]/dist/filesize.esm.js, imported by ./App.svelte

Hi!

I found that FileSizeLimitExceededError exception contains incorrect ErrorCode - FileSizeMinimumNotMet instead of FileSizeMaximumExceeded

Please, check it out:

When I drag a file on the instrumented node, the following errors are thrown in console:

Hi there,

I just found your library and it serves my purpose pretty well! If I may, I would like to suggest that you add support for directory uploads using the system dialog via the webkitdirectory (caniuse.com) property. This way, folder uploads can be supported when uploading via the system dialog.

I am not quite sure how to do this currently, as using use:filedrop allows me to specifiy my own input[type="file"], but these elements are automatically hidden. This prevents me from showing two upload buttons instead of one ("upload files", "upload folder"), which is exactly what Google does with Google Drive.

See screenshot

I would love to hear your thoughts on this!

Seems like this can't be installed unless the project uses typescript?

Currently the component height is hardcoded at 200px which is anoying as it is way to high for my purposes and might be to small for other people.

I've made a PR (#3)

It would be nice for the FileDrop Action Example to visually indicate the filedragover event. Maybe by changing border or background color.

This would be especially useful if you have multiple FileDrop elements and windowDrop=false. With the visual indication the user knows for sure that s/he is dropping the file on an active element (and not just next to it).

I tried to create a FileDrop Action Example with visual filedragenter but the filedragover event is lost when the file is moved over the cloud image or text within the FileDrop element.

I'd expect leaving options.multiple as the default & setting options.fileLimit to anything > 1 to allow multiple files to be uploaded.

Is the a ! missing from this code ?

export function processFiles(files: FileWithPath[], options: FileDropOptions): Files {
	let { fileLimit } = options;
	if (options.multiple) {
		fileLimit = 1;
	}

If not, then what options do I set to upload multiple files ?

Support files that are pasted -- even just an example in the documentation if that is more appropriate.

Thanks!

svelte-check will throw an error at the moment if you try to use events with dom elements with Svelte 4, I think the typescript declaration now needs to look more like this:

declare type FileDropEvent = import('filedrop-svelte/event').FileDropEvent;
declare type FileDropSelectEvent = import('filedrop-svelte/event').FileDropSelectEvent;
declare type FileDropDragEvent = import('filedrop-svelte/event').FileDropDragEvent;
declare namespace svelteHTML {
  interface HTMLAttributes<T> {
      'on:filedrop'?: (
          event: CustomEvent<FileDropSelectEvent> & {
              target: EventTarget & T;
          }
      ) => void;
      // etc
  }
}

(svelteHTML namespace instead of 'svelte.JSX' and 'on:event' instead of 'onevent', this seems to work for me)

Problem
The current configuration options do not allow disabling the keydown listener for the space and enter key. The only way to achieve this so far is to set the dropzone to disabled, which for obvious reasons does not lead to the desired result.
Proposed Solution
Therefore, I suggest adding a configuration option called "spaceToUpload" / "enterToUpload" / "keyDownToUpload" which can be set to false.

Edit: After digging through the code, I found an undocumented way to remove the keydown listener: hideInput and clickToUpload must both be set to false.

I know this might be a silly question but I am new to svelte and have spent about an hour trying to figure out where the files save too and I have not figured it out so I though it would be worth a shot to ask here

Many thanks for this great module!

However, I came across some type issues.
If I use
declare type FileDropEvent = import("filedrop-svelte/lib/event").FileDropEvent;
it doesn't work because "filedrop-svelte/lib/event" doesn't exist as it's not exported.

First mentioned here: #5
From what I can understand from the docs, I think filedragenter and filedragleave are emitted too often.

I assume that filedragenter should only be emitted once, when the user's cursor enters the dropzone while dragging some files. The reverse should be true for filedragleave.

In this REPL (fixed), you can observe the console logs by opening your DevTools. If you drag some files to the drop zone (don't release) and start moving your mouse up and down inside the drop zone, events are emitted (both enter and leave events).