web-dev-qa-db-fra.com

Puis-je utiliser ng2-file-upload avec le bouton au lieu d'une entrée de fichier?

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?

file-uploadangular
13
Leantraxxx

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.

21
RMD

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;
}
4
Roman Kondakov

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>

1
Samurai