Angular File Upload

Question

I m a beginner with Angular  I want to know how to create Angular 5 File upload part   I m trying to find any tutorial or doc  but I don t see anything anywhere  Any idea for this  And I tried ng4-files but it s not working for Angular 5

User · Answer

Ok  as this thread appears among the first results of google and for other users having the same question  you don t have to reivent the wheel as pointed by trueboroda there is the ng2-file-upload library which simplify this process of uploading a file with angular 6 and 7 all you need to do is   Install the latest Angular CLI  yarn add global  angular cli   Then install rx-compat for compatibility concern  npm install rxjs-compat --save   Install ng2-file-upload  npm install ng2-file-upload --save   Import FileSelectDirective Directive in your module   import   FileSelectDirective   from  ng2-file-upload    Add it to  declarations  under  NgModule  declarations        FileSelectDirective           In your component  import   FileUploader   from  ng2-file-upload ng2-file-upload        export class AppComponent implements OnInit       public uploader  FileUploader   new FileUploader  url  URL  itemAlias   photo         Template   lt input type  file  name  photo  ng2FileSelect  uploader   uploader    gt    For better understanding you can check this link   How To Upload a File With Angular 6 7

User · Answer

Very easy and fastest method is using ng2-file-upload   Install ng2-file-upload via npm  npm i ng2-file-upload --save  At first import module in your module    import   FileUploadModule   from  ng2-file-upload    Add it to  imports  under  NgModule  imports        FileUploadModule          Markup    lt input ng2FileSelect type  file  accept   xml   uploader   uploader   gt    In your commponent ts   import   FileUploader   from  ng2-file-upload       uploader  FileUploader   new FileUploader   url   api your upload   removeAfterUpload  false  autoUpload  true       It is simplest usage of this  To know all power of this see demo

User · Answer

Personally I m doing this using ngx-material-file-input for the front-end  and Firebase for the back-end  More precisely Cloud Storage for Firebase for the back-end combined with Cloud Firestore  Below an example  which limits file to be not larger than 20 MB  and accepts only certain file extensions  I m also using Cloud Firestore for storing links to the uploaded files  but you can skip this   contact component html   lt mat-form-field gt     lt  --     Accept only files in the following format   doc   docx   jpg   jpeg   pdf   png   xls   xlsx  However  this is easy to bypass  Cloud Storage rules has been set up on the back-end side    -- gt     lt ngx-mat-file-input      accept             doc           docx           jpg           jpeg           pdf           png           xls           xlsx              change   uploadFile  event       formControlName  fileUploader      multiple     aria-label  Here you can add additional files about your project  which can be helpeful for us       placeholder  Additional files      title  Additional files      type  file     gt     lt  ngx-mat-file-input gt     lt mat-icon matSuffix gt folder lt  mat-icon gt     lt mat-hint      gt Accepted formats  DOC  DOCX  JPG  JPEG  PDF  PNG  XLS and XLSX      maximum files upload size  20 MB     lt  mat-hint gt     lt  --     Non-null assertion operators are required to let know the compiler that this value is not empty and exists    -- gt     lt mat-error      ngIf  contactForm get  fileUploader    hasError  maxContentSize       gt      This size is too large       lt strong        gt maximum acceptable upload size is                  contactForm get  fileUploader    getError  maxContentSize              maxSize   byteFormat          lt  strong      gt       uploaded size               contactForm get  fileUploader    getError  maxContentSize            actualSize   byteFormat             lt  mat-error gt   lt  mat-form-field gt    contact component ts  size validator part   import   FileValidator   from  ngx-material-file-input   import   FormBuilder  FormGroup  Validators   from   angular forms            constructor     description Creates a new instance of this component      param   formBuilder  - an abstraction class object to create a form group control for the contact form      constructor    private angularFirestore  AngularFirestore    private angularFireStorage  AngularFireStorage    private formBuilder  FormBuilder       public maxFileSize   20971520  public contactForm  FormGroup   this formBuilder group       fileUploader                    Validators compose           FileValidator maxContentSize this maxFileSize           Validators maxLength 512           Validators minLength 2                      contact component ts  file uploader part   import   AngularFirestore   from   angular fire firestore   import     AngularFireStorage    AngularFireStorageReference    AngularFireUploadTask   from   angular fire storage   import   catchError  finalize   from  rxjs operators   import   throwError   from  rxjs    public downloadURL  string                description Upload additional files to Cloud Firestore and get URL to the files        param  event  - object of sent files        returns  void          public uploadFile event  any   void          Iterate through all uploaded files      for  let i   0  i  lt  event target files length  i            const randomId   Math random            toString 36           substring 2      Create random ID  so the same file names can be uploaded to Cloud Firestore         const file   event target files i      Get each uploaded file            Get file reference        const fileRef  AngularFireStorageReference   this angularFireStorage ref          randomId                    Create upload task        const task  AngularFireUploadTask   this angularFireStorage upload          randomId          file                    Upload file to Cloud Firestore        task          snapshotChanges            pipe            finalize      gt                fileRef getDownloadURL   subscribe  downloadURL  string    gt                  this angularFirestore                  collection process env FIRESTORE COLLECTION FILES      Non-null assertion operator is required to let know the compiler that this value is not empty and exists                   add   downloadURL  downloadURL                   this downloadURL push downloadURL                                           catchError  error  any    gt                return throwError error                                   subscribe                storage rules  rules version    2   service firebase storage     match  b  bucket  o       match   allPaths               allow read     Required in order to send this as attachment           Allow write files Firebase Storage  only if           1  File is no more than 20MB          2  Content type is in one of the following formats   doc   docx   jpg   jpeg   pdf   png   xls   xlsx        allow write  if request resource size  lt   20   1024   1024          amp  amp   request resource contentType matches  application msword              request resource contentType matches  application vnd openxmlformats-officedocument wordprocessingml document              request resource contentType matches  image jpg              request resource contentType matches  image jpeg              request resource contentType matches  application pdf                      request resource contentType matches  image png              request resource contentType matches  application vnd ms-excel              request resource contentType matches  application vnd openxmlformats-officedocument spreadsheetml sheet

