ファイル入力ではなくボタンでng2-file-uploadを使用できますか？

Question

私はng2-file-upload（単一のアップロード例）を使用しています。ng2FileSelectをファイル入力の代わりにボタンまたはdivで使用します。これどうやってするの？あなたは、代替を知っていますか、ng2-file-uploadを使用してクリーンな方法が存在しない場合

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

：

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

の代わりに：

は、私がこのような何かをしたいですか？

Answer 1

可能な解決策の1つは、アンギュラ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> 

あなたが見ることができるように、ボタンは単純に、独自のクリックイベント内＃FileInputクラスのクリックイベントを呼び出しています。

スパンの範囲内に入力を埋め込み、一連のスタイルでスパンを非表示にして、ボタンのみが表示されるようにしていることに注意してください。また、これらのスタイルを入力要素に適用すると、IE11では問題が発生したように見えます。

Answer 2

input[file]要素をラベル要素で囲み、非表示にすることができます。 this answerとthis example

を参照してください。

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; 
}