ボタンのスタイリングを使用してIonic 2+でカスタムファイル入力を作成するにはどうすればいいですか？ここ

Question

は私のテンプレートです：

<label>{{label}}</label> 
<input type="file" (change)="fileUpload($event)" id="file-input" style="position:absolute; top: -999999px" #fileInp> 
<button ion-button (click)="onClick()">Upload</button> 

とTSファイル：

@ViewChild('fileInp') fileInput: ElementRef; 
@Input() label: string; 
@Output() data = new EventEmitter<FormData>(); 

fileUpload(event) { 
    let fd = new FormData(); 
    fd.append('file', event.srcElement.files[0]); 
    this.data.emit(fd); 
} 

onClick() { 
    this.fileInput.nativeElement.click(); 
} 

すべてがAndroid上で、ブラウザではなく、iOSの上で正常に動作します。 テンプレート内のボタンを無効にすると、同じコードが機能します。

Answer 1

iOSで入力したファイルをクリックすることはできません。回避策は、cssを使用してinput要素の不透明度を0に設定し、ボタンの上に置きます。こうすると、ファイル入力は表示されませんが、ボタンをクリックするとクリックされます。

<ion-item> 
    <label>{{label}}</label> 
    <input type="file" (change)="fileUpload($event)" id="file-input" style="opacity: 0" #fileInp> 
    <button ion-button (click)="onClick()">Upload</button> 
</ion-item> 

、その後.scssファイル内

：

#file-input { 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    z-index: 999; 
} 

はおそらく、この問題を修正するためにいくつかの他の方法がありますが、それは私が過去に働いていたアプリで管理する方法です。

Answer 2

私が見つけた最も良い方法は、forという属性のラベルを使用し、CSSを使用してカスタマイズすることです。したがって、ユーザーがラベルをクリックすると、入力がトリガーされます。 forのラベルは入力IDである必要があります。

<label class="myFakeUploadButton" for="myFileInput">Upload</label> 
<input type="file" id="myFileInput"> 

#myFileInput{ 
    position: absolute; 
    opacity: 0; 
} 

.myFakeUploadButton{ 
/* Whatever you want */ 
}