User · Answer

In my case  I m using http interceptor  thing is that by default my http interceptor sets content-type header as application json  but for file uploading I m using multer library  So little bit changing my http interceptor defines if request body is FormData it removes headers and doesn t touch access token  Here is part of code  which made my day  if  request body instanceof FormData      request   request clone   headers  request headers delete  Content-Type    application json          if  request body instanceof FormData      request   request clone   headers  request headers delete  Accept    application json

User · Answer

First  you need to set up HttpClient in your Angular project  Open the src app app module ts file  import HttpClientModule and add it to the imports array of the module as follows  import   BrowserModule   from   angular platform-browser     import   NgModule   from   angular core   import   AppRoutingModule   from    app-routing module     import   AppComponent   from    app component     import   HttpClientModule   from   angular common http     NgModule       declarations          AppComponent             imports          BrowserModule        AppRoutingModule        HttpClientModule            providers          bootstrap   AppComponent         export class AppModule      Next  generate a component    ng generate component home  Next  generate an upload service    ng generate service upload  Next   open the src app upload service ts file as follows  import   HttpClient  HttpEvent  HttpErrorResponse  HttpEventType   from    angular common http     import   map   from   rxjs operators     Injectable       providedIn   root         export class UploadService        SERVER URL  string    quot https   file io  quot         constructor private httpClient  HttpClient          public upload formData           return this httpClient post lt any gt  this SERVER URL  formData               reportProgress  true             observe   events                        Next  open the src app home home component ts file  and start by adding the following imports  import   Component  OnInit  ViewChild  ElementRef    from   angular core   import   HttpEventType  HttpErrorResponse   from   angular common http   import   of   from  rxjs     import   catchError  map   from  rxjs operators     import   UploadService   from      upload service    Next  define the fileUpload and files variables and inject UploadService as follows   Component       selector   app-home       templateUrl     home component html       styleUrls      home component css          export class HomeComponent implements OnInit        ViewChild  quot fileUpload quot    static  false   fileUpload  ElementRef files              constructor private uploadService  UploadService       Next  define the uploadFile   method  uploadFile file          const formData   new FormData          formData append  file   file data         file inProgress   true        this uploadService upload formData  pipe          map event   gt              switch  event type                case HttpEventType UploadProgress                file progress   Math round event loaded   100   event total                 break              case HttpEventType Response                return event                                  catchError  error  HttpErrorResponse    gt              file inProgress   false            return of    file data name  upload failed                 subscribe  event  any    gt              if  typeof  event       object                 console log event body                                  Next  define the uploadFiles   method which can be used to upload multiple image files  private uploadFiles           this fileUpload nativeElement value             this files forEach file   gt            this uploadFile file                  Next  define the onClick   method  onClick           const fileUpload   this fileUpload nativeElement fileUpload onchange        gt          for  let index   0  index  lt  fileUpload files length  index                   const file   fileUpload files index          this files push   data  file  inProgress  false  progress  0                    this uploadFiles                   fileUpload click         Next  we need to create the HTML template of our image upload UI  Open the src app home home component html file and add the following content   lt div  ngStyle   quot   text-align  center   margin-top   100px   quot  gt      lt button mat-button color  quot primary quot   click   quot fileUpload click   quot  gt choose file lt  button gt        lt button mat-button color  quot warn quot   click   quot onClick   quot  gt Upload lt  button gt        lt input  hidden   quot true quot  type  quot file quot   fileUpload id  quot fileUpload quot  name  quot fileUpload quot  multiple  quot multiple quot  accept  quot image   quot    gt   lt  div gt   Check out this tutorial and this post

