How to change downloading name in flask?

In some cases the filename is still not visible. To have it for sure you should set "x-filename" header and to expose this header.

from flask import send_file
response = send_file(absolute_image_path, mimetype='image/jpeg', attachment_filename=name, as_attachment=True)
response.headers["x-filename"] = name
response.headers["Access-Control-Expose-Headers"] = 'x-filename'
return response

Update: Prior to Flask 2.0, download_name was called attachment_filename.

You need to set a Content-Disposition: attachment; filename=.... HTTP header for the browser to use the correct filename.

You can have send_file() set this header for you by setting the as_attachment=True argument. The filename is then taken from the file object you passed in. Use the download_name argument to explicitly set a different filename:

return send_file(os.path.join(filepath, filename), as_attachment=True)

From the flask.send_file documentation:

• as_attachment – Indicate to a browser that it should offer to save the file instead of displaying it.
• download_name – The default name browsers will use when saving the file. Defaults to the passed file name.

_{Prior to Flask 2.0, download_name was called attachment_filename.}

You may want to use the flask.send_from_directory() function instead. That function first ensures that the filename exists (raising a NotFound if not), and ensures that the filename doesn't contain any .. relative elements that might be used to 'escape' the directory. Use this for all filenames taken from untrusted sources:

return send_from_directory(filepath, filename, as_attachment=True)

When using Flask-CORS, setting the as_attachment and download_name may not work by default. You need to allow the Content-Disposition header with expose_headers, otherwise it will not be sent to the client.

from flask import Flask, send_file
from flask_cors import CORS

app = Flask(__name__)
CORS(app, expose_headers=["Content-Disposition"])

return send_file(
    "/path/to/file.txt",
    as_attachment=True,
    download_name="custom_name.txt"
)

If you want to use JavaScript to download and save the file, one option is to use axios to download the file, and FileSaver.js to save it. FileSaver will use the Content-Disposition header set by send_file as the filename by default.

let response = await axios.get(downloadUrl, downloadConfig);
FileSaver.saveAs(response.data);