J'utilise ng2-file-upload (exemple de téléchargement unique) et je souhaite utiliser: ng2FileSelect
avec un bouton ou un div au lieu d'un fichier. Comment puis-je faire ceci?
Je veux que cela fasse quelque chose comme ça:
<button ng2FileSelect [uploader]="uploader">Choose file</button>
Au lieu de:
<input type="file" ng2FileSelect [uploader]="uploader" />
S'il n'existe pas de méthode propre en utilisant ng2-file-upload , connaissez-vous une alternative?
Une solution possible consiste à exploiter les variables de modèle de Angular 2 et à affecter une variable de modèle à l'élément d'entrée; Une fois cela fait, vous pouvez invoquer directement les méthodes définies sur cette entrée à partir d'un autre élément, tel qu'un bouton.
J'ai fait ce qui suit dans une de mes applications; cela fonctionne sur IE11, Firefox et 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>
Comme vous pouvez le constater, le bouton appelle simplement l'événement de clic de # fileInput dans son propre événement de clic.
Notez que j'enterre l'entrée dans un span , puis que je masque cette étendue via un ensemble de styles, tels que seul le bouton est visible. Notez également que l’application de ces styles à l’élément d’entrée semble directement poser problème dans IE11.
Vous pouvez envelopper l'élément input[file]
avec l'élément label et le masquer. Voir cette réponse et cet exemple
Voici le code.
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;
}
De manière simple, vous pouvez le faire avec label , il vous suffit de masquer le input .
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label class="btn custom-input-btn">
<input type="file" name="photo" style="display:none" accept="*" multiple>
<i class="fa fa-cloud-upload"></i> Upload Files
</label>