Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Download attribute in anchor tag in React component [duplicate]

Tags:

html

reactjs

I store files in the cloud so during the upload process they get prefixes that make their names unique. For example, if I upload a file named test.txt, during upload it gets saved as 7ea205f01ae5_test.txt. It's important to note that I do capture and save the original file name.

In my React component, I'm trying to make it user friendly by using the download attribute so that when the user clicks to download the file, it'll be downloaded as test.txt but it's not working. The file still gets downloaded as 7ea205f01ae5_test.txt.

This is what my React code looks like

<a href={fileUrl} download={origName}>{fileName}</a>

The object that my component looks like this:

{
  id: 123,
  fileName: "7ea205f01ae5_test.txt",
  origName: "test.txt",
  fileUrl: "https://myBlobStorageUrl.com/container/7ea205f01ae5_test.txt?signature=123abcxyz"
}

Please note that the fileUrl contains a security access signature which allows user to access the file. Without it, user won't be given access to the file.

What do I need to do so that the file will be downloaded as test.txt?

like image 654
Sam Avatar asked Feb 16 '17 05:02

Sam


People also ask

What does the 'download' attribute of the HTML anchor tag do?

In that article Adnane mentions the "download" attribute of the HTML Anchor tag. I'd never heard of this feature before; but, apparently, the "download" attribute tells the browser to download the HREF location using the given filename instead of navigating the browser directly to the HREF location.

How to download a file with ReactJS?

To download a file with React.js, we can add the download attribute to an anchor element. We just add the download prop to do the download. If we don’t want to use an anchor element, we can also use the file-saver package to download our file. Then we can call the saveAs function from the package by writing:

How to download a href file from anchor link?

There's not really too much to this "download" attribute. You simply provide a filename as the attribute value. And then, when the user clicks on the anchor link, they will download the HREF location and save the resultant payload using the provided filename: <a href="./generate-zip?id=4" download="assets.zip" >Download</a>

What is a download attribute in HTML?

Definition and Usage The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink. The optional value of the download attribute will be the new name of the file after it is downloaded.


1 Answers

As mentioned by DroidNoob this isn't particular to React. Any cross origin links will download with the server given file name and extension, however the download attribute will work for same origin.

// Domain: example.org

// Downloads as 281c2df7dbce9284dca6059db944f8df.png
<a download="foo.txt" target="_blank" href="https://www.gravatar.com/avatar/281c2df7dbce9284dca6059db944f8df?s=48&d=identicon&r=PG">download</a>

// Downloads as foo.txt
<a download="foo.txt" target="_blank" href="http://example.org/assets/avatar.png">download</a>

Depending on your backend, you could possible set up a route that generically maps the original names to the actual files names. So the frontend links to your backend mapper, and it in turns grabs the file.

like image 175
Chris Avatar answered Sep 28 '22 06:09

Chris