如何在 ng2-file-upload 中添加自定义标题

Question

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>
        <p>Total: {{ uploader?.queue?.length }}</p>

        <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><strong>{{ item?.file?.name }}</strong></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??

Answer 1

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' }]
});

Answer 2

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.

Answer 3

你可以像下面这样传递你的令牌：

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

Answer 4

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.

Answer 5

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'}] 
    });

Answer 6

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.