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
?
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.
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:
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>
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With