Cách tạo đầu vào tệp tùy chỉnh trong Ionic 2+ bằng cách tạo kiểu nút?

Question

Đây là mẫu của tôi:

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

và file 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(); 
} 

Tất cả mọi thứ hoạt động tốt trên Android và trong trình duyệt, nhưng không phải trên iOS. Mã giống nhau hoạt động nếu tôi vô hiệu hóa nút trong mẫu.

Answer 1

Bạn không thể kích hoạt nhấp chuột vào đầu vào tệp trên iOS. Cách giải quyết là sử dụng css để đặt độ mờ của phần tử đầu vào thành 0 và đặt nó ở trên đầu nút. Bằng cách đó, các tập tin đầu vào sẽ không được nhìn thấy, nhưng nó sẽ được nhấp khi nhấp vào nút.

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

và sau đó trong tập tin .scss:

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

Có lẽ là một số cách khác để khắc phục vấn đề này, nhưng đó là cách tôi quản lý trên một ứng dụng tôi đã làm việc trên trong quá khứ.

Answer 2

Cách tốt nhất tôi tìm thấy để thực hiện việc này là sử dụng nhãn có thuộc tính for và tùy chỉnh nó bằng css. Vì vậy, khi người dùng nhấp vào nhãn, đầu vào được kích hoạt. Hãy nhớ rằng nhãn for phải là id đầu vào.

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

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

.myFakeUploadButton{ 
/* Whatever you want */ 
}