File Upload with Angular Material

Question

I m writing an web app with AngularJS and angular-material  The problem is that there s no built-in component for file input in angular-material   I feel that file uploading doesn t fit the material design  but I need it in my app   Do you have a good solution for this problem

User · Answer

html       lt div class  upload  gt           lt span gt upload image lt  span gt           lt input            Image           type  file             change   handleFileInput  event target files             accept   jpg  svg  png  jpeg            gt           lt img           width  100             height  100              ngIf  imageUrl             src   imageUrl            class  image            gt       lt  div gt    app component ts  export class AppComponent     options      value   This is value 1   checked  true       statuses     control          name    Angular       fileToUpload  any    imageUrl  any    handleFileInput file  FileList        this fileToUpload   file item 0          Show image preview     let reader   new FileReader        reader onload    event  any    gt          this imageUrl   event target result             reader readAsDataURL this fileToUpload

User · Answer

Based on this answer  It took some time for me to make this approach working  so I hope my answer will save someone s time   DEMO on CodePen  Directive    angular module  app   directive  apsUploadFile   apsUploadFile    function apsUploadFile         var directive             restrict   E           templateUrl   upload file template html           link  apsUploadFileLink            return directive     function apsUploadFileLink scope  element  attrs        var input     element 0  querySelector   fileInput         var button     element 0  querySelector   uploadButton         var textInput     element 0  querySelector   textInput          if  input length  amp  amp  button length  amp  amp  textInput length            button click function  e                input click                        textInput click function  e                input click                           input on  change   function  e            var files   e target files          if  files 0                 scope fileName   files 0  name            else               scope fileName   null                    scope  apply                upload file template html   lt input id  fileInput  type  file  class  ng-hide  gt   lt md-button id  uploadButton             class  md-raised md-primary             aria-label  attach file  gt      Choose file  lt  md-button gt   lt md-input-container md-no-float gt       lt input id  textInput  ng-model  fileName  type  text  placeholder  No file chosen  ng-readonly  true  gt   lt  md-input-container gt

User · Answer

File uploader with AngularJs Material and a mime type validation   Directive   function apsUploadFile         var directive             restrict   E           require   ngModel    apsUploadFile            transclude  true          scope                label                   mimeType                          templateUrl    build html aps-file-upload html           controllerAs   ctrl           controller  function  scope                var self   this               this model   null               this setModel   function ngModel                    this  error   ngModel  error                   ngModel  render   function                         self model   ngModel  viewValue                                       scope  watch  ctrl model   function newval                        ngModel  setViewValue newval                                                         link  apsUploadFileLink            return directive     function apsUploadFileLink scope  element  attrs  controllers         var ngModelCtrl   controllers 0       var apsUploadFile   controllers 1        apsUploadFile inputname   attrs name      apsUploadFile setModel ngModelCtrl        var reg      attrs  observe  mimeType   function value            var accept   value replace    g               reg   new RegExp accept   i            ngModelCtrl  validate                 ngModelCtrl  validators mimetype   function modelValue  viewValue             if modelValue data    null               return apsUploadFile valid   true                     if modelValue type match reg                return apsUploadFile valid   true           else              return apsUploadFile valid   false                         var input     element 0  querySelector   fileInput         var button     element 0  querySelector   uploadButton         var textInput     element 0  querySelector   textInput          if  input length  amp  amp  button length  amp  amp  textInput length            button click function e                input click                        textInput click function e                input click                           input on  change   function e               scope fileLoaded e           var files   e target files           if  files 0                 ngModelCtrl  viewValue filename   scope filename   files 0  name              ngModelCtrl  viewValue type   files 0  type              ngModelCtrl  viewValue size   files 0  size               var fileReader   new FileReader                fileReader onload   function                      ngModelCtrl  viewValue data   fileReader result                  ngModelCtrl  validate                               fileReader readAsDataURL files 0                 ngModelCtrl  render              else               ngModelCtrl  viewValue   null                     scope  apply               app directive  apsUploadFile   apsUploadFile     html template    lt input id  fileInput  type  file  name  ctrl inputname  class  ng-hide  gt   lt md-input-container md-is-error   ctrl valid  gt       lt label gt    label    lt  label gt       lt input id  textInput  ng-model  ctrl model filename  type  text  ng-readonly  true  gt       lt div ng-messages  ctrl  error  ng-transclude gt  lt  div gt   lt  md-input-container gt   lt md-button id  uploadButton  class  md-icon-button md-primary  aria-label  attach file  gt       lt md-icon class  material-icons  gt cloud upload lt  md-icon gt   lt  md-button gt    Exemple    lt div layout-gt-sm  row  gt       lt aps-upload-file name  strip  ng-model  cardDesign strip  label  Strip  mime-type  image png  class  md-block  gt           lt div ng-message  mimetype  class  md-input-message-animation ng-scope  style  opacity  1  margin-top  0px   gt Your image must be PNG  lt  div gt       lt  aps-upload-file gt   lt  div gt

