Могу ли я использовать ng2-file-upload с кнопкой вместо ввода файла?

Я использую ng2-file-upload (один пример загрузки), и я хочу использовать: ng2FileSelect с помощью кнопки или div вместо ввода файла. Как я могу это сделать?

Я хочу, чтобы это делалось примерно так:

<button ng2FileSelect [uploader]="uploader">Choose file</button>

Вместо:

<input type="file" ng2FileSelect [uploader]="uploader" />

Если не существует чистого пути, используя ng2-file-upload, вы знаете альтернативу?

Ответы

Ответ 1

Одним из возможных решений является использование Angular 2 шаблонных переменных и назначение переменной шаблона входному элементу; после выполнения вы можете напрямую вызывать методы, определенные на этом входе от другого элемента, например кнопки.

В одном из моих приложений я сделал следующее: он работает на IE11, Firefox и Chrome:

<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
     <input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>

Таким образом, как вы можете видеть, кнопка просто вызывает событие click_fileInput в своем собственном событии кликов.

Обратите внимание, что я зарываю входные данные в пределах span, а затем скрываю диапазон от представления через кучу стилей, так что отображается только кнопка. Также обратите внимание, что применение этих стилей к входному элементу напрямую вызывало проблемы в IE11.

Ответ 2

Yon может обернуть элемент input[file] элементом метки и скрыть его. См. этот ответ и этот пример

Здесь код.

HTML:

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

CSS

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}