From efc55c54eb5bcb201c76da921ce07eecffd2b4c3 Mon Sep 17 00:00:00 2001
From: Ksenia Tryapitsyna <k.tryapitsyna@gmail.com>
Date: Mon, 12 Aug 2024 00:48:49 +0300
Subject: [PATCH] feat: change effects preview icons the same as user loaded

---
 js/upload-form.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/upload-form.js b/js/upload-form.js
index 0a85d20..1a0e1c3 100644
--- a/js/upload-form.js
+++ b/js/upload-form.js
@@ -27,6 +27,7 @@ const scale = document.querySelector('.scale__control--value');
 const photoPreview = document.querySelector('.img-upload__preview');
 const submitButton = document.querySelector('.img-upload__submit');
 const photoPreviewImg = document.querySelector('.img-upload__preview img');
+const effectsPreviewIcons = document.querySelectorAll('.effects__preview');
 
 const isFieldFocused = () => document.activeElement === textCommentField || document.activeElement === hashtagField;
 
@@ -72,7 +73,13 @@ const setLoadedPhotoPreview = () => {
   const matches = FILE_TYPES.some((it) => fileName.endsWith(it));
 
   if (matches) {
-    photoPreviewImg.src = URL.createObjectURL(file);
+    const filePath = URL.createObjectURL(file);
+
+    photoPreviewImg.src = filePath;
+
+    effectsPreviewIcons.forEach((icon) => {
+      icon.style.backgroundImage = `url(${ filePath })`;
+    });
   }
 };