open-vault/ui/app/templates/components/text-file.hbs

{{#unless inputOnly}}
  <div class="level is-mobile">
    <div class="level-left">
      <label class="is-label" data-test-text-label=true>
        {{#if label}}
          {{label}}
          {{#if helpText}}
            <InfoTooltip>
              <span data-test-help-text>
                {{helpText}}
              </span>
            </InfoTooltip>
          {{/if}}
        {{else}}
          File
        {{/if}}
      </label>
    </div>
    <div class="level-right">
      <div class="control is-flex">
        <input
          data-test-text-toggle=true
          id={{concat "useText-" elementId}}
          type="checkbox"
          name={{concat "useText-" elementId}}
          class="switch is-rounded is-success is-small"
          checked={{file.enterAsText}}
          onchange={{action (toggle "enterAsText" file)}}
        />
        <label for={{concat "useText-" elementId}}>
          Enter as text
        </label>
      </div>
    </div>
  </div>
{{/unless}}
<div class="field">
  {{#if file.enterAsText}}
    <div class="control">
      <textarea
        class="textarea"
        oninput={{action "updateData"}}
        data-test-text-file-textarea=true
      >{{file.value}}</textarea>
    </div>
    <p class="help has-text-grey">
      {{textareaHelpText}}
    </p>
  {{else}}
    <div class="control is-expanded">
        <div class="file has-name is-fullwidth">
        <label class="file-label">
          <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-text-file-input=true>
          <span class="file-cta button">
            <Icon @glyph="upload" class="has-light-grey-text" />
            Choose a file…
          </span>
          <span class="file-name has-text-grey-dark" data-test-text-file-input-label=true>
            {{#if file.fileName}}
              {{file.fileName}}
            {{else}}
              No file chosen
            {{/if}}
          </span>
          {{#if file.fileName}}
            <button type="button" class="file-delete-button" {{action 'clearFile'}} data-test-text-clear=true>
              <Icon @glyph="cancel-circle-outline" />
            </button>
          {{/if}}
        </label>
      </div>
    </div>
    <p class="help has-text-grey">
      {{fileHelpText}}
    </p>
  {{/if}}
</div>