How to perform search operation programmatically in React File Manager?
This approach allows you to filter the files and folders within the File Manager component using external Dialog component.
[index.js]
const Overview = () => {
let hostUrl = 'http://localhost:62869/';
let fileObj;
const beforeSend = (args) => {
if (args.action == 'search') {
args.cancel = true;
}
};
const OnCreated = (args) => {
let searchTimer;
setTimeout(() => {
document
.getElementById('filemanager_search')
.addEventListener('input', function (args) {
const searchValue =
document.getElementById('filemanager_search').value;
clearTimeout(searchTimer);
if (searchValue.length >= 3) {
performSearch(searchValue);
} else {
// If the user types fewer than 3 characters, wait for 3 seconds and then perform the search
searchTimer = setTimeout(() => {
performSearch(searchValue);
}, 3000); // Adjust the delay in milliseconds (3000ms = 3 seconds)
}
});
}, 50);
};
function performSearch(value) {
// Perform the search operation here with the value
var objectValue = { searchString: '*' + value + '*' };
fileObj.filterFiles(objectValue);
}
return (
<div>
<div className="control-section">
<FileManagerComponent
id="filemanager"
ref={(s) => (fileObj = s)}
....
view={'Details'}
beforeSend={beforeSend.bind(this)}
created={OnCreated.bind(this)}
>
<Inject services={[NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
</div>
);
};
[FileManagerController.cs]
[Route("FileOperations")]
public object FileOperations([FromBody] FileManagerDirectoryContent args)
{
....
switch (args.Action)
{
....
case "filter":
return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
}
return null;
}
Sample: https://stackblitz.com/edit/react-eydkub-qhlsab?file=index.js
Service: https://github.com/SyncfusionExamples/ej2-aspcore-file-provider
Conclusion
I hope you enjoyed learning on how to perform search operation programmatically in React File Manager.
You can refer to our React 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 React 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.
