1. Home
  2. Forum
  3. Blazor
  4. file Manager with ftp provider

file Manager with ftp provider

I'm using Blazor server 18.4.0.46 + AspNetCore 5.0 
I need to find a solution to create an application where the user can select a file from his local disc and then upload it in a ftp server
After selecting the file from the local disc, the "upload"  must be done by the code behind
At the moment I'm using successfully a very bad solution:
I added a "File Upload" component where the user drag and drop the file from the local disc, then from code behind I saved the file in the web server where the application is running and then I copied it to an ftp server.
whenever I need to download it again locally, I have a button in a grid to save the file in the web server and then I downloaded it to the user local disc.

To find a better solution, I think I could use the File Manager component in combination with the File Upload and avoid at all to pass through the web server so this is what I did:
I downloaded from this link GitHub - SyncfusionExamples/ej2-ftp-aspcore-file-provider: This repository contains the ASP.NET Core FTP file system provider for the file manager component. the necessary project. I configured the ftp server access and then I added it to my project and I managed to show the ftp server folders and contents inside a file Manager component when running the application locally from visualStudio and now the problems:

When I published the whole application to the hosting web server and I opened the page with the File Manager component but an error like this appeared: NetworkError: Failed to execute 'send' on 'XMLHttpRequest'

Do you have any idea on the source of problem?
Is it the project from GitHub something running necessary as a service in a specific port ? Because in my hosting environment I can run only one application so may be the reason for the error message is that I can't start my application and the GitHub project together.

Is it possible as an alternative to convert the GitHub project as a AspNet Core 5.0 + syncfusion blazor application where I add inside my pages ?

Thanks in advance










12 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team March 10, 2021 01:11 PM UTC

Hi Walter Martin,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with FileManager component. For your reference, we have prepared a sample for FTP file provider in Blazor platform. 
 
 
Steps to run the sample: 
 
1.     Please, follow the below documentation to create a Blazor application. 
 
2.     Add the controller part and Model file in Blazor application. 
 
3.     Add the mapControllers in startup,cs file. 
 
app.UseEndpoints(endpoints => 
            { 
                endpoints.MapControllers(); 
                endpoints.MapBlazorHub(); 
                endpoints.MapFallbackToPage("/_Host"); 
            }); 
 
 
4.     Add the FTP username and password in the below line and run the sample. 
 
Please, refer to the below links for more details on FileManager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
WM Walter Martin March 10, 2021 09:40 PM UTC

Thank you, your sample works fine and following your guide I managed to add the ftpprovider also to my application.
Now I'm looking for a sample to use the standard ftp operations like upload, download and copy not using the filemanager component.
A good solution would be to use the "File upload" with autoupload property set to false, let the user select a file from his local disc and then  calling the upload ftp function to save it in the ftp server.
Is there any sample for that ?


IL Indhumathy Loganathan Syncfusion Team March 11, 2021 04:12 PM UTC

Hi Walter, 
 
We have validated your requirement. In FileManager component, requests are sent from client to server and we handled the file operations based on this scenario. However, you can customize your own file operations in service provider. 
 
In your update you have used a term “standard ftp operations  like upload, download and copy not using the filemanager component”, whether you are developing your own file operations. Please share us more details to understand your exact requirement. 

Before we proceed further with your autoUpload requirement,  we would like to confirm your exact requirement related to FileManager. Please check whether the below sample meets your requirement. 
 
 
Please share details on whether you want set autoUpload as false in Filemanager or in Uploader component. This will help us to serve you better. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


WM Walter Martin March 15, 2021 03:45 PM UTC

thanks for your answer
I add you in attachment a short project to better explain what I'd like to do
Basically I need to use the functions provided by the filemanager component but calling them with a button click so without showing the filemanager component in the UI

In the attachment everything works if I use the filemanger component but supposing I want to remove it from the UI and then load a file from the customer's local disc and save it in the ftp server
I tried using the fileupload component to load the file in memory but how can I call then the filemanger ftpupload function to save it in the server ?
And how can I call the ftpdownload function to download a specific filename ?

Thanks
Best Regards
 

Attachment: BlazorApp1_d0cf7672.zip

SP Sowmiya Padmanaban Syncfusion Team March 17, 2021 11:08 AM UTC

Hi Walter Martin,  
 
We have checked your requirement with FileManager component (trigger upload and Download dynamically). When you pass the data in the below format to the server side, it will automatically trigger the file upload and download operations.   
 
