Adding hyperlink to files and download the file by clicking link

[sathiya]

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". 

[Indhumathy Loganathan]

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. 

 

https://stackblitz.com/edit/angular-cz7va5-pqbz9q?file=app.component.ts 

 

Please check the sample and let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[sathiya]

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? 

[Indhumathy Loganathan]

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. 

 

https://stackblitz.com/edit/angular-cz7va5-c3dgc1?file=app.component.ts 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[sathiya]

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

[Keerthana Rajendran]

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.