Blazor FileManager full example
8 Replies
Hi Aitlahmid,
Query 1 - Dynamically change the root folder
Yes, you can dynamically change the root folder. You can set the root folder based on user id in controller side. Refer the below code snippet.
|
public class DefaultController : Controller
{
public PhysicalFileProvider operation;
public string basePath;
// Based on Login id.
if(option1 == "user1") {
string root = "wwwroot\\Files";
}
else if(option1 == "user2") {
string root = "wwwroot\\Files\\Data";
}
} |
Query 2 – Modify the filemanager operations.
Yes, you can modify the filemanager operation based on your requirement in controller side using local service. There is no need for SQL File provider. In each operations performs controller side event is triggered. You can customize the operations inside the Models/PhysicalFileProvider.cs file.
Refer the below screenshot.
Query 3 – Custom action details.
Yes, you can get the selected files details in SelectedFiles() method of FileManager component. Refer the below code snippet.
|
public async Task menuClick(MenuClickEventArgs args)
{
if(args.Item.Text == "Custom")
{
var selectedFiles = await file.GetSelectedFiles();
// Perform the operation based on your requirement.
System.Diagnostics.Debug.WriteLine("Custom item clicked");
}
} |
Query 4 – Image of pdf, docx in files.
We have consider this as a custom sample from our end. We will provided a sample within three business days.
Query 5 – Access control.
In FileManager component, we have provided a access control support for particular files in Physical File Provider. Refer the below code snippet to restrict the access for particular files or folder.
|
public DefaultController (IHostingEnvironment hostingEnvironment)
{
// You can set rules for folder access.
this.operation.SetRules(GetRules());
}
public AccessDetails GetRules()
{
AccessDetails accessDetails = new AccessDetails();
List
// For Default User
new AccessRule { Path = "/Documents", Role = "Document Manager", Read = Permission.Deny, Write = Permission.Deny, Copy = Permission.Allow, WriteContents = Permission.Allow, Upload = Permission.Allow, Download = Permission.Deny },
};
accessDetails.AccessRules = folderRule;
accessDetails.Role = "Document Manager";
return accessDetails;
} |
Refer the below sample link for your reference.
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
Hi Aitlahmid,
Query 2 - Add additional column to the table.
As per our promised, we have prepared a custom sample based on your requirement. In this sample, we have added a ReviewNumber as a additional column and display the column in DetailsView of FileManager component.
If you want to display the reviewNumber column in DetailsView, you can override the getFiles method. Refer the below code snippet.
|
public object getFiles(FileManagerDirectoryContent args)
{
FileResponse readResponse = new FileResponse();
try
{
// Get the Files details of all the files in FileManager component.
var value = this.operation.GetFiles(args.Path, args.ShowHiddenItems, args.Data);
DirectoryContent cwd = new DirectoryContent();
readResponse.CWD = JsonConvert.DeserializeObject<DirectoryContent>(JsonConvert.SerializeObject(value.CWD));
SqlConnection sqlConnection = new SqlConnection(this.operation.ConnectionString);
try
{
sqlConnection.Open();
// add the ReviewNumber column to the response.
readResponse.CWD.ReviewNumber = value.CWD.Id;
}
catch (SqlException ex) { Console.WriteLine(ex.ToString()); }
finally { sqlConnection.Close(); }
readResponse.Files = JsonConvert.DeserializeObject<IEnumerable<DirectoryContent>>(JsonConvert.SerializeObject(value.Files));
// add the ReviewNumber field to the each files and folder.
foreach (DirectoryContent file in readResponse.Files)
{
SqlConnection sqlConnection1 = new SqlConnection(this.operation.ConnectionString);
try
{
sqlConnection1.Open();
file.ReviewNumber = file.ReviewNumber;
}
catch (SqlException ex) { Console.WriteLine(ex.ToString()); }
finally { sqlConnection1.Close(); }
}
readResponse.Details = value.Details;
readResponse.Error = value.Error;
// Return the Read response to the FileManager component.
return readResponse;
}
catch (SqlException ex) { return null; }
} |
And also add the ReviewNumber attribute in GetFiles method inside the SQLProvider.cs file in model folder.
|
try
{
...
...
{
ReviewNumber = reader["ReviewNumber"].ToString(),
HasChild = (bool)reader["HasChild"]
};
...
...
while (reader.Read())
{
var childFiles = new FileManagerDirectoryContent
{
ReviewNumber = reader["ReviewNumber"].ToString(),
Id = reader["ItemID"].ToString()
};
...
...
files.Add(childFiles);
}
} |
To display the Column(ReviewNumber) in FileManager component, add the extra column in DetailsView settings (Index.razor)
|
<SfFileManager RootAliasName="Root Folder">
<FileManagerDetailsViewSettings >
<FileManagerColumns>
<FileManagerColumn Field="name" HeaderText="FileName"></FileManagerColumn>
<FileManagerColumn Field="dateModified" HeaderText="Date Modified">
</FileManagerColumn>
<FileManagerColumn Field="reviewNumber" HeaderText="ReviewNumber">
</FileManagerColumn>
</FileManagerColumns>
</FileManagerDetailsViewSettings>
</SfFileManager> |
Refer the below screenshot.
Refer the sample link below.
Note: It is mandatory to add the custom column in SQL Tables.
Query 1 &3 - Change Root folder and Extract pdf icon.
Currently, we have preparing the sample based on your requirement. We will update the sample to you within 4 business days (31/3/2020).
Please let us know, if you have any concerns.
Regards,
Sowmiya.P
Hi Aitlahmid,
Query 1 – Change the root folder.
We have prepared a sample based on your requirement (Change the Root folder based on menu items). In FileManager component, you can pass the value using OnSend event.
When select the items in DropDownList, you have to refresh the FileManager component. In that case, OnSend event is triggered.
|
<SfDropDownList @ref="Dropdown" Value="@dropValue" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
<DropDownListEvents TValue="string" ValueChange="change"></DropDownListEvents>
<DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>
public void change(ChangeEventArgs<string> args)
{
// Refresh the FileManager component. It Triggers the onSend event in FileManager component.
this.Filemanager.Refresh();
} |
Refer the below code snippet for OnSend event.
|
<SfFileManager @ref="Filemanager">
<FileManagerEvents OnSend="send"></FileManagerEvents>
</SfFileManager>
public void send(BeforeSendEventArgs args)
{
// Add the extra column in AhaxSettings of Filemanager and send the value to the FileManager component.
string AjaxSettingsString = JsonConvert.SerializeObject(args.AjaxSettings);
Dictionary<string, dynamic> AjaxSettings = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(AjaxSettingsString);
string dataString = AjaxSettings["data"];
Dictionary<string, dynamic> data = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(dataString);
// Fetch the DropDown value.
var Option = this.Dropdown.Value;
data.Add("Option", Option);
string modifiedDataString = JsonConvert.SerializeObject(data);
AjaxSettings["data"] = modifiedDataString;
string returnString = JsonConvert.SerializeObject(AjaxSettings);
args.AjaxSettings = JsonConvert.DeserializeObject<object>(returnString);
} |
You can fetch the value in controller side and then set the RootFolder based on your option.
|
[Route("SQLFileOperations")]
public object SQLFileOperations([FromBody] FileManagerDirectoryContent1 args)
{
if(args.Option == "Option1")
{
operation.SetSQLConnection("FileManagerConnection", "Product", "0");
}
else if(args.Option == "Option2") {
// Set the path based on your requirement.
}
} |
In the below sample, we have rendering the FileManager component based on the DropDownList value.
Query 2- Extract the Pdf and excel files.
You can import the below package in your application for extracting the word, excel and pdf files.
Syncfusion.DocIORenderer.Net.Core
Syncfusion.Blazor.PdfViewerServer.Windows
Syncfusion.PresentationRenderer.Net.Core
We have prepared a sample in Physical file provider. You can change the icon using OnFileLoad event. Refer the below code snippet for Client side function.
|
public async void fileLoad(FileLoadEventArgs args)
{
string dataString = JsonConvert.SerializeObject(args.FileDetails);
Dictionary<string, dynamic> fileDetails = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(dataString);
if (args.Module == "LargeIconsView" && (fileDetails["type"] == ".pptx" || fileDetails["type"] == ".docx"
|| fileDetails["type"] == ".doc" || fileDetails["type"] == ".rtf" || fileDetails["type"] == ".pdf"))
{
// Get the URL of the files.
string url = getImageUrl(fileDetails);
DOM ele = args.Element;
string val = Convert.ToString((await ele.GetAttribute("data-uid")));
ele.AddClass(new string[] { "e-file-preview-image" });
// Call the client side function.
await JSRuntime.InvokeVoidAsync("setPreview", val, url);
}
}
public string getImageUrl(Dictionary<string, dynamic> data)
{
//Specify your controller action name
string baseUrl = "/api/Default/GetPreviewImage";
string imgUrl = baseUrl + "?path=" + data["filterPath"] + data["name"];
return imgUrl;
}
} |
Refer the server side operations.
|
[Route("GetPreviewImage")]
public IActionResult GetPreviewImage(FileManagerDirectoryContent args)
{
try
{
String fullPath = baseFolder + args.Path;
string extension = Path.GetExtension(fullPath);
Stream imageStream = null;
if (extension == ".pdf")
{
FileStream fileStream = new FileStream(fullPath, FileMode.Open, FileAccess.Read);
PdfRenderer pdfExportImage = new PdfRenderer();
//Loads the PDF document
pdfExportImage.Load(fileStream);
//Exports the PDF document pages into images
Bitmap[] bitmapimage = pdfExportImage.ExportAsImage(0, 0);
imageStream = new MemoryStream();
bitmapimage[0].Save(imageStream, System.Drawing.Imaging.ImageFormat.Png);
imageStream.Position = 0;
pdfExportImage.Dispose();
fileStream.Close();
}
else if (extension == ".docx" || extension == ".rtf" || extension == ".doc")
{
FileStream fileStream = new FileStream(fullPath, FileMode.Open, FileAccess.Read);
//Loads file stream into Word document
WordDocument document = new WordDocument(fileStream, Syncfusion.DocIO.FormatType.Automatic);
fileStream.Dispose();
//Instantiation of DocIORenderer for Word to PDF conversion
DocIORenderer render = new DocIORenderer();
//Converts Word document into PDF document
PdfDocument pdfDocument = render.ConvertToPDF(document);
//Releases all resources used by the Word document and DocIO Renderer objects
render.Dispose();
document.Dispose();
//Saves the PDF file
MemoryStream outputStream = new MemoryStream();
pdfDocument.Save(outputStream);
outputStream.Position = 0;
//Closes the instance of PDF document object
pdfDocument.Close();
PdfRenderer pdfExportImage = new PdfRenderer();
//Loads the PDF document
pdfExportImage.Load(outputStream);
//Exports the PDF document pages into images
Bitmap[] bitmapimage = pdfExportImage.ExportAsImage(0, 0);
imageStream = new MemoryStream();
bitmapimage[0].Save(imageStream, System.Drawing.Imaging.ImageFormat.Png);
imageStream.Position = 0;
fileStream.Close();
}
else if (extension == ".ppt" || extension == ".pptx")
{
IPresentation presentation = Presentation.Open(fullPath);
//Initialize PresentationRenderer for image conversion
presentation.PresentationRenderer = new PresentationRenderer();
//Convert the first slide to image
imageStream = presentation.Slides[0].ConvertToImage(ExportImageFormat.Png);
presentation.Dispose();
}
FileStreamResult fileStreamResult = new FileStreamResult(imageStream, "APPLICATION/octet-stream");
//Retur the image result.
return fileStreamResult;
}
catch (Exception e)
{
return null;
}
} |
Refer the sample line below.
Refer the similar forum link for your reference.
If you are facing any issue when implementing the similar in SQL file provider. We will happy to assist you.
Please let us know, if you have any concerns.
Regards,
Sowmiya.P
SIGN IN To post a reply.
