chunkUploading event not working

[Yash Patel]

Hi,

Hi, for me chunk uploading event is not working. Please help me with this. I have tried multiple ways programmatically and through template, none of them works for me. However, normal uploading event works but as I am dealing with large files I need chunk uploads.

This is what I tried first.

HTML

<ejs-uploader #chunkUpload

[autoUpload]='false'

[asyncSettings]='uploadObj.asyncSettings'

(chunkUploading!)="onChunkUploading($event)"

multiple='false'>ejs-uploader>

TS

public onChunkUploading(args: any) {

console.log(args)

args.currentRequest.setRequestHeader('Authorization', 'Bearer ' + this.sharedService.getAuthenticationToken());

};

This is what I tried after programmatically.

TS

public uploadObj: Uploader = new Uploader({

asyncSettings: {

saveUrl: 'http://localhost:8080/api/uploads/upload',

removeUrl: 'http://localhost:8080/api/uploads/remove',

chunkSize: 1000000

},

htmlAttributes: { name: "upload", multiple: "false" },

autoUpload: false,

maxFileSize: 2284505600

});

This is in ngOnInit()

this.uploadObj.appendTo('#inputFile');

const token = this.sharedService.getAuthenticationToken();

this.uploadObj.addEventListener('chunkUploading', function(args: any) {

console.log(args)

args.currentRequest.setRequestHeader('Authorization', 'Bearer ' + token);

});

I am using latest version of ej2-angular-inputs. Please let me know what can be done to solve the issue as

I am getting 401 Unauthorized as authorization is necessary.

In both cases it prints nothing and gives Unauthorized error.

[Yash Patel]

I got a solution, for chunk upload I did catch both 'uploading' and 'chunkUploading' events and it worked. I guess the first chunk listens to uploading event and rest to chunkUploading.

[Berly Christopher]

Hi Yash Patel, 

  

Greetings from Syncfusion support. 

  

We would like to inform you that the chunk upload is considered only when more than one chunk is created and chunk uploading event will be triggered. If the chunk size is 0, then there will be no chunk created and it is considered as normal uploading. So, the upload event alone is triggered. This is the intended behaviour of the Uploader component.  

  

API Link: https://ej2.syncfusion.com/angular/documentation/api/uploader/#chunkuploading  

  

Regards, 

Berly B.C 

[Yash Patel]

Hi Berly Christopher,

Thank you for clarification.

Though, it works programmatically when I append input file to uploader object and add event listeners to that uploader object, but it is still nor working with template below

HTML

<ejs-uploader #chunkUpload 

          [autoUpload]='false' 

          [asyncSettings]='path' 

          (beforeUpload!)='beforeUpload($event)'

          (uploading!)="onUploading($event)" 

          (chunkUploading!)="onChunkUploading($event)" 

          (success!)="onUploadSuccess($event)"

            multiple='false'></ejs-uploader>

TS

public path = {

    saveUrl: 'http://localhost:8080/api/uploads/resume',

    removeUrl: 'http://localhost:8080/api/uploads/remove',

    chunkSize: 1000000

  };

None of the event method logs anything for me.

Any idea why this could be an issue?

[Berly Christopher]

Hi Yash, 

  

We have checked the shared code snippet. In the shared code snippet, you have added the ! keyword Infront of the event definition. Due to this, the events does not triggered. Kindly refer the below angular documentation for event binding. 

  

Angular blog: https://angular.io/guide/event-binding#binding-to-events  

  

Kindly refer the below code example. 

  

<ejs-uploader #chunkUpload [autoUpload]='false' [asyncSettings]='path' (beforeUpload)='beforeUpload($event)' 

(uploading)="onUploading($event)" (chunkUploading)="onChunkUploading($event)" 

(success)="onUploadSuccess($event)" multiple='false'> 

</ejs-uploader> 

 

  

Screenshot:  

 

  

Sample: https://stackblitz.com/edit/angular-hrzcxr?file=app.component.html  

  

Regards, 

Berly B.C