Default setup for media in Django-Cookie cutter and relative media urls

Question

I've used Django-Cookiecutter's default setup for Heroku, with Whitenoise serving static files and S3 serving media files.

However, I want to use 'media' to store certain, heavier content files (pdfs) that are going to change over time, not just user file uploads, and a change shouldn't require a collectstatic. (Eventually I'll create an authoring tool to upload files to S3, but for the moment I'm just manually placing some files like pdfs in correct S3 bucket subdirectories.)

The standard setup for Django-Cookiecutter is to set the MEDIA_URL to the full S3 address, like https://my-bucket.s3.amazonaws.com/media/some.pdf ... but I want to access these files in my templates using relative path like /media/some.pdf in the same way I can browse directly to static content via /static.

I want a relative URL like /media/some.pdf because I'm using the download attribute on the href tag, which should download the file when clicked, but with a fully qualified url pointing at amazonaws.com, the browser will ignore the download attribute and just load the file in the browser.

Is there a straightforward way to config Django (running on Heroku using Whitenoise for static and S3 for media) to return the file from S3 when accessed via /media?

Answer 1

So you want to the browser to open a "download file" pop-up when the user click on the link? The download attribute isn't working because it only works for same-origin, according to the specs:

This attribute only works for same-origin URLs.

The specs also mentions that Content-Disposition header overrides it, so the header is a more robust way of doing this.

You can set-up S3 to do that by setting the Content-Disposition header properly. Here is a running example below:

<a href="https://s3.eu-west-2.amazonaws.com/test-cookie-cutter/media/cookiecutter-attachment.pdf">
  Document with header set
</a>
<br/>
<a href="https://s3.eu-west-2.amazonaws.com/test-cookie-cutter/media/cookiecutter.pdf">
  Document without header
</a>

When I uploaded the one with header, I've added the metadata header in the AWS console:

Content-Disposition: attachment; filename="cookiecutter.pdf" 

You cannot host your media files on Heroku, they will be lost at the next deploy due to their ephemeral filesystem, so having them on the server itself isn't an option.