File downloads site

Support
, , ,
#1

Hi,

I would like to have a file system on netlify like this: https://assets.vercel.com/image/upload/front/assets/design/vercel-triangle-black.svg

When you go onto the link, it downloads the file.

When I try to make something like this, I go to the link and it shows it on the screen. What do I need to add?

#2

You need to add a link like:

<a href = "path-to-file" download>Click to download</a>
#3

Thanks @hrishikesh,

This isn’t exactly what I meant, I don’t think - I might be wrong.

The reason I am asking is because I am trying to use this tool, by Vercel: vercel og image (github.com)

In order to add my own image (logo) to it I think I need it to auto download when I go to the link as that’s how the current ones work:
Lines 144-148 /web.index.ts

const imageLightOptions: DropdownOption[] = [
    { text: 'Vercel', value: 'https://assets.vercel.com/image/upload/front/assets/design/vercel-triangle-black.svg' },
    { text: 'Next.js', value: 'https://assets.vercel.com/image/upload/front/assets/design/nextjs-black-logo.svg' },
    { text: 'Hyper', value: 'https://assets.vercel.com/image/upload/front/assets/design/hyper-color-logo.svg' },
];

If you see those links, the images automatically get downloaded.

I was having issues using other images that do not automatically download.

I am doing something wrong, or do I need a different server?

#4

Those files are sending the content-disposition header:

content-disposition: attachment; filename="nextjs-black-logo.svg"

That’s the header that triggers downloads in browsers. You would have to include custom headers to make this possible:

#5

Yes, I did take a look at that page, I gathered that I would need a
_headers page. But what to put inside it is what I am confused about.
Would it be what you said:

content-disposition: attachment; filename="filename"

that I would need to include in that file @hrishikesh?

Currently, I have an empty repo with one SVG file inside it, if that helps.

#6

Yeah that should do it.

#7

Thanks @hrishikesh, but that didn’t seem to work.
I have made the repo public: testing (github.com)
The URL for the site is here: (gifted-bose-a9af5d.netlify.app)

It still just shows me the image instead of downloading it.

#8

The syntax for the headers file is incorrect. :slight_smile: The docs should cover the correct syntax. But for your reference, it is this:

/logo.svg
  content-disposition: attachment; filename="logo.svg"

On a side note, I hope you’re going to use this on a real site. Hosting assets without actually hosting the site is a violation of the Terms Of Service.

#9

Ah yes, thank you so much @hrishikesh. That works a charm! I will check it on the vercel og image thing now.

I figured it’d be easier to have a small site where I could host it to better explain what I was trying to do… I will go ahead and move it over to my main site now!

Thanks for your help!