How to save a file from URL after click?

Question

I have a table in some cells I have URLs, and I need after click save files from URLs. I found example with Download Image - but it doesn't work, when I clicked I see image on full screen; I need after save file in choosen place.

https://codesandbox.io/s/lucid-wave-pc69e?file=/src/App.js

Table column:

  {
    title: '3D model file',
    dataIndex: 'file',
    key: 'file',
    render: (file: string) => {
      if (file) {
        return <a href={file} onClick={(e) => e.stopPropagation()} download>Download</a>;
      }
    }
  },

What is the expectation exactly and what is the default browser settings for downloads? — Tim Strawbridge, Aug 03 '21 at 16:27
It is expected that after clicking on the link, a selection window will open - where to save the file with the option to save. — Dell Opp, Aug 04 '21 at 06:40
If the URL is not in the same origin as the page, many browsers will not download the file due to security concerns. — Heretic Monkey, Feb 20 '22 at 00:32

score 0 · Answer 1 · edited Feb 20 '22 at 00:28

You've got two options:

make the server tell the browser the file should be downloaded instead of viewed in the browser

To do this, you'd make the server include the HTTP header Content-Disposition: attachment
or, transfer the file data using JavaScript, and then save it to disk using JavaScript

Once your JavaScript has acquired the data, you'd create an <a download="DESIRED_FILENAME">, construct an ObjectURL using the data and stuff it into the href, then programmatically click the anchor

The first option is by far the easiest and yields excellent results across all browsers and platforms. The only major drawback is that it requires making code changes on the server. The change is typically small, although sometimes extant code is a hot mess and so even easy things are hard.

The second option works great for desktop browsers but yields absolutely terrible results for almost all mobile browsers. And it might require code changes to the server -- I don't know offhand whether the data can be transferred in its normal binary or whether it would need to be encoded for transport using something like base64. (I've only done this with base64-encoded data, because that's what my server supported.) I also suspect implementation could be a significant challenge for a developer who is unfamiliar with JavaScript and doesn't know how to do their own research.

It might be possible to avoid the UX drawbacks of the second option by using a WebWorker to supply the Content-Disposition header, but I've not tried it.

How to save a file from URL after click?

1 Answers1