How to get file object with ng2-file-upload + angular 2

Question

I want to accomplish upload on file drag: I am using ng2-file-upload version 1.2.1 with following code snippet:

app.module.ts:

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
..
imports: [
        FileUploadModule
]

component.ts:

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';

...

class AppXYZComponent{
private uploader: FileUploader = new FileUploader({ url: 'blah.com' });

    public hasBaseDropZoneOver:boolean = false;
    //public hasAnotherDropZoneOver:boolean = false;

    public fileOverBase(e:any):void {
        console.log("hasBaseDropZoneOver", e);
        this.hasBaseDropZoneOver = e;
    }
}

app.component.html:

<div class="well" ng2FileDrop [uploader]="uploader" [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
             (fileOver)="fileOverBase($event)"
             >
            Drop CSV here
        </div>

The function fileOverBase gets successfully called on drag, with event e printed as true. Now How can i get the dragged file's object??

Sathish Kotha · Accepted Answer · 2017-06-07 05:55:14Z

6

You need to use the afterAddingfile method to get the file object in the ng2-file-upload plugin.

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
...

class AppXYZComponent{
public uploader: FileUploader;
public hasBaseDropZoneOver:boolean = false;
//public hasAnotherDropZoneOver:boolean = false;

constructor(){
   this.uploader = new FileUploader({ url: 'blah.com' });
   this.uploader.onAfterAddingFile = (fileItem) => {
                fileItem.withCredentials = false;
                console.log(fileItem); // fileItem is the file object
            };
}
 public fileOverBase(e:any):void {
    console.log("hasBaseDropZoneOver", e);
    this.hasBaseDropZoneOver = e;
  }
}

answered Jun 7, 2017 at 5:55

Sathish Kotha

1,1213 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Saboo · Accepted Answer · 2017-08-02 12:41:18Z

I know its late reply but may it will help to others

change app.component.html: with ** code

<div class="well" ng2FileDrop [uploader]="uploader" [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
         (fileOver)="fileOverBase($event)" **(onFileDrop)="onFileDrop($event)"**
         >
        Drop CSV here
    </div>

change component.ts: as below ** code

class AppXYZComponent{
private uploader: FileUploader = new FileUploader({ url: 'blah.com' });

public hasBaseDropZoneOver:boolean = false;
//public hasAnotherDropZoneOver:boolean = false;

public fileOverBase(e:any):void {
    console.log("hasBaseDropZoneOver", e);
    this.hasBaseDropZoneOver = e;
}

**public onFileDrop(fileList: File[]) {
    console.log(fileList);// u get file as fileList[0]
}**
}

Collectives™ on Stack Overflow

How to get file object with ng2-file-upload + angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related