Upload file using angular material 5

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?

Looks like is not supported: material.angular.io/components/input/… — Fran
– Fran, Commented Jun 12, 2018 at 12:32
of course isn't supported by angular material. But i am looking for a solution — K.cyrine
– K.cyrine, Commented Jun 12, 2018 at 19:59

Monkey D. Luffy · Accepted Answer · 2019-02-18 10:22:38Z

5

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 ☻

answered Feb 18, 2019 at 10:22

Monkey D. Luffy

1901 gold badge3 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Over a year ago

At my end this results in: ERROR Error: mat-form-field must contain a MatFormFieldControl.

Monkey D. Luffy Over a year ago

importing the following lines in-app modules and then importing them in ng modules imports will solve your problem import { MatFormFieldModule, MatInputModule } from '@angular/material';

Tena · Accepted Answer · 2019-01-30 09:15:25Z

-1

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"
    });
  }

edited Jan 30, 2019 at 9:15

answered Oct 10, 2018 at 9:04

Tena

6526 silver badges14 bronze badges

2 Comments

ValLeNain Over a year ago

it's an AngularJS directive I think, and he's using Angular

Tena Over a year ago

yes and it looks pretty old, let me update my answer.

Collectives™ on Stack Overflow

Upload file using angular material 5

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related