[Feature] Consume id and expose input focus state

[patrickberkeley]

We have run into issues similar to what's described in #387, but for reasons other than accessibility.

1. Our label input is rendered outside of the FileUpload component and therefore has no ability to trigger the file upload dialog when it is clicked. Suggestion: Allow the id attribute to be passed from the outer context to the input. This would associate the click from our label with the ember-file-upload input. Roughly looking like:

<OurFileField
  @label='Some Label'
  as |fileField|
>
  <FileUpload
      id={{fileField.uid}}
      @name={{@name}}
    >
</OurFileField>

Generated HTML:

<label for='uid-123'>Some Label</label>
<input id='uid-123' />

2. The second issue is not being able to apply styles based on the input's focus state. This is due to the input being type='hidden'. Suggestion is hide the input with CSS e.g.,:

.file-upload {
  position: relative;
}
.file-upload input {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

I believe this would allow solve the issue @CNovakPB #387 because the input would still be focusable, and would allow us to target ember-file-upload's focus state with the focus-within pseudo class e.g.,:

.our-file-filed:focus-within {
  border-color: <some-hex-showing-focus>;
}

[CNovakPB]

It's standard HTML to associate the <label> element with the <input>.

[patrickberkeley]

It's standard HTML to associate the <label> element with the <input>.

Understood.

ember-file-upload ships with the hidden input and its own label. So that would need to be reconciled before my issue/suggestion 1 above could be implemented. Otherwise the DOM would end up with two labels:

<label> /* <---- This label is from our app that consumes ember-file-upload */
  Custom Label
</label>

<label> /* <---- This label and downward are from ember-file-upload */
  <input hidden>
</label>

[jelhan]

There are some issues with the public API of this addon. It does not fit well in a modern Ember world. It misses a good way to customize the rendered HTML output. Angle bracket component invocation is only partly supported - and does not allow customization of interesting parts. There were already some discussion in #316, #293 and #292. Also #387 seems to be caused by this.

We need to come up with an improved public API, which allows more customization by the consumer of this addon and is less opinionated about the HTML to render. I think splatattributes provided by angle bracket component invocation and named blocks should give us all what we need. Thanks to ember-named-blocks-polyfill there is nothing stopping us from relying on these new techniques.

But we need to design such an API. @gilest started the work in #316. We need to pick it up and challenge proposals with use cases. All what is currently missing seems to be the time to do so. 😜

[gilest]

In v5 we are deprecating the component in favour of a modifier.

See the Upgrade guide here.

Feedback appreciated.

[patrickberkeley]

@gilest proposed v5 looks great IMO and would solve both the problems described in this issue.

[gilest]

Should be closed by v5