File Upload In Angular

Question

I know this is very a general question but I am failing to upload a file in Angular 2   I have tried   1  http   valor-software com ng2-file-upload  and   2  http   ng2-uploader com home      but failed  Has anyone uploaded a file in Angular  What method did you use  How to do so  If any sample code or demo link is provided it will be really appreciated

User · Answer

Today I was integrated ng2-file-upload package to my angular 6 application, It was pretty simple, Please find the below high-level code.

import the ng2-file-upload module

app.module.ts

    import { FileUploadModule } from 'ng2-file-upload';

    ------
    ------
    imports:      [ FileUploadModule ],
    ------
    ------

Component ts file import FileUploader

app.component.ts

    import { FileUploader, FileLikeObject } from 'ng2-file-upload';
    ------
    ------
    const URL = 'http://localhost:3000/fileupload/';
    ------
    ------

     public uploader: FileUploader = new FileUploader({
        url: URL,
        disableMultipart : false,
        autoUpload: true,
        method: 'post',
        itemAlias: 'attachment'

        });

      public onFileSelected(event: EventEmitter<File[]>) {
        const file: File = event[0];
        console.log(file);

      }
    ------
    ------

Component HTML add file tag

app.component.html

 <input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" />

Working Online stackblitz Link: https://ng2-file-upload-example.stackblitz.io

Stackblitz Code example: https://stackblitz.com/edit/ng2-file-upload-example

Official documentation link https://valor-software.com/ng2-file-upload/

User · Answer

I ve upload file using reference  No package is required to upload file this way      code to be written in  ts file   ViewChild  fileInput   fileInput   addFile    void   let fi   this fileInput nativeElement  if  fi files  amp  amp  fi files 0       let fileToUpload   fi files 0       this admin addQuestionApi fileToUpload         subscribe          success   gt              this loading   false            this flashMessagesService show  Uploaded successfully                 classes    alert    alert-success                timeout  1000                                   error   gt              this loading   false            if error statusCode  401  this router navigate                  else             this flashMessagesService show error message                  classes    alert    alert-danger                  timeout  1000                                          code to be written in service ts file  addQuestionApi fileToUpload  any   var headers   this getHeadersForMultipart    let input   new FormData    input append  file   fileToUpload    return this http post this baseUrl  addQuestions   input   headers headers          map response   gt  response json           catch this errorHandler           code to be written in html   lt input type  file   fileInput gt

User · Answer

In the simplest form  the following code works in Angular 6 7  this http post  http   destinationurl com endpoint   fileFormData     subscribe response   gt          handle response      err   gt          handle error         Here is the complete implementation

User · Answer

I have used the following tool from priming with success   I have no skin in the game with primeNg  just passing on my suggestion   http   www primefaces org primeng   fileupload

User · Answer

This is useful tutorial  how to upload file using the ng2-file-upload and WITHOUT ng2-file-upload   For me it helps a lot   At the moment  tutorial contains a couple of mistakes   1- Client should have same upload url as a server  so in app component ts change line  const URL    http   localhost 8000 api upload    to   const URL    http   localhost 3000        2- Server send response as  text html   so in app component ts change     post URL  formData  map  res Response    gt  res json    subscribe      map the success function and alert the response    success    gt        alert success  body           error    gt  alert error     to       post URL  formData     subscribe  success    gt  alert  success     error    gt  alert error

User · Answer

jspdf and Angular 8  I generate a pdf and want to upload the pdf with POST request  this is how I do  For clarity  I delete some of the code and service layer   import   as jsPDF from  jspdf   import   HttpClient   from   angular common http    constructor private http  HttpClient   upload         const pdf   new jsPDF       const blob   pdf output  blob       const formData   new FormData       formData append  file   blob      this http post  http   your-hostname api upload   formData  subscribe

User · Answer

