Can I use ng2-file-upload with button instead of a file input?

Question

I'm using ng2-file-upload (single upload example) and I want to use: ng2FileSelect with a button or a div instead of a file input. How can I do this?

I want this to do something like this:

<button ng2FileSelect [uploader]="uploader">Choose file</button>

Instead of:

<input type="file" ng2FileSelect [uploader]="uploader" />

If does not exist a clean way using ng2-file-upload, do you know an alternative?

Answer 1

One possible solution is to leverage Angular 2's template variables, and to assign a template variable to the input element; once done, you can directly invoke methods defined on that input from another element, such as a button.

I did the following in one of my applications; it works on IE11, Firefox, and 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>

So as you can see, the button is simply calling the #fileInput's click event within its own click event.

Note that I'm burying the input within a span, and then hiding the span from view via a bunch of styles, such that only the button is visible. Also note that applying these styles to the input element directly seemed to cause problems in IE11.

Answer 2

Yon can wrap input[file] element with label element and hide it. See this answer and this example

Here's the 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;
}

Answer 3

In a simple way, you can do it with label, you just have to hide the 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>