6

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?

1
  • 3
    This is an issue with react. Download attribute apparently doesn't work with cross origin links.
    – DroidNoob
    Feb 16, 2017 at 5:48

1 Answer 1

10

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.