How to add Custom Headers in ng2-file-upload


I'm experimenting with ng2-file-upload, the problem is I can't set the custom headers. So far I've done this

In the upload-documents.component

import { Component } from '@angular/core'; import { FileUploader, Headers } from 'ng2-file-upload'; @Component({ moduleId: module.id, selector: 'sg-uploadcompnent', templateUrl: '../views/upload-documents.template.html' }) export class UploadDocumentsComponent { public uploader: FileUploader = new FileUploader({ url: "http://localhost:port/app/api/upload/", authToken: "Authorization", authTokenHeader: "Bearer mytoken871lkdk39829", isHTML5: true, **headers: [ {name: "myCustomHeader", value:"some value"}]** }); }

In the upload-documents.template.html

<style> .my-drop-zone { border: dotted 3px lightgray; } .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */ .another-file-over-class { border: dotted 3px green; } html, body { height: 100%; } </style> <div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href>The screen to upload files</a> </div> </div> <div class="row"> <div class="col-md-3"> <h3>Select files</h3> <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="well my-drop-zone"> Base drop zone </div> <div ng2FileDrop [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}" (fileOver)="fileOverAnother($event)" [uploader]="uploader" class="well my-drop-zone"> Another drop zone </div> Multiple Selection <input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/> Single <input type="file" ng2FileSelect [uploader]="uploader" /> </div> <div class="col-md-9" style="margin-bottom: 40px"> <h3>Files to upload</h3>

Total: {{ uploader?.queue?.length }}

<table class="table"> <thead> <tr> <th width="50%">Name</th> <th>Size</th> <th>Progress</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let item of uploader.queue"> <td>{{ item?.file?.name }}</td> <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td> <td *ngIf="uploader.isHTML5"> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div> </div> </td> <td class="text-center"> <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span> </td> <td nowrap> <button type="button" class="btn btn-success btn-xs" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess"> <span class="glyphicon glyphicon-upload"></span> Upload </button> <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel </button> <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()"> <span class="glyphicon glyphicon-trash"></span> Remove </button> </td> </tr> </tbody> </table> <div> <div> Queue progress: <div class="progress" style=""> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div> </div> </div> <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"> <span class="glyphicon glyphicon-upload"></span> Upload all </button> <button type="button" class="btn btn-warning btn-s" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel all </button> <button type="button" class="btn btn-danger btn-s" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length"> <span class="glyphicon glyphicon-trash"></span> Remove all </button> </div> </div> </div>

But unfortunately, when I click on the upload button or Upload All button, (this is the demo use from http://valor-software.com/ng2-file-upload/) I can't see the request headers in the request.

I'm using ng2-file-upload 1.2.0 version

Any ideas??


I did this and it worked just fine.. was able to extract foofoo in my MVC controller:

uploader: FileUploader = new FileUploader({ url: URL, headers: [{ name: 'foofoo', value: 'passengerslivesmatter' }] });

You can add auth token in ng2-file-upload like this:

public uploader: FileUploader = new FileUploader({ url: urlFileUpload, authToken: Your value//auth token. });

authToken attribute of ng2-file-upload adds token.


You can just pass your token like below:

this.uploader = new FileUploader({ url: URL , authToken: "Bearer " + authService.getToken()});

Basically if you need Bearer Autentification on Post headers

const uploader: FileUploader = new FileUploader({ url: URL, headers: [{ name: 'Autenfication', value: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1YTIzNDBkOWE0MDM5YTI2MGM1OWYzNTMiLCJleHAiOjE1MTUyMjc5NDcyMzV9.uVpwN9vrjpoKOzNN_DYOgonB1N46Pl' }] }) fileItem.withCredentials = false;

This work fine.


If you have already uploader is initialized, and want to add headers dynamically based on the user interactions, this is another way to extend the headers

this.uploader.setOptions({headers:[ { name: 'user', value: 'visited-column-37' }, {name: 'type', value: 'normal'}] });

headers: [{ name: 'Sec-Fetch-Mode', value: 'cors'}, {name: 'Sec-Fetch-Site', value: 'same-site'}]

Add the above line if you are having trouble with backend not able to read the Authorization that you are passing in authToken.



  • How to add Custom Headers in ng2-file-upload
  • ngClass doesn't work Angular 5
  • Angular material put image on selected value of
  • How do I Suppress Warnings in CheckStyle? [duplicate]
  • Added String to ArrayList not shown / not updated [duplicate]
  • How to split large integer into an array of 8-bit integers
  • Access SharePoint online using client object model- Forbidden error
  • Need help for combining two regex conditions using something like AND operator
  • how to send SMS via oracle 11g? client is toad and in India I have to send sms [closed]
  • CameraPreviewImageSource empty preview frame
  • ClearCase can I use clearexport_ccase/clearimport to copy VOB data to a VOB on a different machine
  • Sharing multiple images on facebook post
  • JSF with Enum 'Validation Error: Value is not valid'
  • Joining across databases with dbplyr
  • How can I access the Google account user_id?
  • DocuSign API Replace template document but keep fields
  • MVC3 Extension for ValidatorMessage
  • Google Apps Script fails to generate image from EmbeddedChartBuilder
  • Questions related to Garbage Collector and finalize() method
  • Querying Elasticsearch Address Based Index
  • Pandas time series data Index from a string to float [duplicate]
  • Java Collections.shuffle() weird behaviour [closed]
  • xpath assertion failure with dynamic xpath
  • How to write seo friendly url's using htaccess?
  • Django, uWSGI & nginx: Process dies for “no reason”
  • Rotating Towards Path in OpenGL
  • using maven pom while creating jar:test-jar some times it says JAR will be empty - no content was ma
  • C++ STL stack pop operation giving segmentation fault
  • XEP-0166: Jingle protocol implementation for voice/video chat in iOS
  • Using Service Component Runtime
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?