Добавил превью загружаемой картинки

js/add-affects/index.js

@@ -7,7 +7,6 @@ const STEP_SCALE = 25;
 const MIN_SCALE = 25;
 const MAX_SCALE = 100;
 
-
 const onIncreaseScale = () => {
   const scaleValue = parseInt(scaleControlValue.value, 10);
   const scaleCount = scaleValue + STEP_SCALE;

js/upload-photo/index.js

@@ -1,8 +1,10 @@
 import {toggleClass} from '../util';
 import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables';
 import {inputTextHashtag, commentForm} from '../validation-form';
+const effectsPreview = document.querySelectorAll('.effects__preview ');
 
 const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
+const uploaPreviewImage = document.querySelector('.img-upload__preview img');
 
 const onCloseChangePhoto = () => {
   toggleClass(imgUpoadOverlay, false);
@@ -18,8 +20,33 @@ function onCloseChangePhotoEsc(evt){
   }
 }
 
-const onOpenChangePhoto = () => {
+const selectImage = (evt) => {
+  const files = evt.target.files;
+  const countFiles = files.length;
+  const selectedFile = files[0];
+  const reader = new FileReader();
+
+  if (!countFiles) {
+    return;
+  }
+
+  if (!/^image/.test(selectedFile.type)) {
+    return;
+  }
+
+  reader.readAsDataURL(selectedFile);
+
+  reader.addEventListener('load', (e) => {
+    uploaPreviewImage.src = e.target.result;
+    effectsPreview.forEach((element) => {
+      element.style.backgroundImage = `url(${e.target.result})`;
+    });
+  });
+};
+
+const onOpenChangePhoto = (evt) => {
   toggleClass(imgUpoadOverlay);
+  selectImage(evt);
   effectLevelSliderParrent.classList.add('hidden');
   document.addEventListener('keydown', onCloseChangePhotoEsc);
 };