Angular 4+ Material input field

README.md

Angular Material - File Upload field

• Compatible with model driven validation (Reactive forms)
• tested on Angular Material Beta 12
• Implemented with Angular 4.4.x

For easier maintaining, I moved all sources on Plunker: SEE LIVE DEMO ON PLUNKER

Note: Getting the model value, returns an FileInput object (type FileInput)

Hi Merlosy,

Thanks for sharing in plunker. It was really good.

However i am not able to incorporate the changes into my app.

I am getting the errors firstly in 'input-file.component.ts'(errors are in bold below)

import { MatFormFieldControl } from '@angular/material';
import { FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

I am using angular 4, i tried to change 'Mat' to 'Md'. but that is impacting whole application.

Do you have something code in angular 4. (Or) suggest me to proceed forward.

Thanks for your support.

Hello

I don't know how can I get the byte array from the file uploader. It worked and I get an object from type File but what can I do with this????

it looks great, but how to use this to upload file(s) to server as @Lyror asked? this gives us the name of the files - but we need a buf

@Lyror @kwalski you can convert File to array buffer using a FileReader object: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer

Hey, could you write here a simple example ?

Hey @GoLucas I managed to send the @merlosy solution to the backend. In your service, before doing the post:

  submitReport(context: ReportContext): Observable<Response> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': this.authenticationService.credentials.token
      })
    };

    let fileList = context.file.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      let formData:FormData = new FormData();
      formData.append('name', context.name);
      formData.append('file', file, file.name);
      return this.httpClient
      .post(someURL, formData, httpOptions) 
      .pipe(
        map((body: any) => {
          console.log(body);
          const response = {statusCode: 200, message: 'Form submitted correctly'};
          return response;
        })
      );
    } else {
      // raise exception
    }
  }

and where context.file.files came from an interface defined before the service:

 export interface ReportContext {
   name: string;
   file: string|any;
  }

UPDATE: use the recommended library right now!
https://github.com/merlosy/ngx-material-file-input