[DOC NEEDED]: Use reactive form with input[type="file"]

[maxime1992]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ x ] support request

Current behavior
angular.io has good content about forms. Either reactive or template driven.
But when it comes to an input of type file, couldn't find anything.

I needed that especially within a reactive form and couldn't find any blog, post, article, SO answer ...

I think it would be nice to add some documentation about that.

[Foxandxss]

What do you think @kapunahelewong ?

[kapunahelewong]

Thank you for the kind words, @maxime1992. Can you elaborate on what you would have liked to have seen in the docs specifically? Was there anything pivotal in your process of figuring it out?

[maxime1992]

@kapunahelewong I ended up using a template driven form, so no, nothing pivotal for me ¯\_(ツ)_/¯

It's been 2 weeks now and I don't remember exactly what I wanted to achieve but what I can think of :

• how to react to file change
• how to read that file (name and other properties)
• how to set a file (is this even possible ?) from a .ts with reactive form

In fact, maybe just write a simple demo about file upload with reactive/template forms.

[touqeershafi]

I'm getting error while setting value of file input ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

<input type="file" (change)="fileChange($event)" name="file" formControlName="file"/>

fileChange($event) {
    this.fileFormatForm.controls['file'].setValue($event.target.files)
}

[juanmoralesGL]

Any news on this?? I would really love to have some proper documentation on how to use a file input along with reactive forms.
Thanks! :)

[wardbell]

I am NOT an official spokesperson for the Angular team. But we poked around and our understanding is that the Angular Team has no plans to add direct support for <input type="file">. You're on your own.

I guess you'll have to omit it from your Reactive Forms control structure and program to the DOM element directly. MDN has a good article about how to do that here.

I personally am OK with this, although I feel your pain too. The file API is an odd duck. The others take simple data input from the user and store that data within a "form" that parallels a data record (e.g., the "name" of a person in a "Person" record). The file API seems intended for getting files from your local machine and uploading the file data someplace rather than simply adding to the collection of information in a data record.

I'm not saying you're wrong for wondering at the omission. I am saying that the omission is understandable.

[juank11memphis]

Thanks a lot for your answer @wardbell I will find a workaround for it then :)

[jorgemndoza]

Might not be the best solution but my workaround might be a hack but I am glad to share it :).

I have a reactive form with some fields and also an [input type="file"] . My main objective is to save the data in MongoDB and Upload an Image. In this example I am using MEAN 2 stack.

Steps to upload file:

1. Post form data to backend and send back callback data to my service

2. Now that I have the ObjectID i will pass it as a parameter to a function that will upload only the file and send the ObjectID to update MongoDB once the image was successfully uploaded.

I hope it makes sense.

thanks,

[kapunahelewong]

Thanks, @jorgemndoza :)

[penniath]

It seems really weird that the Angular team decided to leave a common web feature, such as file input, out of the Angular handled scope.

Is it for real they don't have plans of including this in future releases?

[wardbell]

I'm closing this issue because there just isn't going to be another answer in the foreseeable future.

[nosliwsirhc]

So I've been spending a lot of time looking up file uploading with Angular. Everything seems to point to working with the DOM using ElementRef. It's a workaround for sure. More robust support for file handling (mainly uploads) would be much appreciated.