Adding hyperlink to files and download the file by clicking link

Hi Team,

Is it possible to add hyperlinks to files on file explorer and also want to download the file immediately by clicking the link. Right now, we need to click "Download" button or "Right click  on file --> click "Download". 




5 Replies 1 reply marked as answer

IL Indhumathy Loganathan Syncfusion Team August 30, 2021 12:07 PM UTC

Hi Sathiya, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in File Manager component. We understand that you want to add a hyperlink for all files, folder and while clicking on that link you want to perform Download operation for that corresponding selected file/folder. 
 
We have prepared an Angular File Manager sample to achieve your requirement. We have used the fileLoad and success event of File Manager to create and bind click event for buttons. In the click event, we have downloaded the selected file/folder by using the downloadFiles method. 
 
Refer to the below code snippets. 
 
fileLoad(args) { 
  if (args.module == 'LargeIconsView') { 
    //Create a link type button 
    var createTag = document.createElement('button'); 
    createTag.innerHTML = 'Download'; 
    createTag.className = 'e-custom e-btn e-link'; 
    //Append the button with File Name 
    args.element 
      .querySelectorAll('.e-text-content')[0] 
      .appendChild(createTag); 
  } 
} 
success(args) { 
  var el = document.querySelectorAll('.e-custom'); 
  var filemanager: any = this.fileManagerInstance; 
  for (var i = 0; i < el.length; i++) { 
    el[i].addEventListener('click', function() { 
      //Download the selected file 
      filemanager.downloadFiles(filemanager.selectedItems[0]); 
    }); 
  } 
} 
 
You can 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 



SA sathiya replied to Indhumathy Loganathan August 30, 2021 07:14 PM UTC

thank you so much, the solution is working for large icon view. I am trying to implement same solution for details view but click is not working even though td tags are registered with event lister.  is it possible to achieve same solution to details view as well? 



IL Indhumathy Loganathan Syncfusion Team August 31, 2021 02:24 PM UTC

Hi Sathiya, 
 
We have validated your reported query. Since the attached screenshot in your previous update, had the LargeIconsView we prepared a sample with same configuration. However, as per your request we have modified the sample to work for DetailsView as well. We have used the same fileLoad event to achieve your requirement. 
 
Refer to the below code snippet. 
 
  fileLoad(args) { 
    if (args.module == 'DetailsView') { 
      //Create a link type button 
      var createTag = document.createElement('button'); 
      createTag.innerHTML = 'Download'; 
      createTag.className = 'e-custom e-btn e-link'; 
      //Append the button with File Name 
      args.element.querySelector('.e-fe-grid-name').appendChild(createTag); 
    } 
    let proxy: any = this; 
    if (args.element.querySelector('.e-custom') != null) { 
      args.element 
        .querySelector('.e-custom') 
        .addEventListener('click', function() { 
          setTimeout(function() { 
            //Download the selected file 
            proxy.fileManagerInstance.downloadFiles( 
              proxy.fileManagerInstance.selectedItems[0] 
            ); 
          }, 5); 
        }); 
    } 
  } 
 
You can find the sample demonstrating the solution from below link. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Marked as answer

SA sathiya replied to Indhumathy Loganathan September 1, 2021 01:52 PM UTC

Highly appreciated. It works for both detailed vs large icon view now.  Thanks again 



KR Keerthana Rajendran Syncfusion Team September 2, 2021 06:06 AM UTC

Hi Sathiya, 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 

Regards, 
Keerthana R.  


Loader.
Up arrow icon