From f146ce14af82057a9d05c6bad7f8e480039f1fa2 Mon Sep 17 00:00:00 2001
From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com>
Date: Sun, 31 Mar 2024 19:15:28 +0300
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=B1=D1=80=D0=B0=D0=BD=D0=BD?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BB=D0=B5=D0=BC=20=D1=84=D0=BE=D1=82=D0=BE=D0=B3?=
 =?UTF-8?q?=D1=80=D0=B0=D1=84=D0=B8=D1=8F=20=D0=B4=D0=BE=D0=BB=D0=B6=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B6=D0=B0=D1=82=D1=8C?=
 =?UTF-8?q?=D1=81=D1=8F=20=D0=B2=20=D0=BF=D0=BE=D0=BB=D0=B5=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8=20=D1=84=D0=B0=D0=B9=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D0=B5=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8=20=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=B0=D0=B7=D1=8B=D0=B2=D0=B0=D1=82=D1=8C=D1=81?=
 =?UTF-8?q?=D1=8F=20=D0=B2=20=D0=BE=D0=BA=D0=BD=D0=B5.=20=D0=98=D0=B7?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=80=D0=B0=D0=B7?=
 =?UTF-8?q?=D0=BC=D0=B5=D1=80=D0=BE=D0=B2=20=D0=B8=20=D0=BF=D1=80=D0=B8?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=84=D0=B8=D0=BB?=
 =?UTF-8?q?=D1=8C=D1=82=D1=80=D0=B0=20=D0=B4=D0=BE=D0=BB=D0=B6=D0=BD=D1=8B?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D0=BD=D1=8F=D1=82=D1=8C=D1=81?=
 =?UTF-8?q?=D1=8F=20=D0=B4=D0=BB=D1=8F=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83?=
 =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=BD=D0=BE=D0=B9=20=D1=84=D0=BE=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=B8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/components/form.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/js/components/form.js b/js/components/form.js
index 8616339..00a60f7 100644
--- a/js/components/form.js
+++ b/js/components/form.js
@@ -10,6 +10,7 @@ import { resetEffects } from './photo-filters.js';
 const MAX_HASHTAGS = 5;
 const MAX_SYMBOLS = 20;
 const characterComment = 140;
+const FILE_TYPES = ['jpg', 'jpeg', 'png'];
 
 const imgUpload = document.querySelector('.img-upload');
 const form = document.querySelector('.img-upload__form');
@@ -19,6 +20,8 @@ const imgUploadCancel = imgUpload.querySelector('.img-upload__cancel');
 const inputHashtag = imgUpload.querySelector('.text__hashtags');
 const textDescription = imgUpload.querySelector('.text__description');
 const submitButton = form.querySelector('.img-upload__submit');
+const photoPreview = document.querySelector('.img-upload__preview img');
+const effectsPreviews = document.querySelectorAll('.effects__preview');
 
 let errorMessage = '';
 
@@ -126,7 +129,6 @@ const onSelectPhoto = () => {
   document.addEventListener('keydown', onEscapeKeydown);
 };
 
-
 const blockSubmitButton = () => {
   submitButton.disabled = true;
   submitButton.textContent = 'Отправляю...';
@@ -137,6 +139,23 @@ const unblockSubmitButton = () => {
   submitButton.textContent = 'Опубликовать';
 };
 
+const isValidType = (file) => {
+  const fileName = file.name.toLowerCase();
+  return FILE_TYPES.some((it) => fileName.endsWith(it));
+};
+
+const onFileInputChange = () => {
+  const file = uploadFile.files[0];
+
+  if (file && isValidType(file)) {
+    photoPreview.src = URL.createObjectURL(file);
+    effectsPreviews.forEach((preview) => {
+      preview.style.backgroundImage = `url('${photoPreview.src}')`;
+    });
+  }
+  onSelectPhoto();
+};
+
 const setOnFormSubmit = (cb) => {
   form.addEventListener('submit', async (evt) => {
     evt.preventDefault();
@@ -150,7 +169,7 @@ const setOnFormSubmit = (cb) => {
   });
 };
 
-uploadFile.addEventListener('change', onSelectPhoto);
+uploadFile.addEventListener('change', onFileInputChange);
 inputHashtag.addEventListener('input', onHashtagInput);
 
 export {setOnFormSubmit, hideModal};