Upload file using angular material 5 - file-upload

Question

I tried to upload file (angular 5) using angular material 5.
app.component.html
<mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Upload your audio file</ng-template>
<mat-form-field>
<input matInput
style="display: none"
type="file" (change)="onFileSelected($event)"
#fileInput name ="file" formControlName="firstCtrl" required>
<button mat-button (click)="fileInput.click()" >Select File</button>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
app.component.ts
export class AppComponent {
selectedFile: File=null;
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder, private http: HttpClient) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
But I got this error
ERROR Error: Input type "file" isn't supported by matInput.
knowing this code worked well without angular material. Any issue?

Answer 1

I had the same problem,
Try doing this,
<button mat-raised-button (click)="openInput()">Select File to Upload</button>
<input id="fileInput" hidden type="file" (change)="fileChange($event.target.files)" name="file" accept=".csv,.xlsv">
openInput(){
document.getElementById("fileInput").click();
}
What above code does is creates simply a Material button and call openInput() method which later on replaces that button to below HTML code
<input id="fileInput" hidden type="file" >
This worked for me.
Happy Coding ☻

Answer 2

Faster solution would be to use
https://github.com/danialfarid/ng-file-upload :
<md-button class='md-raised md-primary' id='uploadFile' ngf-multiple='true' ngf-select='upload($files, $file, $event)'
type='file'>
Upload File
else you would have to go to a custom code like this:
<label class="md-secondary md-raised md-button" md-ink-ripple for="input-file">
<span>Select File to upload</span>
</label>
<input type="file" ngf-select ng-model="input-file" name="input-file" id="input-file">
EDITED:
In your HTML:
<input #file type="file" nbButton multiple (change)="upload(file.files)" />
then in your component:
upload(files: any) {
this.yourServiceToUploadFiles.uploadFile(files).subscribe(
(response: any) => { .......})}
and then in your service:
uploadFile(files: any[]): Observable<HttpResponse<Blob>> {
if (files.length === 0) {
return;
}
const formData = new FormData();
for (const file of files) {
formData.append(file.name, file);
}
return this.http.post(`${apiUrl}/yourServiceEndPoint`, formData, {
observe: "response",
responseType: "blob"
});
}