Customization

[shafi-shaikat]

Would love to have some customization feature like tagName.

[sheriffderek]

I just added a tagName property and it does add one... but the markup, in general, is still a bit confusing to me.

Idealy, I'd want something like this: https://codepen.io/sheriffderek/pen/4e05ec823df4b43210271089c1a14117/

<label for='file-input-1' class='input-w file'>
  <div class='label'>
    <span>Click here to upload a file buddy!</span>
  </div>

  <input id='file-input-1' class='input' type='file' />
</label>

This is the default markup:

<span id="ember682" class="x-file-input ember-view">
  <input type="file" id="gkz9g" tabindex="0" class="x-file--input">
  <label for="gkz9g">
    Upload
  </label>
</span>

This is how you can change it a bit:
{{x-file-input tagName='div' class='my-class'}}

<div id="ember682" class="my-class x-file-input ember-view">
  <input type="file" id="clpc3" tabindex="0" class="x-file--input">
  <label for="clpc3">
    Upload
  </label>
</div>

So, it has the same customization as most components do - I think.

You could also create a new component and .extend() this component and change things from the component's controller etc., right?

[cowboyd]

You could definitely do that. If you want to customize, you can always drop it into

// app/components/x-file-input.js
import XFileInput from 'emberx-file-input/components/x-file-input';

export default XFileInput.extend({
  tagName: 'div'
});