User · Answer

Try this   Install  npm install primeng --save   Import  import  FileUploadModule  from  primeng primeng     Html   lt p-fileUpload name  myfile    url    upload php  multiple  multiple      accept  image    auto  auto  gt  lt  p-fileUpload gt

User · Answer

Here is how I did it to upload the excel files  Directory structure  app  -----uploadcomponent             -----uploadcomponent module ts             -----uploadcomponent html  -----app module ts  -----app component ts  -----app service ts  uploadcomponent html  lt div gt      lt form  formGroup   quot form quot   ngSubmit   quot onSubmit   quot  gt        lt input type  quot file quot  name  quot profile quot   enctype  quot multipart form-data quot  accept  quot  xlsm application msexcel quot   change   quot onChange  event  quot    gt        lt button type  quot submit quot  gt Upload Template lt  button gt        lt button id  quot delete button quot  class  quot delete button quot  type  quot reset quot  gt  lt i class  quot fa fa-trash quot  gt  lt  i gt  lt  button gt       lt  form gt              lt  div gt   uploadcomponent ts     import   FormBuilder  FormGroup  ReactiveFormsModule   from   angular forms       import   Component  OnInit   from   angular core                export class UploadComponent implements OnInit           form  FormGroup          constructor private formBuilder  FormBuilder  private uploadService  AppService             ngOnInit                   this form   this formBuilder group                  profile                                          onChange event                if  event target files length  gt  0                  const file   event target files 0                  this form get  profile   setValue file                 console log this form get  profile   value                                   onSubmit                const formData   new FormData               formData append  file   this form get  profile   value               this uploadService upload formData  subscribe                res    gt                   this response   res                  console log res                                  err    gt                     console log err                                      app service ts     upload formData            const endpoint   this service url  upload            const httpOptions   headers  new HttpHeaders       lt  lt  lt  lt  Changes are here              Authorization    token xxxxxxx                       return this http post endpoint  formData  httpOptions          In Backend I use DJango REST Framework  models py from   future   import unicode literals from django db import models from django db import connection from django mysql models import JSONField  Model import uuid import os   def change filename instance  filename       extension   filename split      -1      file name   os path splitext filename  0      uuid name   uuid uuid4       return file name  quot   quot  str uuid name   quot   quot  extension  class UploadTemplate  Model       id   models AutoField primary key True      file   models FileField blank False  null False  upload to change filename       def   str   self           return str self file name   views py  class UploadView APIView       serializer class   UploadSerializer     parser classes    MultiPartParser              def get queryset self           queryset   UploadTemplate objects all           return queryset      def post self  request   args    kwargs           file serializer   UploadSerializer data request data          status   None         message   None         if file serializer is valid                file serializer save               status    quot Success quot              message    quot Success quot          else              status    quot Failure quot              message    quot Failure  quot          content     status   status   message   message          return Response content   serializers py  from uploadtemplate models import UploadTemplate from rest framework import serializers  class UploadSerializer serializers ModelSerializer       class Meta          model   UploadTemplate         fields      all        urls py  router register r uploadtemplate   uploadtemplateviews UploadTemplateView       base name  UploadTemplate   urlpatterns                  url r upload    uploadtemplateviews UploadTemplateView as view         static settings STATIC URL  document root settings STATIC ROOT   if settings DEBUG      urlpatterns    static settings MEDIA URL  document root settings MEDIA ROOT   MEDIA URL and MEDIA ROOT is defined in settings py of the project  Thanks

User · Answer