User · Answer

You can change the style by wrapping the input inside a label and change the input display to none  Then  you can specify the text you want to be displayed inside a span element   Note  here I used bootstrap 4 button style  btn btn-outline-primary   You can use any style you want     lt label class  btn btn-outline-primary  gt         lt span gt Select File lt  span gt         lt input type  file  gt   lt  label gt   input     display  none

User · Answer

For Angular 6    HTML    lt input  csvInput hidden  true  type  file  onclick  this value null   change   csvInputChange  event   accept   csv   gt   lt button mat-flat-button color  primary   click   csvInput click    gt Choose Spreadsheet File  CSV  lt  button gt    Component method     csvInputChange fileInputEvent  any        console log fileInputEvent target files 0          Note  This filters to just allow  csv files

User · Answer

I find a way to avoid styling my own choose file button   Because I m using flowjs for resumable upload  I m able to use the  flow-btn  directive from ng-flow  which gives a choose file button with material design style   Note that wrapping the input element inside a md-button won t work

User · Answer

Nice solution by leocaseiro   lt input class  ng-hide  id  input-file-id  multiple type  file    gt   lt label for  input-file-id  class  md-button md-raised md-primary  gt Choose Files lt  label gt      View in codepen

User · Answer

I ve join some informations posted here and the possibility of personalize components with Angular Material and this is my contribution without external libs and feedback with the name of the chosen file into field       HTML   lt mat-form-field class  columns  gt       lt mat-label  ngIf  selectedFiles  else newFile  gt   selectedFiles item 0  name   lt  mat-label gt       lt ng-template  newFile gt           lt mat-label gt Choose file lt  mat-label gt       lt  ng-template gt       lt input matInput disabled gt       lt button mat-icon-button matSuffix  click   fileInput click    gt           lt mat-icon gt attach file lt  mat-icon gt       lt  button gt       lt input hidden  change   selectFile  event    fileInput type  file  id  file  gt   lt  mat-form-field gt    TS  selectFile event        this selectedFiles   event target files

User · Answer

Adding to all the answers above  which is why I made it a community wiki   it is probably best to mark any input lt type  text  gt  with tabindex  -1   especially if using readonly instead of disabled  and perhaps the  lt input type  file  gt   although it should be hidden  it is still in the document  apparently    Labels did not act correctly when using the tab   enter key combinations  but the button did   So if you are copying one of the other solutions on this page  you may want to make those changes

User · Answer

from jameswyse at https   github com angular material issues 3310  HTML   lt input id  fileInput  name  file  type  file  class  ng-hide  multiple gt   lt md-button id  uploadButton  class  md-raised md-primary  gt  Choose Files  lt  md-button gt    CONTROLLER      var link   function  scope  element  attrs        const input   element find   fileInput        const button   element find   uploadButton         if  input length  amp  amp  button length            button click  e    gt  input click               Worked for me

User · Answer

with Angular materialHTML  lt div  click   quot uploadFile click   quot  gt      lt button mat-raised-button color  quot primary quot  gt Choose File lt  button gt      lt input  uploadFile  change   quot upload  event  quot  type  file  style  quot display none quot   gt    lt  div gt   ts upload event Event      console log event     stackblitz

User · Answer

Another example of the solution  Will look like the following   CodePen link there      lt choose-file layout  row  gt       lt input id  fileInput  type  file  class  ng-hide  gt       lt md-input-container flex class  md-block  gt         lt input type  text  ng-model  fileName  disabled gt         lt div class  hint  gt Select your file lt  div gt       lt  md-input-container gt       lt div gt         lt md-button id  uploadButton  class  md-fab md-mini  gt           lt md-icon class  material-icons  gt attach file lt  md-icon gt         lt  md-button gt       lt  div gt     lt  choose-file gt       directive  chooseFile   function         return         link  function  scope  elem  attrs            var button   elem find  button            var input   angular element elem 0  querySelector  input fileInput              button bind  click   function               input 0  click                         input bind  change   function e              scope  apply function                 var files   e target files              if  files 0                   scope fileName   files 0  name                else                 scope fileName   null                                                                 Hope it helps

User · Answer

Another hacked solution  though might be a little cleaner by implementing a Proxy button     HTML    lt input id  fileInput  type  file  gt   lt md-button class  md-raised  ng-click  upload    gt     lt label gt AwesomeButtonName lt  label gt   lt  md-button gt    JS   app controller  NiceCtrl   function    scope       scope upload   function          angular element document querySelector   fileInput    click

[javascript] File Upload with Angular Material

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to file-upload

Examples related to angular-material