From a19d47741fadd1c992f06ceb0d399a839b53dcd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?=
 <4895034+ClementPasteau@users.noreply.github.com>
Date: Thu, 18 Jan 2024 17:41:57 +0100
Subject: [PATCH] Handle encoding filename when displaying it in the IDE

---
 newIDE/app/src/UI/CorsAwareImage.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/newIDE/app/src/UI/CorsAwareImage.js b/newIDE/app/src/UI/CorsAwareImage.js
index 342136deaac2..a020bc48208a 100644
--- a/newIDE/app/src/UI/CorsAwareImage.js
+++ b/newIDE/app/src/UI/CorsAwareImage.js
@@ -22,8 +22,27 @@ const addSearchParameterToUrl = (
     return url;
   }
 
-  const separator = url.indexOf('?') === -1 ? '?' : '&';
-  return url + separator + urlEncodedParameterName + '=' + urlEncodedValue;
+  const searchParams = url.indexOf('?') === -1 ? '' : url.split('?')[1];
+  const urlWithoutSearchParams = searchParams ? url.split('?')[0] : url;
+  const fileName = urlWithoutSearchParams.split('/').pop();
+  const urlWithoutSearchParamsAndFileName = urlWithoutSearchParams.replace(
+    '/' + fileName,
+    ''
+  );
+
+  const encodedFileName = encodeURIComponent(fileName);
+  const newSearchParam = urlEncodedParameterName + '=' + urlEncodedValue;
+  const searchParamsWithNewParam = searchParams
+    ? searchParams + '&' + newSearchParam
+    : newSearchParam;
+
+  return (
+    urlWithoutSearchParamsAndFileName +
+    '/' +
+    encodedFileName +
+    '?' +
+    searchParamsWithNewParam
+  );
 };
 
 /**