I am using Angular 5 2 11   I like the solution provided by Gregor Doroschenko  however I noticed that the uploaded file is of zero bytes  I had to make a small change to get it to work for me   postFile fileToUpload  File   Observable lt boolean gt      const endpoint    your-destination-url     return this httpClient      post endpoint  fileToUpload    headers  yourHeadersConfig         map      gt    return true          catch  e    gt  this handleError e        The following lines  formData  didn t work for me   const formData  FormData   new FormData    formData append  fileKey   fileToUpload  fileToUpload name     https   github com amitrke ngrke blob master src app services fileupload service ts

User · Answer

Here is a working example for file upload to api   Step 1  HTML Template  file-upload component html   Define simple input tag of type file  Add a function to  change -event for handling choosing files    lt div class  form-group  gt       lt label for  file  gt Choose File lt  label gt       lt input type  file             id  file              change   handleFileInput  event target files   gt   lt  div gt    Step 2  Upload Handling in TypeScript  file-upload component ts   Define a default variable for selected file   fileToUpload  File   null    Create function which you use in  change -event of your file input tag   handleFileInput files  FileList        this fileToUpload   files item 0       If you want to handle multifile selection  than you can iterate through this files array   Now create file upload function by calling you file-upload service   uploadFileToActivity         this fileUploadService postFile this fileToUpload  subscribe data   gt             do something  if upload success          error   gt            console log error                   Step 3  File-Upload Service  file-upload service ts   By uploading a file via POST-method you should use FormData  because so you can add file to http request   postFile fileToUpload  File   Observable lt boolean gt        const endpoint    your-destination-url       const formData  FormData   new FormData        formData append  fileKey   fileToUpload  fileToUpload name       return this httpClient        post endpoint  formData    headers  yourHeadersConfig           map      gt    return true            catch  e    gt  this handleError e        So  This is very simple working example  which I use everyday in my work

User · Answer

This way I implement upload file to web API in project   I share for whom concern   const formData  FormData   new FormData    formData append  Image   image  image name   formData append  ComponentId   componentId   return this http post   api dashboard UploadImage   formData     Step by step  ASP NET Web API   HttpPost   Route  api dashboard UploadImage    public HttpResponseMessage UploadImage          string imageName   null      var httpRequest   HttpContext Current Request        Upload Image     var postedFile   httpRequest Files  Image          Create custom filename     if  postedFile    null                imageName   new String Path GetFileNameWithoutExtension postedFile FileName  Take 10  ToArray    Replace       -            imageName   imageName   DateTime Now ToString  yymmssfff     Path GetExtension postedFile FileName           var filePath   HttpContext Current Server MapPath    Images     imageName           postedFile SaveAs filePath             HTML form   lt form  imageForm ngForm  ngSubmit   OnSubmit Image   gt        lt img  src   imageUrl  class  imgArea  gt       lt div class  image-upload  gt           lt label for  file-input  gt               lt img src  upload jpg    gt           lt  label gt            lt input id  file-input   Image type  file   change   handleFileInput  event target files     gt           lt button type  submit  class  btn-large btn-submit   disabled   Image value         imageForm valid  gt  lt i                 class  material-icons  gt save lt  i gt  lt  button gt       lt  div gt   lt  form gt    TS file to use API  OnSubmit Image        this dashboardService uploadImage this componentId  this fileToUpload  subscribe        data   gt            console log  done            Image value   null          this imageUrl     assets img logo png                        Service TS  uploadImage componentId  image            const formData  FormData   new FormData            formData append  Image   image  image name           formData append  ComponentId   componentId           return this http post   api dashboard UploadImage   formData

User · Answer

In Angular 7 8 9  Source Link    Using Bootstrap Form   lt form gt       lt div class  form-group  gt           lt fieldset class  form-group  gt                lt label gt Upload Logo lt  label gt                imageError                lt div class  custom-file fileInputProfileWrap  gt                   lt input type  file   change   fileChangeEvent  event   class  fileInputProfile  gt                   lt div class  img-space  gt                        lt ng-container  ngIf  isImageSaved  else elseTemplate  gt                           lt img  src   cardImageBase64    gt                       lt  ng-container gt                       lt ng-template  elseTemplate gt                            lt img src          assets placeholder png  class  img-responsive  gt                       lt  ng-template gt                    lt  div gt                lt  div gt           lt  fieldset gt       lt  div gt       lt a class  btn btn-danger   click   removeImage     ngIf  isImageSaved  gt Remove lt  a gt   lt  form gt    In Component Class  fileChangeEvent fileInput  any        this imageError   null      if  fileInput target files  amp  amp  fileInput target files 0                Size Filter Bytes         const max size   20971520          const allowed types     image png    image jpeg            const max height   15200          const max width   25600           if  fileInput target files 0  size  gt  max size                this imageError                    Maximum size allowed is     max size   1000    Mb                return false                     if     includes allowed types  fileInput target files 0  type                 this imageError    Only Images are allowed   JPG   PNG                 return false                    const reader   new FileReader            reader onload    e  any    gt                const image   new Image                image src   e target result              image onload   rs   gt                    const img height   rs currentTarget  height                    const img width   rs currentTarget  width                     console log img height  img width                     if  img height  gt  max height  amp  amp  img width  gt  max width                        this imageError                            Maximum dimentions allowed                             max height                                                         max width                            px                       return false                    else                       const imgBase64Path   e target result                      this cardImageBase64   imgBase64Path                      this isImageSaved   true                         this previewImagePath   imgBase64Path                                                       reader readAsDataURL fileInput target files 0             removeImage         this cardImageBase64   null      this isImageSaved   false

