Django Media-File Download-Link opening preview

Question

I have a Django project in which I use wagtail. Now on one page, the user can upload an image and download it later. For the download link, I used following html:

  <a href="{{file.document.url}}" class="text-indigo-600 hover:text-indigo-900" download target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download text-black" viewBox="0 0 16 16"> 
      <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/> 
      <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/> 
    </svg>
  </a>

On my local device when running with python manage.py runserver, this code works fine and every image gets downloaded. On my Environment, it doesn't work that well. Every image and pdf is opened in a preview first, from where the user has to manually save the image.

What did I do wrong?

Answer 1

You'll need to configure S3 to return a Content-Disposition: attachment header on the files it serves, to tell the browser to force a download instead of rendering files in-browser. Based on the django-storages docs (assuming that's the library you're using) and the boto3 docs linked from there, I believe adding the following to your project settings should set this for newly-uploaded files (unfortunately it won't affect ones that are already uploaded):

AWS_S3_OBJECT_PARAMETERS = {"ContentDisposition": "attachment"}