web-dev-qa-db-fra.com

Comment créer une entrée de fichier personnalisée dans Ionic 2+ avec un style de bouton?

Voici mon modèle:

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

et le fichier 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();
}

Tout fonctionne correctement sous Android et dans le navigateur, mais pas sous iOS . Le même code fonctionne si je désactive le bouton du modèle.

angularcordovaionic2ionic3
6
Anurag Kumar

Vous ne pouvez pas déclencher le clic sur une entrée de fichier sur iOS. Une solution de contournement consiste à utiliser css pour définir l'opacité de l'élément d'entrée sur 0 et le placer juste au-dessus du bouton. De cette façon, l'entrée du fichier ne sera pas visible, mais vous pourrez cliquer dessus en cliquant sur le bouton.

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

puis dans le fichier .scss:

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

Il existe probablement d’autres moyens de résoudre ce problème, mais c’est ainsi que j’ai géré une application sur laquelle j’avais travaillé.

6
sebaferreras

La meilleure façon de le faire est d'utiliser une étiquette avec l'attribut for et de la personnaliser à l'aide de css. Ainsi, lorsque l'utilisateur clique sur l'étiquette, l'entrée est déclenchée. Gardez à l'esprit que l'étiquette for doit être l'identifiant d'entrée.

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

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

.myFakeUploadButton{
 /* Whatever you want */
}
1
Pablo

Je fais habituellement ce qui suit.

    <ion-item>
        <ion-button color="primary" (click)="inputFile.click()">
             <ion-icon name="attach"></ion-icon> Anexar documentos
        </ion-button>
        <input #inputFile id="input-file"  style="opacity:0" type="file" (change)="uploadFiles($event)"
        multiple/>
    </ion-item>
0
Thomaz R. Damasceno