From b090932320816116230ce7385fb860348c0bd1d8 Mon Sep 17 00:00:00 2001 From: JannikStreek Date: Fri, 20 Mar 2026 18:20:20 +0100 Subject: [PATCH] fix image preview when uploading (#694) --- .../live/idea_live/form_component.html.heex | 6 ++++++ .../set_response_header_content_security_policy.ex | 3 ++- priv/gettext/de/LC_MESSAGES/default.po | 10 +++++----- priv/gettext/default.pot | 10 +++++----- priv/gettext/en/LC_MESSAGES/default.po | 10 +++++----- priv/gettext/it/LC_MESSAGES/default.po | 10 +++++----- .../response_header_content_security_policy_test.exs | 2 +- 7 files changed, 29 insertions(+), 22 deletions(-) diff --git a/lib/mindwendel_web/live/idea_live/form_component.html.heex b/lib/mindwendel_web/live/idea_live/form_component.html.heex index 8ae382bf..74d701b2 100644 --- a/lib/mindwendel_web/live/idea_live/form_component.html.heex +++ b/lib/mindwendel_web/live/idea_live/form_component.html.heex @@ -18,6 +18,12 @@ <% end %> <%= for entry <- @uploads.attachment.entries do %> +
+ <%= if Attachments.simplified_attached_file_type(entry.client_type) == "image" do %> + <.live_img_preview entry={entry} width="60" height="60" /> + <% end %> + {entry.client_name} +
{error_to_string(err)}
diff --git a/lib/mindwendel_web/plugs/set_response_header_content_security_policy.ex b/lib/mindwendel_web/plugs/set_response_header_content_security_policy.ex index 65732d28..c40ab29a 100644 --- a/lib/mindwendel_web/plugs/set_response_header_content_security_policy.ex +++ b/lib/mindwendel_web/plugs/set_response_header_content_security_policy.ex @@ -36,7 +36,8 @@ defmodule Mindwendel.Plugs.SetResponseHeaderContentSecurityPolicy do "frame-src 'self' ;", # We add csp sources https: to allow the browser to load the link preview image extracted from the idea body - "img-src 'self' data: https: ;", + # We add blob: to allow live_img_preview to display client-side upload previews + "img-src 'self' data: https: blob: ;", # We need to add csp 'unsafe-eval', otherwise we get an error in development # because webpack js bundle uses `eval` for hot reloading. diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po index ab9a14ef..bbe25ca5 100644 --- a/priv/gettext/de/LC_MESSAGES/default.po +++ b/priv/gettext/de/LC_MESSAGES/default.po @@ -49,8 +49,8 @@ msgstr "Achtung: Hiermit löschst du das Brainstorming und alle dazugehörigen I #: lib/mindwendel_web/live/comment_live/form_component.html.heex:34 #: lib/mindwendel_web/live/comment_live/form_component.html.heex:36 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:55 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:57 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:61 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:63 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:16 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:18 #, elixir-autogen, elixir-format @@ -118,14 +118,14 @@ msgid "Proceed to your brainstorming" msgstr "Weiter zu deinem Brainstorming" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:39 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:60 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:66 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:21 #, elixir-autogen, elixir-format msgid "Save" msgstr "Speichern" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:38 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:59 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:65 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:20 #, elixir-autogen, elixir-format msgid "Saving..." @@ -469,7 +469,7 @@ msgid "Additional Attachment" msgstr "Zusätzlicher Anhang" #: lib/mindwendel_web/live/idea_live/card_component.html.heex:83 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:43 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:49 #: lib/mindwendel_web/live/idea_live/show_component.html.heex:27 #, elixir-autogen, elixir-format msgid "No filename" diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot index eeb790c3..19d7a605 100644 --- a/priv/gettext/default.pot +++ b/priv/gettext/default.pot @@ -48,8 +48,8 @@ msgstr "" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:34 #: lib/mindwendel_web/live/comment_live/form_component.html.heex:36 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:55 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:57 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:61 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:63 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:16 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:18 #, elixir-autogen, elixir-format @@ -117,14 +117,14 @@ msgid "Proceed to your brainstorming" msgstr "" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:39 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:60 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:66 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:21 #, elixir-autogen, elixir-format msgid "Save" msgstr "" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:38 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:59 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:65 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:20 #, elixir-autogen, elixir-format msgid "Saving..." @@ -468,7 +468,7 @@ msgid "Additional Attachment" msgstr "" #: lib/mindwendel_web/live/idea_live/card_component.html.heex:83 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:43 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:49 #: lib/mindwendel_web/live/idea_live/show_component.html.heex:27 #, elixir-autogen, elixir-format msgid "No filename" diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po index 1c8eb6dd..a248aad7 100644 --- a/priv/gettext/en/LC_MESSAGES/default.po +++ b/priv/gettext/en/LC_MESSAGES/default.po @@ -49,8 +49,8 @@ msgstr "" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:34 #: lib/mindwendel_web/live/comment_live/form_component.html.heex:36 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:55 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:57 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:61 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:63 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:16 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:18 #, elixir-autogen, elixir-format @@ -118,14 +118,14 @@ msgid "Proceed to your brainstorming" msgstr "" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:39 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:60 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:66 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:21 #, elixir-autogen, elixir-format msgid "Save" msgstr "" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:38 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:59 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:65 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:20 #, elixir-autogen, elixir-format msgid "Saving..." @@ -469,7 +469,7 @@ msgid "Additional Attachment" msgstr "" #: lib/mindwendel_web/live/idea_live/card_component.html.heex:83 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:43 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:49 #: lib/mindwendel_web/live/idea_live/show_component.html.heex:27 #, elixir-autogen, elixir-format msgid "No filename" diff --git a/priv/gettext/it/LC_MESSAGES/default.po b/priv/gettext/it/LC_MESSAGES/default.po index ba13a74e..a51dc81e 100644 --- a/priv/gettext/it/LC_MESSAGES/default.po +++ b/priv/gettext/it/LC_MESSAGES/default.po @@ -49,8 +49,8 @@ msgstr "Attenzione: Questo cancellerà il brainstorming con tutte le idee associ #: lib/mindwendel_web/live/comment_live/form_component.html.heex:34 #: lib/mindwendel_web/live/comment_live/form_component.html.heex:36 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:55 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:57 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:61 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:63 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:16 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:18 #, elixir-autogen, elixir-format @@ -118,14 +118,14 @@ msgid "Proceed to your brainstorming" msgstr "Procedi al tuo brainstorming" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:39 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:60 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:66 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:21 #, elixir-autogen, elixir-format msgid "Save" msgstr "Salva" #: lib/mindwendel_web/live/comment_live/form_component.html.heex:38 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:59 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:65 #: lib/mindwendel_web/live/lane_live/form_component.html.heex:20 #, elixir-autogen, elixir-format msgid "Saving..." @@ -469,7 +469,7 @@ msgid "Additional Attachment" msgstr "Allegato aggiuntivo" #: lib/mindwendel_web/live/idea_live/card_component.html.heex:83 -#: lib/mindwendel_web/live/idea_live/form_component.html.heex:43 +#: lib/mindwendel_web/live/idea_live/form_component.html.heex:49 #: lib/mindwendel_web/live/idea_live/show_component.html.heex:27 #, elixir-autogen, elixir-format msgid "No filename" diff --git a/test/mindwendel_web/live/response_header_content_security_policy_test.exs b/test/mindwendel_web/live/response_header_content_security_policy_test.exs index 0553fb9f..407c7b4d 100644 --- a/test/mindwendel_web/live/response_header_content_security_policy_test.exs +++ b/test/mindwendel_web/live/response_header_content_security_policy_test.exs @@ -60,7 +60,7 @@ defmodule MindwendelWeb.ResponseHeaderContentSecurityPolicyTest do assert conn_response |> get_resp_header("content-security-policy") - |> List.first() =~ ~r/(img-src)\s+('self' data: https:) ;/ + |> List.first() =~ ~r/(img-src)\s+('self' data: https: blob:) ;/ end end