Improvements to @svelte-parts/drop-file

[stophecom]

Hi A***, great repo! I just checked out drop-file - it's great. I noticed that newer svelte version complains about typescript.

Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}

Also, I was wondering if the property multiple should be optional, since it would be better aligned with the native file input. (Also I only need one file in my app :))

Let me know, I can create PR.

[idris-maps]

Hello @stophecom

Long time no see.

This repo does indeed need to be updated to work with later svelte versions. I need to check how svelte 3 components are supposed to be published. Do you know of an example with not too complex setup?

[idris-maps]

Apparently you can prepare publishing packages with svelte-kit. I made an attempt with DropFile.

import { DropFile } from 'svelte-parts'

Looks like it works. Let me know if it does for you and I will move the other components to that library.

I also added a multiple property. But it only works if you browse the file system. You can still drop multiple files. If you do and multiple:true only one will be passed to onDrop. I have some doubts about that approach, probably better to pass them all and let the app handle the error. What do you think?

[idris-maps]

I moved the whole thing to svelte-kit.

for drop file you can use

import DropFile from 'svelte-parts/DropFile.svelte'

I kept the multiple arguments but reverted the part returning only the first file if the user dropped multiple files.

[stophecom]

Oh cool. Sorry, didn't get notifications for that repo. I actually ended up copying your solution since I needed to a more custom implementation (Dropzone will become a button on mobile, validation, also allowing the full window to accept drops). Got some inspiration here as well https://www.npmjs.com/package/svelte-file-dropzone However, I liked your minimal solution better.

I will add small PR for better types, maybe a disabled prop would be good as well.

[stophecom]

On a side note. There are two more properties/attributes that eventually could be supported. (Although capture I'd probably not include)

  export let capture: 'user' | 'environment' | null = null
  export let accept: string = '' // image/*, .gif etc.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

[stophecom]

But like you mentioned. With drop you can't rely on any validation for e.g. for accept. So you needed to manually do that - or let the actual app handle all of it.