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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

File Explorer - File Picker / Selector?

Thread ID:

Created:

Updated:

Platform:

Replies:

148453 Oct 16,2019 08:51 PM UTC Oct 19,2020 07:26 AM UTC ASP.NET Core - EJ 2 8
loading
Tags: FileManager
Adam
Asked On October 16, 2019 08:51 PM UTC

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

Adam
Replied On October 16, 2019 09:17 PM UTC

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. 

Keerthana Rajendran [Syncfusion]
Replied On October 17, 2019 10:56 AM UTC

  
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 
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. 
  
To know more about the File manager component, refer to the below links. 
  
 
If we have misunderstood,  kindly get back to us with exact and some more addtional details on your requirement to proceed further.  
 
Regards, 
Keerthana.  
 


Adam
Replied On October 17, 2019 01:04 PM UTC

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!



Keerthana Rajendran [Syncfusion]
Replied On October 21, 2019 06:02 AM UTC

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. 
Please let us know, if you have any concerns. 
 
Regards, 
Keerthana. 


Adam
Replied On October 22, 2019 07:35 PM UTC

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').

Keerthana Rajendran [Syncfusion]
Replied On October 23, 2019 12:41 PM UTC

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. 
<script> 
    document.getElementById('Click').onclick = function (e) { 
        // Get the selected files 
        var fileDetails = document.getElementById('fileManagerId').ej2_instances[0].getSelectedFiles(); 
        var obj = { data: fileDetails }; 
        // Send the ajax request to the server containing selected files. 
        $.ajax({ 
                type: "POST", 
                contentType: "application/json; charset=utf-8", 
                 // Custom method the data passed 
                 url: "/Home/Selected_Files",             
                 data: JSON.stringify(obj), 
                dataType: "json", 
                success: function (data) { 
                    var res = $.parseJSON(data); 
                    $("#myform").html("<h3>Json data: <h3>" + res.fname + ", " + res.lastname) 
                }, 
                error: function (xhr, err) { 
 
                } 
            }); 
    } 
</script> 
 
In server side, you have to define a custom class and method to receive the client side data. Refer the below code snippet. 
public IActionResult Selected_Files([FromBody] SelectedFile  details) 
        { 
           // File name for selected file 
            var file_name = details.data[0].Name; 
            return View(); 
        } 
public class SelectedFile 
{ 
    public FileManagerDirectoryContent[] data { get; set; } 
} 
 
For your reference, we have prepared a sample. Refer the sample link below. 
 
Please let us know, if you have any concerns. 
 
Regards, 
Keerthana. 


William
Replied On October 16, 2020 03:50 AM UTC

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;
    }
}

Sowmiya Padmanaban [Syncfusion]
Replied On October 19, 2020 07:26 AM UTC

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. 
 
<SfFileManager AllowDragAndDrop="true"> 
    <FileManagerEvents ToolbarItemClicked="ToolbarItemClicked"></FileManagerEvents> 
    <FileManagerAjaxSettings Url="/api/Default/FileOperations" 
                             UploadUrl="/api/Default/Upload" 
                             DownloadUrl="/api/Default/Download" 
                             GetImageUrl="/api/Default/GetImageUrl"> 
    </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; 
    } 
} 
 
Also, please check whether the server side operations are triggered properly on each File Operations (read, delete, move, search). 
 
 
For your reference, we have prepared a sample with Blazor FileManager component. 
 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon