How to handle a massive file download with Angular File Manager

[BARRENECHEA SISTEMAS]

Hi Syncfusion friends, I'm very happy with your work, I've almost managed to develop a complete stack of a File Manager thanks to your Angular File Manager Module.

Many congratulations for everything, even your support is very good.

At this last stage, I am facing massive file downloads, so I want to set certain download rules and if they are not met, cancel the download, but I have not managed to complete this task.

I see that in your documentation you have an event that is triggered before the download starts, (beforeDownload), and you also have an interface called BeforeDownloadEventArgs, and it has a property called cancel that can be set to true to cancel the operation.

But I haven't figured out how to use these elements to stop the download if specific criteria are not met,

I've tried:

(beforeDownload)="$event.preventDefault();download($event)"

download(args) {

    args['cancel'] = true;

  }

and it doesn't stop the download at all, and the worst thing is that File Manager redirects me to the automatic download page and because certain conditions are not met, the client sees an ERROR response in backend format.

Can you help me with an example of how I can capture the download request, analyze it, and cancel it if necessary?

Please .

[Sivakumar ShunmugaSundaram]

Hi BARRENECHEA,

Greetings from Syncfusion support.

With the shared details, you are facing an issue with canceling the File Manager component’s download operation based on certain conditions using the File Manager beforeDownload event.

To achieve your requirement, use the below code snippet. In the sample, we have prevented the download operation of folders in the FileManager component, and you can only download the files.

Refer to the below code snippet.

[app.component.html]

 

<ejs-filemanager

id="overview"

[ajaxSettings]="ajaxSettings"

[toolbarSettings]="toolbarSettings"

[contextMenuSettings]="contextMenuSettings"

[view]="view"

(beforeDownload)="beforeDownload($event)"

> 

</ejs-filemanager>

[app.component.ts]

 

export class AppComponent {

...

    }

public beforeDownload(args: BeforeDownloadEventArgs) {

    if (!(args as any).data.data[0].isFile) {

      args.cancel = true;

    }

  }

Sample: https://stackblitz.com/edit/angular-2kxruf?file=src%2Fapp.component.html

Check out the shared sample for your reference.

[BARRENECHEA SISTEMAS]

I already saw where my mistake was, the $event.preventDefault(), instead of stopping the request to the server, it stopped the execution of the beforeDownload function, so even if I set cancel to true there, since beforeDownload was not executed, the value did not change.

Once I removed the $event.preventDefault() everything worked fine.

Thanks for everything 🙏🏻✨.

[Indhumathy Loganathan]

BARRENECHEA, We are glad that your reported query has been resolved. Please get back to us if you need any further assistance.