material2 not support input file upload

[rubinus]

Input type "file" isn't supported by md-input-container.

[mmalerba]

This is not currently on our roadmap

[HunderlineK]

I was looking for the same; however, the workaround is simple: use a md-button to trigger a hidden input:

  <button type="button" md-button (click)="imgFileInput.click()">Add a photo</button>
  <input hidden type="file" #imgFileInput (change)="previewImage($event)"/>

[maxime1992]

That's what I ended up using @HoumanKml. Another problem is to do that with reactive forms, but that's another story 👍

[merlosy]

Since it isn't (and will not be) part of the roadmap, I made my own
Gist here: https://gist.github.com/merlosy/ab33dd7edaacfd92d6c9a5daea0a1240
Working fine on Angular 4.3.x
Feedback appreciated :)

[maxime1992]

Don't have the time to try it out right now but thx for sharing @merlosy!
Also, if you have the time it might be nice to create a demo on [stackblitz], plunkr or other :)
🍻

[nni123]

@HunderlineK

Style the button for 4.4.3 & material 2 build 12 (real pain to keep up with breaking changes...hate angular sometime)

<div class="button-row"> <button mat-button color="accent" mat-mini-fab (click)="imgFileInput.click()"><mat-icon>attachment</mat-icon></button> <input hidden type="file" #imgFileInput (change)="previewImage($event)"/> </div>

css part

.example-button-row { display: flex; align-items: center; justify-content: space-around; }

[merlosy]

Based on the new guidelines, I updated my gist with custom input file working with Angular 4.4.x + Material Beta 12

https://gist.github.com/merlosy/ab33dd7edaacfd92d6c9a5daea0a1240

[merlosy]

@maxime1992 Plunker here: http://plnkr.co/edit/VGCSprNVT1pobOxjWwmT?p=preview

[nni123]

@merlosy nice update thanks

[misamae]

@merlosy thanks for sharing. The referenced plunker is not loading.

[merlosy]

@misamae updated for Angular 5 and material 5.0.0-RC.0:
http://plnkr.co/edit/VGCSprNVT1pobOxjWwmT?p=preview

[DJHightower]

Hey merlosy. I like your control.
Just having some problems combining it with drag&drop (i am using https://valor-software.com/ng2-file-upload). Could not get your control to accept the dropped file(s) as a valid model. I tried adding the files into FileInput instance bound via [(ngModel)] - but your Control isnt recognizing/showing them. Mabe some time you are in a mood to to do a little improvement in this direction.

[matheusdavidson]

nice solution @merlosy

[skyfloyd]

somehow I see ERROR Error: mat-form-field must contain a MatFormFieldControl. exception on @merlosy solution implementation :(

[rvalenciano]

Hey @merlosy your latest plnkr is not loading anymore :(

[jdlopezq]

i have a problem show the file in the placeholder...

[merlosy]

Ill look into it. Ill post an update here when it's fixed :)

[rvalenciano]

Thanks, @merlosy for your idea, I made it work for my app but it would be good that the plunkr is working also :) It seems like there is a broken script.

[merlosy]

Plunker is working again!
https://plnkr.co/edit/VGCSprNVT1pobOxjWwmT?p=preview

The code didn't changed, just broken imports since release of Material 5.0.0

[marklagendijk]

@merlosy nice! You should publish it as a module on Github and NPM.

[kamok]

@HunderlineK Your solution auto focuses the initial button that calls the hidden button when you finish uploading. Do you have any idea to get out of the focus?

[HunderlineK]

@kamok I haven't worked with angular in a long time, but I suppose you can monitor the status of the file upload event and then after the upload do whatever you like to do, or maybe use merlosy's solution, It seems more robust to me

[KManu]

@merlosy 's component works like a charm, but i encountered this error every time i submitted a file to the input
Cannot assign to read only property 'size' of object '[object File]'.
I fixed this by making the following modification to the constructor of the FileInput class. (inside the file-input.model.ts file)
this._files = this._files.map((f: File) => { Object.defineProperties(f, { size: { writable: true, value: f.size }, type: { writable: true, value: f.type } }) return f; })

[merlosy]

@marklagendijk Your wish has been real: https://github.com/merlosy/ngx-material-file-input
It has a few bug fixes. It should support jit, aot, and different kind of imports.
Still a lot I want to do, but one step at a time... Feedback is welcome!

[momijigz]

Hi!

I'm getting this error on using @merlosy 's solution

Uncaught (in promise): Error: StaticInjectorError(AppModule)[FileInputComponent -> NgControl]: 
 StaticInjectorError(Platform: core)[FileInputComponent -> NgControl]: 
   NullInjectorError: No provider for NgControl!

Help will be appreciated!

[leonlovett]

The solution suggested by @HunderlineK is working perfectly for me. I went ahead and put together a simple Stackblitz sample.
https://stackblitz.com/edit/angular-material-file-upload

[ghost]

This is not currently on our roadmap

Not sure why this is not in the roadmap. File input types are equally important.

[cnd5041]

FYI, for those that are delegating the input file click (a la @leonlovett solution) :
<button md-raised-button color="primary" (click)="fileInput.click()">Upload</button> <input hidden type="file" #fileInput>

This does not work on Safari Mobile :(

[alignsoft]

I've just stumbled over this after having the same issue with Angular 7 without using Material where <input type="file" #fileInput...> no longer presents a 'select file' dialog since a recent upgrade of Angular. I'm on 7.1.3 now, and this has worked recently, but I can't say exactly when it stopped.

Using the (click)="fileInput.click()" method on the button solves the issue, but I'm unclear what changed to break this behaviour, and whether this is a bug that should be filed with the general Angular team as it doesn't seem to be specific to Material.

[danieldanielecki]

Any updates on this? Why this has been closed?...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}