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)

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