Add support for boolean attribute webkitdirectory

[PierBover]

Describe the problem

For some reason Svelte doesn't treat all HTML boolean attributes equally.

This:

<input type="file" webkitdirectory={true} multiple={true}>

Produces this:

<input type="file" webkitdirectory="true" multiple>

Maybe because of the property having webkit in its name, it sounds like it's something unique for Safari or Chrome, but it has been supported in all browsers for many years already.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

https://caniuse.com/mdn-api_htmlinputelement_webkitdirectory

Of course most browsers will accept webkitdirectory="true" but this goes against the spec:

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

Describe the proposed solution

This:

<input type="file" webkitdirectory={true} multiple={true}>

Should produce this:

<input type="file" webkitdirectory multiple>

Alternatives considered

Right now the only alternative I can think of is doing like this which is quite bad:

{#if acceptDirectories}
  <input type="file" webkitdirectory>
{:else}
  <input type="file">
{/if}

Importance

would make my life easier

[Conduitry]

There's a manually maintained list within the compiler of (among other things) which attributes are boolean. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#webkitdirectory says it's non-standard, which is presumably the main reason it was never added. I don't know where I stand on adding handling for non-standard attributes.

But in any case, in the meantime, you can do what you would do to conditionally have any non-boolean attribute present, which is to have webkitdirectory={whatever ? '' : null}.

[PierBover]

Thanks for the ternary tip. Yeah that's way better than using if/else.

If all browsers support it can it be considered non-standard though?

[Prinzhorn]

https://github.com/sveltejs/svelte/blob/25a05bf952579423b31582ee085388ce0be140cb/src/shared/boolean_attributes.ts#L4 https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/allowPaymentRequest

I don't know where I stand on adding handling for non-standard attributes.

If allowpaymentrequest (which is deprecated and not recommended) is in the list then webkitdirectory (which is supported in every browser and won't go anywhere) should be added as well. In my opinion there's no reason for Svelte to increase friction here.

[Conduitry]

One hurdle is that adding this as a boolean attribute would be a breaking change for people doing the webkitdirectory={whatever ? '' : null} thing I mentioned above, since both '' and null are falsy.

[Prinzhorn]

I see, I don't have any opinion either way then (other than adding it for Svelte 4)

[PierBover]

One hurdle is that adding this as a boolean attribute would be a breaking change for people doing the webkitdirectory={whatever ? '' : null} thing I mentioned above, since both '' and null are falsy.

Yeah that's a good reason for not adding it to Svelte 3.

Hopefully you will consider it for Svelte 4 though!

[willnode]

Sorry to bump, but is there any workaround to this except adding @ts-nocheck?

I'm using Svelte 4.0.1, maybe start considering adding this to svelte/elements?

[DePasqualeOrg]

How can I resolve this error?

  <input
    bind:this={fileInputElement}
    bind:files={inputFiles}
    type="file"
    multiple
    directory
    webkitdirectory
  />

No overload matches this call.
  Overload 1 of 4, '(element: "input" | null | undefined, attrs: HTMLProps<"input", HTMLAttributes<any>>): HTMLInputElement', gave the following error.
    Object literal may only specify known properties, and '"directory"' does not exist in type 'HTMLProps<"input", HTMLAttributes<any>>'.
  Overload 2 of 4, '(element: "input" | null | undefined, attrs: HTMLProps<"input", HTMLAttributes<any>>): HTMLInputElement', gave the following error.
    Object literal may only specify known properties, and '"directory"' does not exist in type 'HTMLProps<"input", HTMLAttributes<any>>'.ts(2769)

[PierBover]

Hopefully you will consider it for Svelte 4 though!

@Conduitry any chance this might be included into Svelte 5?

[PierBover]

@DePasqualeOrg the directory attribute doesn't exist in the spec. Only webkitdirectory exists for specifying that an input should only accept directories.