File Explorer - File Picker / Selector?

Greetings,

Once a user uses the File Explorer to upload files, later they need to be able to select files on the server to map to certain areas of their site. So how do I turn the File Explorer into a file selector? Basically the same control, but a pop up that has an 'OK' or 'Select' feature once multiple files are selected? So they can navigate around their directory structure from the root directory, then select files, click 'Ok' and a FileOperations kicks back to the server with say a command of 'select'.

How do I achieve this - is this functionality baked in? Or can I achieve it by adding a custom option to the toolbar with an event (if so, how to)? Or is there a different control that satisfies the file selection process?

+Adam

This might need to be posted in the ASP.NET Core - EJ 2 Forums actually.

But to recap, looking for a way to have a pop up file selector, select multiple files, click 'OK', have it post to an ajax file operation, then close the modal, possibly refresh the current window it originated from. 

  

Hi Adam, 

  

Thank you for contacting Syncfusion Support.  

  

By default, EJ2 FileManager has support for multiple files or folder selection. Please refer to the below given demo link 

Demo: https://ej2.syncfusion.com/aspnetcore/FileManager/Overview#/material  

For your requirement, we have prepared a sample for adding custom item to toolbar. When the custom toolbar item is clicked, it triggers its callback function, you can do the customization based on your requirement in that function.  As of now, it shows an alert message during toolbarClick() event in the below sample. 

  

Refer to the sample link below. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication190012776.zip 

  

To know more about the File manager component, refer to the below links. 

  

UG Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/file-manager/how-to/adding-custom-item-to-toolbar/ 

API Link :https://ej2.syncfusion.com/documentation/api/file-manager/#toolbarsettings 

 

If we have misunderstood,  kindly get back to us with exact and some more addtional details on your requirement to proceed further.  

 

Regards, 

Keerthana.  

 

Greetings,

Thank you for your reply and the example app. How would I access the list of selected files and their information? Ideally I would want it to post to the server file operations call, with the same arguments with a 'select' command - that I can then loop through all of the files selected and their information. I am fine creating this from scratch, but how do I reference the selected files in the "toolbarClick" to send to the server?

So looking for

- Custom toolbar button 'OK / Select' (Completed, in the demo app)

- That kicks off the function "toolbarClick(args)" javascript event (Completed, in the demo app)

- From there want to send the collection of selected files and their information to a server side call via Ajax, just need to know what to send. Ideally it would be similar to a /production/web-services/api/FileManager/FileOperations call, passing into the server/control side "[FromBody] FileManagerDirectoryContent args" from the toolbarClick(args) event. 

Another way to put it, how do I submit an Ajax call from toolbarClick that ajaxs/posts to the FileOperations method with FileManagerDirectoryContent args, with the FileManagerDirectoryContent.Action == 'select'?

Thanks!

Hi Adam, 

 

Good day to you.  

 

We analyzed your requirement of browsing a file using the file manager and sending the selected file data to the server and uploading the selected file content. 

Refer to  the below sample link to achieve your requirement. In that sample, you can browse and select the files while click a file browser button. After double click selected file, the file will be uploaded. 

https://ej2.syncfusion.com/aspnetcore/FileManager/FileUpload#/material 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana. 

Greetings,

We are not looking to upload anything, as the files are already uploaded on the server. How can we view files on the server, select 2 or 3, then click 'ok' to have those files selected post back to the server (not upload, but just notify an server side call of the files 'selected').

Hi Adam,  

 

We have checked your reported query to send the selected file details to the server. For your reference, we have prepared a sample. In that sample we have send selected file details to the server during button click. 

Refer the below code snippet to send the selected file data to the server. 

 

In server side, you have to define a custom class and method to receive the client side data. Refer the below code snippet. 

 

For your reference, we have prepared a sample. Refer the sample link below. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication3-499146394.zip 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana. 

I am trying with Blazor and based on the documentation it does not work:

<SfFileManager AllowDragAndDrop="true"  >

    <FileManagerAjaxSettings Url="/api/SampleData/FileOperations"

                             UploadUrl="/api/SampleData/Upload"

                             DownloadUrl="/api/SampleData/Download">

    </FileManagerAjaxSettings>

     <FileManagerToolbarSettings Items="@Items"></FileManagerToolbarSettings>

</SfFileManager>

@code {

    public string[] Items = new string[] { "NewFolder", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details", "Custom" };

    public async Task ToolbarItemClicked(Syncfusion.Blazor.FileManager.ToolbarClickEventArgs args)

    {

        await Task.Run(() => { return "test"; });

        var t = 0;

    }

}

Hi William,  

 

We have checked your reported issue with FileManager component. In your shared code snippet, you have used ToolbarItemClicked event, but the event is not bind to the FileManager component. 

 

 

Also, please check whether the server side operations are triggered properly on each File Operations (read, delete, move, search). 

 

Refer the attached video: https://www.syncfusion.com/downloads/support/forum/148453/ze/FileManager_(2)-1775340778.zip 

 

For your reference, we have prepared a sample with Blazor FileManager component. 

 

https://www.syncfusion.com/downloads/support/forum/148453/ze/FileManager1675182468.zip 

 

If the issue persist, could you please share the below details to procced further. 

 

1.     Share the screenshot/video footage for the issue you are facing in your application. 

2.     SDK version used in your application. 

3.     Package version you have used in your application. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P