Angular 2 provides good support for uploading files  No third party library is required    lt input type  file   change   fileChange  event   placeholder  Upload file  accept   pdf  doc  docx  gt    fileChange event        let fileList  FileList   event target files      if fileList length  gt  0            let file  File   fileList 0           let formData FormData   new FormData            formData append  uploadFile   file  file name           let headers   new Headers                In Angular 5  including the header Content-Type can invalidate your request            headers append  Content-Type    multipart form-data            headers append  Accept    application json            let options   new RequestOptions   headers  headers             this http post    this apiEndPoint    formData  options               map res   gt  res json                 catch error   gt  Observable throw error                subscribe                  data   gt  console log  success                    error   gt  console log error                          using  angular core     2 0 0  and  angular http    2 0 0

User · Answer

This simple solution worked for me  file-upload component html   lt div gt     lt input type  file   fileInput placeholder  Upload file       gt     lt button type  button   click   upload    gt Upload lt  button gt   lt  div gt    And then do the upload in the component directly with XMLHttpRequest   import   Component  OnInit  ViewChild   from   angular core     Component     selector   app-file-upload     templateUrl     file-upload component html     styleUrls      file-upload component css      export class FileUploadComponent implements OnInit       ViewChild  fileInput   fileInput     constructor          ngOnInit            private upload         const fileBrowser   this fileInput nativeElement      if  fileBrowser files  amp  amp  fileBrowser files 0           const formData   new FormData          formData append  files   fileBrowser files 0          const xhr   new XMLHttpRequest          xhr open  POST     api Data UploadFiles   true         xhr onload   function              if  this  status       200                const responseText   this  responseText                const files   JSON parse responseText                 todo  emit event           else               todo  error handling                          xhr send formData                  If you are using dotnet core  the parameter name must match the from field name  files in this case    HttpPost   action     public async Task lt IList lt FileDto gt  gt  UploadFiles List lt IFormFile gt  files      return await  binaryService UploadFilesAsync files       This answer is a plagiate of http   blog teamtreehouse com uploading-files-ajax  Edit  After uploading  you have to clear the file-upload so that the user can select a new file  And instead of using XMLHttpRequest  maybe it is better to use fetch   private addFileInput         const fileInputParentNative   this fileInputParent nativeElement      const oldFileInput   fileInputParentNative querySelector  input        const newFileInput   document createElement  input        newFileInput type    file       newFileInput multiple   true      newFileInput name    fileInput       const uploadfiles   this uploadFiles bind this       newFileInput onchange   uploadfiles      oldFileInput parentNode replaceChild newFileInput  oldFileInput          private uploadFiles         this onUploadStarted emit        const fileInputParentNative   this fileInputParent nativeElement      const fileInput   fileInputParentNative querySelector  input        if  fileInput files  amp  amp  fileInput files length  gt  0          const formData   new FormData          for  let i   0  i  lt  fileInput files length  i              formData append  files   fileInput files i                   const onUploaded   this onUploaded        const onError   this onError        const addFileInput   this addFileInput bind this         fetch   api Data UploadFiles             credentials   include           method   POST           body  formData           then  response  any    gt            if  response status     200              const error    An error occured  Status    response status              throw new Error error                     return response json             then files   gt            onUploaded emit files           addFileInput             catch  error    gt            onError emit error                     https   github com yonexbat cran blob master cranangularclient src app file-upload file-upload component ts

User · Answer

Thanks to  Eswar  This code worked perfectly for me  I want to add certain things to the solution    I was getting error   java io IOException  RESTEASY007550  Unable to get boundary for multipart  In order to solve this error  you should remove the  Content-Type   multipart form-data   It solved my problem

User · Answer

Since the code sample is a bit outdated I thought I d share a more recent approach  using Angular 4 3 and the new er  HttpClient API   angular common http  export class FileUpload     ViewChild  selectedFile   selectedFileEl   uploadFile     let params   new HttpParams     let formData   new FormData    formData append  upload   this selectedFileEl nativeElement files 0    const options         headers  new HttpHeaders   set  Authorization   this loopBackAuth accessTokenId       params  params      reportProgress  true      withCredentials  true     this http post  http   localhost 3000 api FileUploads fileupload   formData  options   subscribe      data   gt            console log  Subscribe data   data               err  HttpErrorResponse    gt            console log err message  JSON parse err error  error message            add      gt  this uploadBtn nativeElement disabled   false    teardown