User · Answer

HTML         lt div class  form-group  gt         lt label for  file  gt Choose File lt  label gt  lt br   gt   lt input type  file  id  file   change   uploadFiles  event target files   gt       lt  div gt        lt button type  button   click   RequestUpload    gt Ok lt  button gt      ts File   public formData   new FormData    ReqJson  any        uploadFiles  file             console log   file   file           for   let i   0  i  lt  file length  i                   this formData append   file   file i   file i   name                       RequestUpload             this ReqJson  patientId      12          this ReqJson  requesterName      test1          this ReqJson  requestDate      1 1 2019          this ReqJson  location      INDIA          this formData append   Info   JSON stringify  this ReqJson                 this http post    Request   this formData                    subscribe       gt                                                       Backend Spring java file     import java io IOException  import java nio file Files  import java nio file Path  import java nio file Paths   import org springframework stereotype Controller  import org springframework web bind annotation PostMapping  import org springframework web bind annotation RequestParam  import org springframework web bind annotation ResponseBody  import org springframework web multipart MultipartFile    Controller public class Request       private static String UPLOADED FOLDER    c   temp           PostMapping   Request        ResponseBody     public String uploadFile  RequestParam  file   MultipartFile file   RequestParam  Info   String Info            System out println  Json is    Info           if  file isEmpty                  return  No file attached                     try                  Get the file and save it somewhere             byte   bytes   file getBytes                Path path   Paths get UPLOADED FOLDER   file getOriginalFilename                 Files write path  bytes             catch  IOException e                e printStackTrace                      return  Succuss             We have to create a folder  temp  in C drive  then this code will print the Json in console and save the uploaded file in the created folder

User · Answer

Complete example of File upload using Angular and nodejs express   HTML Code               lt div class  form-group  gt                   lt label for  file  gt Choose File lt  label gt  lt br  gt                   lt input type  file  id  file   change   uploadFile  event target files   multiple gt               lt  div gt    TS Component Code  uploadFile files        console log  files   files          var formData   new FormData         for let i  0  i  lt  files length  i           formData append  files   files i   files i   name                    this httpService httpPost   fileUpload   formData         subscribe  response    gt            console log  response   response                    error    gt          console log  error in fileupload   error                  Node Js code  fileUpload API controller  function start req  res    fileUploadService fileUpload req  res       then fileUploadServiceResponse   gt            res status 200  send fileUploadServiceResponse              catch error   gt            res status 400  send error            module exports start   start   Upload service using multer  const multer   require  multer      import library const moment   require  moment   const q   require  q   const     require  underscore   const fs   require  fs   const dir      public       Store file on local folder    let storage   multer diskStorage   destination  function  req  file  cb        cb null   public      filename  function  req  file  cb        let date   moment moment now    format  YYYYMMDDHHMMSS       cb null  date         file originalname replace  - g       replace    g                      Upload files     let upload   multer   storage  storage    array  files        Exports fileUpload function    module exports     fileUpload  function  req  res        let deferred   q defer            Create dir if not exist        if   fs existsSync dir             fs mkdirSync dir          console log   n n   dir  dose not exist  hence created  n n              upload req  res  function  err            if  req  amp  amp     isEmpty req files                  deferred resolve   status  200  message   File not attached   data                  else               if  err                    deferred reject   status  400  message   error   data  err                  else                   deferred resolve                       status  200                      message   File attached                       filename    pluck req files                           filename                        data  req files                                                       return deferred promise

[angular] Angular File Upload

Examples related to angular

Examples related to typescript