Customization of details pop-up

Question

Hey there.We have taken file type from the user before uploading any file. We have passed the selected file type as headers to the backend. Now we need to access that file type selected by the user. We have to change the file type in details pop up to the file type that user has selected while uploading any file. Please find the attached snapshots.

Sivakumar ShunmugaSundaram · Answer

To achieve your requirement, you have to send the user-selected file type and file name to the beforeSend event in the FileManager component as mentioned in your update. And based on the file name, you have to add the type of value in the controller's getFiles method, as shown in the below code snippet. Also, you need to set the type of value that is returned from the controller based on the condition in the popupopen event in the FileManager component. We have shared the prepared sample, which sets the type as ".General" for the uploaded file in the dialog popup. Similarly, you can meet your requirements from your side.Refer to the below code snippet. [index.js] export class Overview extends SampleBase { onbeforeSend(args) { if (args.action == 'Read') { window.Filename = ''; } args.ajaxSettings.beforeSend = function (args) { //Setting authorization header var data = { Name: '.General' }; var myJSON = JSON.stringify(data); args.httpRequest.setRequestHeader('Authorization', myJSON); args.httpRequest.setRequestHeader('FileName', window.Filename); }; } onsuccess(args) { if (args.action == 'read') { for (var i = 0; i < args.result.files.length; i++) { if (args.result.files[i].name == window.Filename) { window.MyType = args.result.files[i].myType; } } } } popupOpen(args) { if ( args.popupName == 'File Details' && document .querySelectorAll('.e-dlg-content')[1] .querySelectorAll('.e-fe-value')[2] .innerHTML.split('\')[1] == window.Filename ) { document .querySelectorAll('.e-dlg-content')[1] .querySelector('.e-fe-value').innerHTML = window.MyType; } } uploadListCreate(args) { window.Filename = args.fileInfo.name; } hostUrl = 'http://localhost:62869/'; render() { return (

[FileManagerController.cs] public class DirectoryContent:FileManagerDirectoryContent { public string myType { get; set; } } public object getFiles(FileManagerDirectoryContent args) { var root = HttpContext.Request.Headers["Authorization"]; var def = JsonConvert.DeserializeObject(root); var myroot = def.Name; ... foreach (DirectoryContent file in readResponse.Files) { if (rootName == file.Name) { //Add the URL as additional parameter. file.myType = myroot; } ... } public object FileOperations([FromBody] FileManagerDirectoryContent args) { ... switch (args.Action) { case "read": // reads the file(s) or folder(s) from the given path. return this.getFiles(args); Sample: https://stackblitz.com/edit/react-g7snc2-mgvjfy?file=index.jsService provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-aspcore-file-provider-master1548222743.zip

Jyoti Bajpai · Answer

Thanks for your help.We have taken meta data along with the file type from the user before uploading any file. We have passed the metadata of the file (using push function) as different columns to the backend. Now we need to access that meta data of the selected file. Please find the attached snapshots.

Sivakumar ShunmugaSundaram · Answer

In
FileManager, using the beforeSend
event, you can send additional values like Age, Profile, and Resume ID then add
them to the dialog popup of the uploaded file in the FileManager component. To
achieve your requirement, you just need to add the additional details as
mentioned in the below code snippet in the beforeSend event and add the
property in the controller custom class. You can add these property values to
the uploaded files based on the previously shared condition, as shown below.Refer to
the below code snippet.

[Index.js]
   
  export class Overview extends SampleBase {
      onbeforeSend(args) {
        ...
        args.ajaxSettings.beforeSend = function (args) {
          //Setting authorization header
          var data = {
            Name: '.General',
            Age: '18',
            Profile: 'profile',
            ResumeID: '101',
          };
          var myJSON = JSON.stringify(data);
          args.httpRequest.setRequestHeader('Authorization', myJSON);
          args.httpRequest.setRequestHeader('FileName', window.Filename);
        };
      }
    
      onsuccess(args) {
        if (args.action == 'read') {
          for (var i = 0; i < args.result.files.length; i++) {
            if (args.result.files[i].name == window.Filename) {
              window.MyType = args.result.files[i].myType;
              window.Age = args.result.files[i].age;
              window.Profile = args.result.files[i].profile;
              Window.ResumeID = args.result.files[i].resumeID;
            }
          }
        }
      }
      popupOpen(args) {
        if (
          args.popupName == 'File Details'
  &&
          document
            .querySelectorAll('.e-dlg-content')[1]
            .querySelectorAll('.e-fe-value')[2]
            .innerHTML.split('\')[1] == window.Filename
        ) {
          document
            .querySelectorAll('.e-dlg-content')[1]
            .querySelector('.e-fe-value').innerHTML = window.MyType;
          //using below details you can get age, profile and
  resumeid value which is retruns from server side in file details
          console.log('Uplaoded file
  Age details:' + window.Age);
          console.log('Uplaoded file
  Profile details:' + window.Profile);
          console.log('Uplaoded file
  ResumeID details:' + Window.ResumeID);
        }
      }
  ...

[FileManagerController.cs]
   
  namespace EJ2APIServices.Controllers
  {
     
  public class DirectoryContent:FileManagerDirectoryContent
     
  {
         
  public string myType { get; set; }
         
  public string Age { get; set; }
         
  public string Profile { get; set; }
         
  public string ResumeID { get; set; }
         
  ...
     
  }
     
  public class my
     
  {
         
  public string Name { get; set; }
         
  public string Age { get; set; }
         
  public string Profile { get; set; }
         
  public string ResumeID { get; set; }
      }
  ...
  public object getFiles(FileManagerDirectoryContent args)
         
  {
             
  var root =
  HttpContext.Request.Headers["Authorization"];
             
  var def =
  JsonConvert.DeserializeObject<my>(root);
             
  var myroot =
  def.Name;
             
  var age = def.Age;
             
  var profile =
  def.Profile;
             
  var resumeId =
  def.ResumeID;
             
  var rootName
  = HttpContext.Request.Headers["FileName"];
             
  FileResponse readResponse = new FileResponse();
                 
  try
                 
  {
                     
  ...
                     
  foreach
  (DirectoryContent file in readResponse.Files)
                     
  {
                     
  if (rootName ==
  file.Name)
                     
  { 
                          //Add the URL as additional parameter.
                         
  file.myType = myroot;
      
                     file.Age=age;
                         
  file.Profile = profile;
                         
  file.ResumeID =
  resumeId;
                     
  }
                 
  }
  ...

}

Sample: https://stackblitz.com/edit/react-g7snc2-wsggzg?file=index.jsService
provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-aspcore-file-provider-master1549280251.zipCheck the
shared sample for your reference.