How to restrict special characters in the Angular File Manager Component for folder creation and renaming?
To prevent users from adding '(' and ')' as part of folder names when creating or renaming folders in the Angular File Manager component, you can achieve this requirement by utilizing our beforeSend event. This event triggers before sending the AJAX request to the server. Based on this event, set the args.cancel value to true for both create and rename actions to prevent the use of the mentioned special characters.
[app.component.html]
|
<div class="sample-container"> <ejs-filemanager id="overview" [ajaxSettings]="ajaxSettings" [toolbarSettings]="toolbarSettings" [contextMenuSettings]="contextMenuSettings" [view]="view" (beforeSend)="onSend($event)" > </ejs-filemanager> </div>
|
[app.component.ts]
|
… export class AppComponent { … onSend(args) { const data = JSON.parse(args.ajaxSettings.data); const hasParenthesesCreate = /\(|\)/.test(data.name); const hasParenthesesRename = /\(|\)/.test(data.newName); if ((args.action === 'create' && hasParenthesesCreate) || (args.action === 'rename' && hasParenthesesRename)) { args.cancel = true; document.getElementsByClassName('e-fe-error')[0].innerHTML = 'The file or folder name contains invalid characters (parentheses).'; } } } |
Refer to the following link for the sample.
Sample: https://stackblitz.com/edit/angular-vugddb-hcn6s9?file=src%2Fapp.component.ts
Conclusion
I hope you enjoyed learning about how to restrict special characters in the Angular File Manager Component for folder creation and renaming.
You can refer to our Angular File Manager feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular File Manager example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
