How to add custom data to uploaded files
Thank you for your support.
|
@using Syncfusion.Blazor.FileManager;
@using Newtonsoft.Json
<div class="control-section">
<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerEvents TValue="FileManagerDirectoryContent" OnSend="send"></FileManagerEvents>
<FileManagerAjaxSettings Url="/api/Home/FileOperations"
UploadUrl="/api/Home/Upload"
DownloadUrl="/api/Home/Download"
GetImageUrl="/api/Home/GetImage">
</FileManagerAjaxSettings>
</SfFileManager>
</div>
@code{
public void send(Syncfusion.Blazor.FileManager.BeforeSendEventArgs args)
{
Dictionary<string, object> data = new Dictionary<string, object>();
data.Add("FilePath", "Syncfusion");
args.CustomData = data;
}
}
Controller:
public class FileManagerDirectoryContent1
{
public Dictionary<string, object> CustomData { get; set; }
public bool HasChild { get; set; }
public DateTime DateCreated { get; set; }
public DateTime DateModified { get; set; }
public string PreviousName { get; set; }
}
[Route("FileOperations")]
public object FileOperations([FromBody] FileManagerDirectoryContent1 args)
{
string filepath = args.CustomData["FilePath"].ToString();
}
[Route("Upload")]
public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action, string CustomData)
{
Dictionary<string, object> AjaxSettings = JsonConvert.DeserializeObject<Dictionary<string, object>>(CustomData);
var filepath = AjaxSettings["FilePath"];
} |
I've finally tried to update to the latest version of Syncfusion (18.4.0.42) and tried to implement the breaking changes of the filemanager.
Here it is:
The code I'm using is this one:
//On before event, where I add my custom data
And the controller action has this definition:
But the breakpoint never activates in it, the exception is displayed before, when trying to create the request I suppose.
The error occurs every time, for every type of file.
I was able to get it working by looking at your example.
The issue was on the razor component code: you must use the predefined type FileManagerDirectoryContent as TValue, whereas you shoukd use your custom type FileManagerDirectoryContent1 in the Controller. Can you explain why?
In any case, now I can upload files, but I've got another problem with the FileOperations method.
The method I use to check the claims is the same between the two methods, but it works in the upload method and doesn't in the fileoperations one.
var user = httpContextAccessor?.HttpContext?.User;
var userId = Guid.Parse(user.Claims.First(a => a.Type == JwtClaimTypes.Subject).Value);
This code above works in the upload method, and doesn't in the fileoperations one, very field of the user is pretty much null.
In the previous version (18.3.x.x) both were working.
Do you have any clue on how can I fix this? I'll try to create an example for you in the meantime.
Thank you
Attachment: BlazorAppTestFilemanager_d83c9779.zip
|
<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerEvents TValue="FileManagerDirectoryContent" OnSend="send"></FileManagerEvents>
<FileManagerAjaxSettings Url="/api/Home/FileOperations"
UploadUrl="/api/Home/Upload"
DownloadUrl="/api/Home/Download"
GetImageUrl="/api/Home/GetImage">
</FileManagerAjaxSettings>
</SfFileManager>
@code{
public async Task send(Syncfusion.Blazor.FileManager.BeforeSendEventArgs e)
{
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
var details = await userManager.GetUserAsync(authState.User);
e.CustomData = new Dictionary<string, object>();
e.CustomData.Add("user", details);
}
} |
|
public async Task<object> FileOperationsAsync([FromBody] FileManagerDirectoryContent1 args)
{
var name = args.CustomData["user"];
if(name != null)
{
//ActionByUser will return user name.
var actionByUser = JsonConvert.DeserializeObject<Microsoft.AspNetCore.Identity.IdentityUser>(args.CustomData["user"].ToString());
} |
Dear Sowmiya,
The following code shows how to get custom data in the FileOperations and Upload actions (copied from above):
[Route("GetImage")]
public IActionResult GetImage(FileManagerDirectoryContent args)
{
//how to get CustomData here??
//Invoking GetImage operation with the required paramaters
// path - Current path of the image file; Id - Image file id;
return this.operation.GetImage(args.Path, args.Id, false, null, null);
}
Hi Luca,
We don’t have any direct support to pass custom value for Download and GetImage operations. Please find the answer for your queries.
For Download request:
Since there is no direct way to pass custom value, you can
prevent our default download operation by setting args.Cancel as
true in BeforeDownload
event. Then you can trigger the
customized download operation using an interop call where you can pass custom
values to server side. Check out the below code snippet.
|
[Index.razor]
<SfFileManager TValue="FileManagerDirectoryContent"> . . . <FileManagerEvents TValue="FileManagerDirectoryContent" OnSend="onsend" BeforeDownload =” beforeDownload”></FileManagerEvents> </SfFileManager> ... @code{ public async Task beforeDownload(BeforeDownloadEventArgs<FileManagerDirectoryContent> args) { args.Cancel = true; DirectoryContent[] data = new DirectoryContent[]{ new DirectoryContent() { Name = args.Data.DownloadFileDetails[0].Name, // name of the file IsFile = args.Data.DownloadFileDetails[0].IsFile, // indicates whether file or folder FilterPath = args.Data.DownloadFileDetails[0].FilterPath, // path of the file/folder from root directory HasChild = args.Data.DownloadFileDetails[0].HasChild, // if folder has child folder set as true else false Type = args.Data.DownloadFileDetails[0].Type // empty string for folder and file type like .png for files
} }; DownloadUrl = https://localhost:44355/api/FileManager/Download; DirectoryContent downloadData = new DirectoryContent() { Data = data, Path = args.Data.Path,// path in which the file is located (make ensure to add the path from root directory excluding the root directory name) Names = args.Data.Names// names of the files to be downloaded in the specified path }; await jsRuntime.InvokeAsync<object>("saveFile", downloadData, DownloadUrl); } } |
|
[_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, customvalue: "Pictures", } … //appeding the dynamically created form to the document and perform form submit to perform download operation a.appendChild(s), document.body.appendChild(a), document.forms.namedItem("downloadForm").submit(), document.body.removeChild(a) } </script> |
For GetImage request:
We are unable to
add the custom header in GetImage request since the GetImage is processed
using query string parameter and download processed using form element.
If we are going to use ajax (asynchronous request) then, each image creates individual request and its having certain time delay based on image size, network bandwidth and server respond time. We are unable to update the headers to the corresponding image tag value. So, it is not possible to implement these operations using Ajax requests. However, you can pass the custom data in the imageUrl, but this is not preferable for sensitive data sending.
|
<SfFileManager TValue="FileManagerDirectoryContent"> ... <FileManagerEvents TValue="FileManagerDirectoryContent" OnSend="onsend" BeforeDownload="beforeDownload" BeforeImageLoad="beforeImageLoad"></FileManagerEvents> </SfFileManager> ... public void beforeImageLoad(BeforeImageLoadEventArgs<FileManagerDirectoryContent> args) { args.ImageUrl = args.ImageUrl + "&SubFolder=Pictures"; } |
[HomeController.cs]
|
public class FileManagerDirectoryContentExtend : FileManagerDirectoryContent { public string customvalue { get; set; } public string SubFolder { get; set; } } ... [Route("Download")] public IActionResult Download(string downloadInput) { FileManagerDirectoryContentExtend args = JsonConvert.DeserializeObject<FileManagerDirectoryContentExtend>(downloadInput); var root = args.customvalue; this.operation.RootFolder(this.basePath + "\\" + this.root + "\\" + root); … [Route("GetImage")] public IActionResult GetImage(FileManagerDirectoryContentExtend args) { var root = args.SubFolder; this.operation.RootFolder(this.basePath + "\\" + this.root + "\\" + root); return this.operation.GetImage(args.Path, args.Id, false, null, null); } |
Please check the attached sample for reference.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManagerSample-158474967
Kindly check the sample whether it meets your requirement. Please get back to us if you need any further assistance.
Regards,
Indhumathy L
- 14 Replies
- 5 Participants
- Marked answer
-
LU Luca
- Oct 22, 2020 11:05 AM UTC
- Jun 1, 2022 01:18 PM UTC
