We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to handle a massive file download with Angular File Manager

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 .




3 Replies 1 reply marked as answer

SS Sivakumar ShunmugaSundaram Syncfusion Team April 10, 2023 06:53 AM UTC

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.


Marked as answer

BS BARRENECHEA SISTEMAS April 11, 2023 12:05 AM UTC

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 🙏🏻✨.



IL Indhumathy Loganathan Syncfusion Team April 11, 2023 05:59 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon