fix: dropzone id and event handling

[oliverwebr]

Closes #432

📑 Description

Dropzone is broken as hidden input has not have an id.
I added an id to the hidden input and in the second commit I added a id prop as the example page shows that Dropzone gets passed an id.

✅ Checks

• My pull request adheres to the code style of this project
• I have updated the documentation as required (props gen)
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	Dec 6, 2022 at 3:22PM (UTC)
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	Dec 6, 2022 at 3:22PM (UTC)

[shinokada]

Thank you for your PR.

Users may use more than one dropzone. This means we can't use the same id:

export let id: string = 'dropzone-file';

This can be avoided by:

let id:string ='' ;
id ||= 'dropzone-file'

So if users don't assign the id, dropzone-file will be used. If users assign the id, it will use their id.
What do you think?

[jjagielka]

What about:

import generateId from '$lib/utils/generateId';
export let id: string = generateId();

[oliverwebr]

let id:string ='' ;
id ||= 'dropzone-file'

So if users don't assign the id, dropzone-file will be used. If users assign the id, it will use their id. What do you think?

But is that not the same as my code? Users can set the id value 'dropzone-file' is just the default value.

What about:

import generateId from '$lib/utils/generateId';
export let id: string = generateId();

I think default values should be able to provide value for the lazy user. If they are generated they would be different between each build and could lead to confusion. What do you think?

[jjagielka]

What will happen then if you have to drop zones on the page. With the generated id no issue, with the default value you'll end up with double id.

[oliverwebr]

What will happen then if you have to drop zones on the page. With the generated id no issue, with the default value you'll end up with double id.

Sure but you can set the id. But even if you have just one dropzone on your page which is part of a form you are forced to set an id because otherwise, the file will appear always under a different payload property (if send in a form etc).

If you still prefer the generated approach let me know.

[jjagielka]

There are lots of valuable input in that proposal. Few comments:

• you don't need to wrap the label in button: tabIndex=0 on label will do the trick
• input is embedded into the label so attr for is not needed
• with the above $$restProps on input will solve the id discussion
• handling click is not necessary as click on label causes a click on the input
• handling of pressing Space and Enter is therefore needed as those should provoke click on input
• input is of type file so should support binding to files property
• I have just uploaded a trimmed down layout for drop zone
  So my proposal for that PR would be:

<script lang="ts">
  import classNames from 'classnames';

  export let value: string = '';
  export let files: FileList | undefined = undefined;
  export let defaultClass: string =
    'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';

  let input: HTMLInputElement;

  function keydown(ev: KeyboardEvent) {
    if ([' ', 'Enter'].includes(ev.key)) {
      ev.preventDefault();
      input.click();
    }
  }
</script>

<label
  class={classNames(defaultClass, $$props.class)}
  tabIndex="0"
  on:keydown={keydown}
  on:focus
  on:blur
  on:mouseenter
  on:mouseleave
  on:mouseover
  on:dragenter
  on:dragleave
  on:dragover
  on:drop>
  <slot />
  <input {...$$restProps} bind:value bind:files bind:this={input} type="file" class="hidden" on:change on:click />
</label>

[oliverwebr]

@jjagielka awesome, you are absolutely right I adopted your suggestion. 🎉

[jjagielka]

@shinokada please approve that PR.