Use inline content disposition for common images and PDFs (#6924)

* Use inline content disposition for common images and PDFs

* Add double-click on widgets to download

server/storage/files/BaseStorage.ts

@@ -214,4 +214,29 @@ export default abstract class BaseStorage {
    * @returns A promise that resolves when the file is deleted
    */
   public abstract deleteFile(key: string): Promise<void>;
+
+  /**
+   * Returns the content disposition for a given content type.
+   *
+   * @param contentType The content type
+   * @returns The content disposition
+   */
+  public getContentDisposition(contentType?: string) {
+    if (contentType && this.safeInlineContentTypes.includes(contentType)) {
+      return "inline";
+    }
+
+    return "attachment";
+  }
+
+  /**
+   * A list of content types considered safe to display inline in the browser.
+   */
+  protected safeInlineContentTypes = [
+    "application/pdf",
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "image/webp",
+  ];
 }

server/storage/files/S3Storage.ts

@@ -38,7 +38,7 @@ export default class S3Storage extends BaseStorage {
         ["starts-with", "$Cache-Control", ""],
       ]),
       Fields: {
-        "Content-Disposition": "attachment",
+        "Content-Disposition": this.getContentDisposition(contentType),
         key,
         acl,
       },
@@ -114,7 +114,7 @@ export default class S3Storage extends BaseStorage {
         Key: key,
         ContentType: contentType,
         ContentLength: contentLength,
-        ContentDisposition: "attachment",
+        ContentDisposition: this.getContentDisposition(contentType),
         Body: body,
       })
       .promise();
@@ -145,7 +145,6 @@ export default class S3Storage extends BaseStorage {
       Bucket: env.AWS_S3_UPLOAD_BUCKET_NAME,
       Key: key,
       Expires: expiresIn,
-      ResponseContentDisposition: "attachment",
     };
 
     const url = isDocker