File upload from input type file

Question

Using angular 2 beta  I cannot seem to get an  lt input type  file  gt  to work   Using diagnostic  I can see two-way binding for other types such as text    lt form gt        diagnostic        lt div class  form-group  gt           lt label for  fileupload  gt Upload lt  label gt           lt input type  file  class  form-control    ngModel    model fileupload  gt       lt  div gt   lt  form gt    In my TypeScript file  I have the following diagnostic line   get diagnostic     return JSON stringify this model       Could it be that it is the issue of not being JSON  The value is null   I cannot really verify the value of the input   ven though the text next to  Choose file      updates  I cannot see differences in the DOM for some reason

User · Answer

just try  onclick   this value   null   in your html page add onclick method to remove previous value so user can select same file again

User · Answer

I think that it s not supported  If you have a look at this DefaultValueAccessor directive  see https   github com angular angular blob master modules angular2 src common forms directives default value accessor ts L23   You will see that the value used to update the bound element is  event target value   This doesn t apply in the case of inputs with type file since the file object can be reached  event srcElement files instead   For more details  you can have a look at this plunkr  https   plnkr co edit ozZqbxIorjQW15BrDFrg p info    Component     selector   my-app     template         lt div gt         lt input type  file   change   onChange  event    gt       lt  div gt         providers    UploadService      export class AppComponent     onChange event        var files   event srcElement files      console log files

User · Answer

Component     selector   my-app     template         lt div gt         lt input name  file  type  file   change   onChange  event    gt       lt  div gt         providers    UploadService      export class AppComponent     file  File    onChange event  EventTarget            let eventObj  MSInputMethodContext    lt MSInputMethodContext gt  event          let target  HTMLInputElement    lt HTMLInputElement gt  eventObj target          let files  FileList   target files          this file   files 0           console log this file             doAnythingWithFile

User · Answer

Another way using template reference variable and ViewChild  as proposed by Frelseren   import   ViewChild   from   angular core     Component     selector   my-app     template         lt div gt         lt input type  file   fileInput  gt       lt  div gt           export class AppComponent      ViewChild  fileInput   fileInputVariable  any    randomMethod         const files   this fileInputVariable nativeElement files      console log files           Also see https   stackoverflow com a 40165524 4361955

User · Answer

If you have a complex form with multiple files and other inputs here is a solution that plays nice with ngModel   It consists of a file input component that wraps a simple file input and implements the ControlValueAccessor interface to make it consumable by ngModel  The component exposes the FileList object to ngModel   This solution is based on this article   The component is used like this    lt file-input name  file  inputId  file    ngModel    user photo  gt  lt  file-input gt   lt label for  file  gt  Select file  lt  label gt    Here s the component code   import   Component  Input  forwardRef   from   angular core   import   NG VALUE ACCESSOR  ControlValueAccessor   from   angular forms    const noop        gt        export const CUSTOM INPUT CONTROL VALUE ACCESSOR  any         provide  NG VALUE ACCESSOR      useExisting  forwardRef      gt  FileInputComponent       multi  true      Component     selector   file-input     templateUrl     file-input component html     providers   CUSTOM INPUT CONTROL VALUE ACCESSOR     export class FileInputComponent       Input     public name string      Input     public inputId string     private innerValue any     constructor          get value    FileList       return this innerValue          private onTouchedCallback       gt  void   noop    private onChangeCallback      FileList    gt  void   noop     set value v  FileList        if  v     this innerValue          this innerValue   v        this onChangeCallback v                onBlur         this onTouchedCallback           writeValue value  FileList        if  value     this innerValue          this innerValue   value               registerOnChange fn  any        this onChangeCallback   fn         registerOnTouched fn  any        this onTouchedCallback   fn         changeFile event        this value   event target files          And here s the component template    lt input type  file  name     name     id     inputId     multiple  multiple   change   changeFile  event    gt

User · Answer

Try this small lib  works with Angular 5 0 0   https   www npmjs com package ng2-file-upload    Quickstart example with ng2-file-upload 1 3 0   User clicks custom button  which triggers upload dialog from hidden input type  file    uploading started automatically after selecting single file    app module ts   import  FileUploadModule  from  ng2-file-upload     your component html          lt button mat-button onclick  document getElementById  myFileInputField   click     gt      Select and upload file    lt  button gt     lt input type  file  id  myFileInputField  ng2FileSelect  uploader   uploader  style  display none  gt        your component ts   import  FileUploader  from  ng2-file-upload           uploader  FileUploader      constructor        this uploader   new FileUploader  url    your-api some-endpoint        this uploader onErrorItem   item   gt           console error  Failed to upload           this clearUploadField             this uploader onCompleteItem    item  response    gt           console info  Successfully uploaded           this clearUploadField                Optional  Parsing of response        let responseObject   JSON parse response  as MyCustomClass                Asks uploader to start upload file automatically after selecting file   this uploader onAfterAddingFile   fileItem   gt  this uploader uploadAll       private clearUploadField    void         lt HTMLInputElement gt window document getElementById  myFileInputField         value           Alternative lib  works in Angular 4 2 4  but requires some workarounds to adopt to Angular 5 0 0    https   www npmjs com package angular2-http-file-upload

User · Answer

There is a slightly better way to access attached files  You could use template reference variable to get an instance of the input element   Here is an example based on the first answer    Component     selector   my-app     template         lt div gt         lt input type  file   file  change   onChange file files    gt       lt  div gt         providers    UploadService       export class AppComponent     onChange files        console log files           Here is an example app to demonstrate this in action   Template reference variables might be useful  e g  you could access them via  ViewChild directly in the controller

[file-upload] File upload from <input type="file">

Examples related to file-upload

Examples related to input

Examples related to angular