How to force file downloads?

Help Center Get Answers
1

Hi all, This is my first post here and hoping to be useful to the community going forwards. This time I need help with creating download links for file fields that does not open the file in the window but rather triggers a download every time regardless of filetype.

Already tried to make links like this <A HREF="url" download="filename.filetype">Target</A>

Knack ignores the download attribute.

Any ideas?

Thanks
Patrik @ 5HC

2

Hi Patrick, welcome to the community :wave:

I notice from your footer that you are at 5HC, which I presume is the same 5HC that my good friend Hugo Cox owns? Anyway, even with some ChatGPT assistance I wasn’t able to find a simple solution to your query. Hopefully there might be a far more competent coder who may be able to assist. I appreciate you can ask AI the same question but I thought I’d attach the response to see if it helps / inspires?

image
image1037×1486 148 KB

3

Hi Carl,

Yes I have just started working for Hugo at 5HC and he have mentioned you many times. Look forward to sharing ideas going forwards.

Thanks for the ChatGPT searching and the first suggestion did not work but the second might so lets see.

[//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/flex020/uploads/knack/original/2X/a/ae64c128adcb5a101569b6ee225933b6bf2d9f0e.png]
Book a callhttps://calendly.com/patrik-5hc

1 Like
4

Hey @Patrik, the trick is to remove the .kn-view-assetclass as well. Let me know if this helps!

$(document).on('knack-view-render.any', async function(event, view, record){

  $(`#${view.key} .kn-view-asset`).each(function() {
    var url = $(this).attr('href'); // Get the URL of the clicked link
    var pathArray = url.split('/'); // Split the URL string into substrings between '/' characters
    var filePath = pathArray[pathArray.length-1]; // Get the file name in the last substring (e.g. file.pdf)
    $(this).attr('download',filePath); // Add the download attribute
    $(this).removeClass('kn-view-asset'); // Remove the class so it doesn't trigger the standard modal
  });

});

Alternatively, you can open up PDF/image/other browser supported files in a new window (rather than Knack’s modal) with this code:

$(document).on('knack-view-render.any', async function(event, view, record){

  $(`#${view.key} .kn-view-asset`).each(function() {
    var url = $(this).attr('href'); // Get the URL of the clicked link
    var pathArray = url.split('/'); // Split the URL string into substrings between '/' characters
    var filePath = pathArray[pathArray.length-1]; // Get the file name in the last substring (e.g. file.pdf)
    var assetPath = pathArray[pathArray.length-2]; // Get the asset path in the second-last substring (e.g. 6-13-77-5d2ffb2f47b3c70010ffd98d)
    pathArray = assetPath.split('-'); // Split the assetPath into substrings between '-' characters
    assetPath = pathArray[pathArray.length-1]; // Get the actual asset path in the last substring (e.g. 5d2ffb2f47b3c70010ffd98d)
    var newURL = `https://api.knack.com/v1/applications/${Knack.application_id}/download/asset/${assetPath}/${filePath}` // Concatenate the download URL
    $(this).attr('href',newURL);
    $(this).attr('target','_blank');
    $(this).removeClass('kn-view-asset');
  });

});
2 Likes
5

Hi Stephen,

Thanks a lot for these solutions and for teaching me about the .kn-view-asset class and its significance. Wish there was a glossary for these classes somewhere.

6

Hey @Patrik, it’s all visible when using the Developer Console in your browser to identify elements to manipulate with JS/CSS, so no glossary required.

7

Hey @StephenChapman. Thanks for your help. What I meant is which classes knack ties to which functionality; should I wish to use or disuse them. You thought me the first one with your code.

Cheers