HTML5 download attribute doesn't work, Forcing file rename on download

Question

I am trying for weeks to change the name of the file being downloaded. But still no luck. Instead of file name to be Chrysanthemum.jpg, it becomes the hash of the file, i.e. 241693260.jpg

In my back-end I am using Node.js and Express.js to handle file upload/download. I am hashing the file name and attributes to make sure files are not getting overwritten.

Here is the HTML code:

<a class="btn btn-info" href="http://localhost:3000/getAttachments?name=Chrysanthemum.jpg&amp;type=image%2Fjpeg&amp;size=879394&amp;lastModified=1247549551674&amp;extension=jpg" download="Chrysanthemum.jpg" target="_blank">Download File</a>

Here is my back-end:

app.use('/uploads', express.static(__dirname + "/uploads"));

app.get("/getAttachments", function (req, res) {
    try {
        var fileToBeSent = hashCode(req.query.name + req.query.type + req.query.size + req.query.lastModified + req.query.extension);
        fileToBeSent += req.query.extension  ? '.' + req.query.extension : '';

    // res.sendFile("./uploads/" + fileToBeSent, {
    //     root: __dirname,
    //     "Content-Disposition": '"attachment; filename="' + (req.query.extension  ? '.' + req.query.extension : '') + '"',
    //     "Content-Type": "application/octet-stream"
    // });

        res.redirect("/uploads/" + fileToBeSent);
    } catch (err) {
        console.log("an attempt to GET a file that doesn't exist.");
    }
});

So as I am renaming the file name in my back-end, I am trying to rename file back to it's original name using HTML5 but I am not being successful.

UPDATE: Using the express's sendFile result in the same issue.

UPDATE: My server is uses cross-origin

What browser are you using when attempting to test this. According to [caniuse.com](http://caniuse.com/#feat=download) IE and Safari still do not support this attribute... — War10ck, Jul 13 '15 at 17:28
@War10ck I think it is not a browser issue, it is a problem of HTML5's download attribute. — Node.JS, Jul 13 '15 at 17:31
There are a few restrictions on this attribute's use according to MDN: _1. If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute._, _2. If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute._, _3. This attribute is only honored for links to resources with the same-origin._. Are any of these the case? — War10ck, Jul 13 '15 at 17:31
you can fetch the file contents with ajax, and populate the href with a window.URL or dataURL. that way, the server's header config doesn't matter, and you get consistent cross-browser behavior. — dandavis, Jul 13 '15 at 18:26

score 2 · Answer 1 · edited May 23 '17 at 11:44

2

I met this problem a year ago and spent a lot of time before found that this is potential problem of Chrome Prove for version 35 and later Avoiding repeating names you can use static id with increment. Hope this answer will be helpful

edited May 23 '17 at 11:44

Community

1
1

answered Jul 13 '15 at 18:10

xtraicecat

21
6

score 1 · Accepted Answer · answered Jul 13 '15 at 18:23

All you should have to do is to provide the entire file name that you want the file to be downloaded as. In your Content-Disposition it doesn't look like you were providing the entire filename.

res.sendFile(__dirname + "/uploads/" + fileToBeSent, {
        headers: {
            'Content-Disposition': 'attachment; filename="' + req.query.name + '"'
        }
    });

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

Re-renaming the file using Node JS, not HTML5 is your best bet.

Renaming files using node.js

edited May 23 '17 at 11:59

Community

1
1

answered Jul 13 '15 at 17:46

Will

546
5
16

Then how can I guarantee that two different files are not being renamed to the same name before getting downloaded and they will get overwritten by each other. This solution is problematic. – Node.JS Jul 13 '15 at 17:50
Would renaming the file to "Chrysanthemum_Hash" solve your problem, where _Hash is the existent hash? – Will Jul 13 '15 at 18:08

HTML5 download attribute doesn't work, Forcing file rename on download

3 Answers3