Upload : 
 
   var obj = {  
      uploadFiles: [],  
      action: "Save",  
      path: "/",  
      data: {  
        path: null,  
        action: null,  
        newName: null,  
        names: null,  
        name: "Downloads",  
        size: 0,  
        previousName: null,  
        dateModified: "2019-07-22T11:23:46.7153977 00:00",  
        dateCreated: "2019-07-22T11:26:13.9047229 00:00",  
        hasChild: false,  
        isFile: false,  
        type: "",  
        id: null,  
        filterPath: "\\",  
        targetPath: null,  
        renameFiles: null,  
        uploadFiles: null,  
        caseSensitive: false,  
        searchString: null,  
        showHiddenItems: false,  
        _fm_iconClass: null,  
        _fm_id: "fe_tree_1",  
        _fm_pId: null,  
        _fm_selected: false,  
        _fm_icon: null,  
        data: null,  
        targetData: null,  
        permission: null  
      }  
    };  
 
Download: 
 
{ 
    action:"download", 
    path:"/", 
    names:["1.png"], 
    data:[ 
        { 
            path:null, 
            action:null, 
            newName:null, 
            names:null, 
            name:"1.png", 
            size:49792, 
            previousName:null, 
            dateModified:"2019-07-22T12:15:45.0972405+00:00", 
            dateCreated:"2019-07-22T12:15:45.0816042+00:00", 
            hasChild:false, 
            isFile:true, 
            type:".png", 
            id:null, 
            filterPath:"\\", 
            targetPath:null, 
            renameFiles:null, 
            uploadFiles:null, 
            caseSensitive:false, 
            searchString:null, 
            showHiddenItems:false, 
            _fm_iconClass:"e-fe-image", 
            _fm_id:null, 
            _fm_pId:null, 
            _fm_selected:false, 
            _fm_icon:null, 
            data:null, 
            targetData:null, 
            permission:null, 
            _fm_created:"2019-07-22T12:15:45.081Z", 
            _fm_modified:"2019-07-22T12:15:45.097Z", 
            _fm_imageAttr: 
            { 
                alt:"1.png" 
            }, 
            _fm_htmlAttr: 
            { 
                class:"e-large-icon", 
                title:"1.png" 
            } 
        } 
    ] 
} 
 
Please, refer to the below link for data sent to the server side for File Operations. 
 
 
In the below forum , we have triggered the read operations on button click. 
 
 
Please get back to us if you are facing any difficulties while implementing the above suggestion. We will be happy to assist you. 
 
Regards, 
Sowmiya.P 


WM Walter Martin March 17, 2021 04:17 PM UTC

Thanks for this reply, but how can I send those data to the server ?
I tried to use the following instructions:

from the blazor page:
string result = Newtonsoft.Json.JsonConvert.SerializeObject(fm);
await JsRuntime.InvokeVoidAsync("DownloadFtp", DotNetObjectReference.Create(this), result);

where fm is my class with all the ncessary fields suggested by you below

and this is the javascript

window.DownloadFtp = (instance, jsonresult) => {
    $.ajax({
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        url: "/api/FTPProvider/FTPDownload",
        processData: false,
        data: jsonresult,
        success: function () {
        }
        
    });
};

jsonresult seems to have the right content

this is in the controller:
[Route("FTPDownload")]
public IActionResult FTPDownload(string downloadInput)
        {
            FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
            return operation.Download(args.Path, args.Names, args.Data);
        }


but downloadInput is empty

what am I doing wrong ?



IL Indhumathy Loganathan Syncfusion Team March 19, 2021 03:32 PM UTC

Hi Walter, 
 
We are currently validating your reported query with the provided code snippets in FileManager component and we will provide you further validation details within four business days(25-03-2021). 
 
We appreciate your patience. 
 
Regards, 
Indhumathy L 


IL Indhumathy Loganathan Syncfusion Team March 25, 2021 07:46 AM UTC

Hi Walter, 
 
Thanks for your patience. 
 
We have validated your requirement in FileManager component. In FileManager, we have DownloadFilesAsync method which will download the folders or files from the given unique identifiers. You can achieve your requirement by adding the below code snippet in a button click. 
 
private void DownloadDoc() 
{ 
    this.filemanager.DownloadFilesAsync(filemanager.SelectedItems); 
} 
 
In the above code, we have downloaded the selected items in the FileManager. You can pass the unique file detail in the method to download the required file, but it needs to be available at the current path. 
 
Please find the sample demonstrating the solution from below link. 
 
 
Please check the sample and let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


WM Walter Martin March 25, 2021 11:54 AM UTC

Forgive me but probably something was not clear in what I need.
In my original post I wrote "In the attachment everything works if I use the filemanger component but supposing I want to remove it from the UI and then load a file from the customer's local disc and save it in the ftp server
I tried using the fileupload component to load the file in memory but how can I call then the filemanger ftpupload function to save it in the server ?
And how can I call the ftpdownload function to download a specific filename ?"