User · Answer

From the answers above I build this with Angular 5 x  Just call uploadFile url  file  subscribe   to trigger an upload  import   Injectable   from   angular core   import  HttpClient  HttpParams  HttpRequest  HttpEvent  from   angular common http   import  Observable  from  rxjs     Injectable   export class UploadService      constructor private http  HttpClient            file from event target files 0    uploadFile url  string  file  File   Observable lt HttpEvent lt any gt  gt         let formData   new FormData        formData append  upload   file        let params   new HttpParams         const options           params  params        reportProgress  true              const req   new HttpRequest  POST   url  formData  options       return this http request req           Use it like this in your component       At the drag drop area       drop   onDropFile  event     onDropFile event  DragEvent        event preventDefault        this uploadFile event dataTransfer files             At the drag drop area       dragover   onDragOverFile  event     onDragOverFile event        event stopPropagation        event preventDefault              At the file input element       change   selectFile  event     selectFile event        this uploadFile event target files          uploadFile files  FileList        if  files length    0          console log  No file selected           return            let file  File   files 0        this upload uploadFile this appCfg baseUrl     api flash upload   file         subscribe          event   gt              if  event type    HttpEventType UploadProgress                const percentDone   Math round 100   event loaded   event total               console log  File is   percentDone   loaded                 else if  event instanceof HttpResponse                console log  File is completely loaded                                     err    gt              console log  Upload Error    err                   gt              console log  Upload done

User · Answer

Try not setting the options parameter  this http post   this apiEndPoint   formData   and make sure you are not setting the globalHeaders in your Http factory

User · Answer

To upload image with form fields  SaveFileWithData article  ArticleModel picture File   Observable lt ArticleModel gt          let headers   new Headers           headers append  Content-Type    multipart form-data           headers append  Accept    application json     let requestoptions   new RequestOptions     method  RequestMethod Post    headers headers            let formData  FormData   new FormData    if  picture    null    picture    undefined      formData append  files   picture  picture name      formData append  article  JSON stringify article     return this http post  url  formData requestoptions     map  response  Response    gt  response json   as ArticleModel        In my case I needed  NET Web Api in C      POST  api Articles  ResponseType typeof Article    public async Task lt IHttpActionResult gt  PostArticle         Article article   null      try                HttpPostedFile postedFile   null          var httpRequest   HttpContext Current Request           if  httpRequest Files Count    1                        postedFile   httpRequest Files 0               var filePath   HttpContext Current Server MapPath        postedFile FileName               postedFile SaveAs filePath                     var json   httpRequest Form  article             article   JsonConvert DeserializeObject  lt Article gt  json            if   ModelState IsValid                        return BadRequest ModelState                      article CreatedDate   DateTime Now          article CreatedBy    Abbas            db articles Add article           await db SaveChangesAsync              catch  Exception ex                int a   0            return CreatedAtRoute  DefaultApi   new   id   article Id    article

User · Answer

In Angular 2   it is very important to leave the Content-Type empty  If you set the  Content-Type  to  multipart form-data  the upload will not work    upload component html    lt input type  file   change   fileChange  event   name  file    gt    upload component ts  export class UploadComponent implements OnInit       constructor public http  Http          fileChange event   void           const fileList  FileList   event target files          if  fileList length  gt  0                const file   fileList 0                const formData   new FormData                formData append  file   file  file name                const headers   new Headers                   It is very important to leave the Content-Type empty                do not use headers append  Content-Type    multipart form-data                headers append  Authorization    Bearer      eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9                    const options   new RequestOptions  headers  headers                 this http post  https   api mysite com uploadfile   formData  options                    map res   gt  res json                      catch error   gt  Observable throw error                     subscribe                       data   gt  console log  success                         error   gt  console log error

[angular] File Upload In Angular?

Examples related to angular

Examples related to file-upload

Examples related to angular2-http