Ng-zorro-antd: nzBeforeUpload from nz-upload should have the file parameter of type File instance instead of UploadFile

[IonelLupu]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-ygithh?file=src/app/app.component.ts

Steps to reproduce

Use a nz-upload with a nzBeforeUpload attribute that returns false. Log the file parameter inside nzBeforeUpload.

What is expected?

I expect the argument type of the nzBeforeUpload function to be of type File instead of UploadFile as the function actually has inside Javascript

What is actually happening?

nzBeforeUpload has the wrong type definition for the file parameter of UploadFile instead of File.

| Environment | Info |
|---|---|
| ng-zorro-antd | 8.5.2 |
| Browser | * |

---

The type definition just needs to be changed to reflect what the function actually is called with:
Now is:

nzBeforeUpload: (file: UploadFile, fileList: UploadFile[]) => boolean | Observable<boolean>;

It should be:

nzBeforeUpload: (file: File, fileList: File[]) => boolean | Observable<boolean>;

PS. I am not sure if the fileList parameter should be File[].

[radiumrasheed]

the UploadFile already has the original file object as UploadFile.originFileObj

[IonelLupu]

@radiumrasheed no. As seen in the demo(check console), the nzBeforeUpload calls the method with a file of type File and the definition says it is of type UploadFile. There is an issue of definition on the nzBeforeUpload method inside nzUpload

[radiumrasheed]

actually yes, I agree to this. its really an issue. I noticed this after my comment

[emondora]

I agree to this. In "beforeUpload", it is really a "File", not UploadFile.
When I want to preview "base64 thumbnail" in nzBeforeUpload callback, I read the File Blob from UploadFile.originFileObj, but got undefined error! Because after "nzBeforeUpload", the uploadFile.originFileObj is not exist.
" beforeUpload = (file: File) => { ... } " will solve the problem! But when you turn on "strictTemplates": true.
Everything Goes Wrong!

[adammruk]

I have exactly same case like @emondora. For now i use a small workaround:
In my beforeUpload function i accept file as UploadFile:

beforeUpload = (file: UploadFile): Observable<boolean> => {

but later i'm just casting types:

reader.readAsDataURL(file as unknown as File);

[IonelLupu]

This is still an issue in version 9.3.0

[snebjorn]

I just encountered this as well.

https://stackblitz.com/edit/angular-y45bu7?file=src/app/app.component.ts

None of the NzUploadFile properties work and the type of the object [nzBeforeUpload] is called with is File

beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
    console.log('Instance of: ' + file.constructor.name); // Instance of: File

    console.log(file.filename, file.originFileObj, file.error, file.linkProps, file.percent, file.thumbUrl, file.response, file.uid); 
   // undefined undefined undefined undefined undefined undefined undefined e630sazjkzv
}

[IonelLupu]

This is still an issue in version 10.0.0

[cipchk]

@IonelLupu The type file is a primitive file type File Object, This is an error on the documentation.

[IonelLupu]

@cipchk yes, but the nzBeforeUpload attribute expects a function which has the first parameter of type NzUploadFile and not File. So, the code needs to be updated as well. This is the definition of nzBeforeUpload:

nzBeforeUpload?: (file: NzUploadFile, fileList: NzUploadFile[]) => boolean | Observable<boolean>;

I think it needs to be:

nzBeforeUpload?: (file: File, fileList: File[]) => boolean | Observable<boolean>;

[snebjorn]

This is still an issue in v11.1.0.

Isn't this just a type correction? Though I guess this will be a breaking change for people using strictTemplates

[Linzeur]

Hi,

I am using the version 10.2.2 for my current project.

Days ago, I had the issue I wanted to get the value as datatype File from a variable NzUploadFile in the event beforeUpload because I need convert the file to base 64. However, when I used the property "originFileObj" from this variable but I always got undefined.

Then, I found a solution which I put here:

beforeUpload = (file: NzUploadFile): boolean => {

    this.fileList = [file];
    const myReader = new FileReader();
    myReader.readAsDataURL(file as any);
    myReader.onloadend = (e) => {
      this.base64 = myReader.result;
    };
    return false;
  };

The trick is pass the NzUploadFile variable in the method "readAsDataURL" changing the datatype using the keyword "as". I was surprised when I tested that code and it worked. Although, I have doubts because it works, but now that was the solution which I reach.

[IonelLupu]

@Linzeur While this works, it is just a temporary solution. Using as any anywhere is problematic