so I don't want to use the filemanager in the UI, I need to call the FtpDownload and FtpUpload functions dinamically

your colleague Sowmiya.P  gave me the right way to proceed showing me the link of the documentation https://blazor.syncfusion.com/documentation/file-manager/file-operations/#download 
but this documentation doesn't work to me as explained in my next post.

Please read my reply on March 17, 2021 04:17 PM UTC

when I call the function 
[Route("FTPDownload")]
public IActionResult FTPDownload(string downloadInput)

downloadInput seems to be empty even if I called the function with the right content.
What am I doing wrong ?

Thanks


 

 


 

IL Indhumathy Loganathan Syncfusion Team March 29, 2021 12:36 PM UTC

Hi Walter, 
  
We deeply regret for the inconvenience. 
  
We would like to let you know that the Download operation in the FileManager component will be performed by using a simple form submit (input name attribute is downloadInput) where the details required for downloading the files or folders will be passed to the web API method. Since your requirement is to perform the Download operation without rendering the FileManager component, you will need to construct these data from your end manually at the sample level as shown in the below code snippet. 
  
Index.razor 
  
@using Syncfusion.Blazor.Buttons 
@inject IJSRuntime jsRuntime 
  
<SfButton CssClass="e-small e-info " Type="button" IsPrimary=false OnClick="Download">Click</SfButton> 
  
@code{ 
    public class DirectoryContent 
    { 
        public DirectoryContent[] Data { get; set; } 
        public string FilterPath { get; set; } 
        public string Id { get; set; } 
        public string Type { get; set; } 
        public bool IsFile { get; set; } 
        public bool HasChild { get; set; } 
        public long Size { get; set; } 
        public string Name { get; set; } 
        public string[] Names { get; set; } 
        public string Action { get; set; } 
        public string Path { get; set; } 
    } 
  
    public string DownloadUrl { get; set; } 
    private async Task Download() 
    { 
        DirectoryContent[] data = new DirectoryContent[]{ new DirectoryContent() 
        { 
            Name = "img", // name of the file 
            IsFile = false, // indicates whether file or folder 
            FilterPath = "/", // path of the file/folder from root directory 
            HasChild = true, // if folder has child folder set as true else false 
            Type = "" // empty string for folder and file type like .png for files 
  
        } }; 
        DirectoryContent downloadData = new DirectoryContent() 
        { 
            Data = data, 
            Path = "/",// path in which the file is located (make ensure to add the path from root directory excluding the root directory name) 
            Names = new string[] { "img" } // names of the files to be downloaded in the specified path 
        }; 
        await jsRuntime.InvokeAsync<object>("saveFile", downloadData, DownloadUrl); 
    } 
} 
 
Once the required download data is created at the sample end, you need to create a dynamic form as shown in the below code snippet with the created custom download data and submit it manually to perform the download operation of a file/folder using FTP file provider service without using the FileManager component. 

_Host.cshtml 
  
<script> 
        window.saveFile = (data, downloadUrl) => { 
            //creating the data to call download web API method 
            var i = { 
                action: "download", 
                path: data.path, 
                names: data.names, 
                data: data.data 
            } 
                , a = ej.base.createElement("form", { 
                    id: "sample_downloadForm", 
                    attrs: { 
                        action: downloadUrl, 
                        method: "post", 
                        name: "downloadForm", 
                        download: "" 
                    } 
                }) 
                , s = ej.base.createElement("input", { 
                    id: "sample_hiddenForm", 
                    attrs: { 
                        name: "downloadInput", 
                        value: JSON.stringify(i), 
                        type: "hidden" 
                    } 
                }); 
            //appeding the dynamically created form to the document and perform form sumbit to perform download operation 
            a.appendChild(s), 
                document.body.appendChild(a), 
                document.forms.namedItem("downloadForm").submit(), 
                document.body.removeChild(a) 
        } 
    </script> 
  
Please find the sample in the below link demonstrating the above solution. 
  
Please let us know if you need any further assistance. 
  
Regards, 
Indhumathy L

WM Walter Martin March 29, 2021 01:48 PM UTC

Thanks a lot!
I suppose I made a mistake in my solution in the Javascript part where I don't have enough knowledge because I followed a way similar to yours but my solution didn't work
I'll try to deeply investigate to understand the differences but this problem is solved


KR Keerthana Rajendran Syncfusion Team March 30, 2021 06:03 AM UTC

Hi Walter, 
 
Most welcome. We are glad to know that your problem is resolved. Please get back to us if you need further assistance.  
 
Regards, 
Keerthana.  


Loader.
Up arrow icon