Фото на память (тестовая)

index.html

@@ -35,7 +35,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
-              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required>
+              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" accept="image/png, image/jpeg" required>
               <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
             </fieldset>
 

js/avatar.js

@@ -0,0 +1,18 @@
+const FILE_TYPES = ['gif', 'jpg', 'jpeg', 'png'];
+
+const avatarElement = document.querySelector('.img-upload__preview img');
+const avatarPreviews = document.querySelectorAll('.effects__preview');
+const uploadFileInputElement = document.querySelector('#upload-file');
+
+uploadFileInputElement.addEventListener('change', () => {
+  const file = uploadFileInputElement.files[0];
+  //получаем имя файла через name и приводим к одному виду
+  const fileName = file.name.toLowerCase();
+  //Делаем проверку совпадает ли имя нашего файла с допустимыми
+  const matches = FILE_TYPES.some((item) => fileName.endsWith(item));
+
+  if(matches) {
+    avatarElement.src = URL.createObjectURL(file);
+    avatarPreviews.forEach((el) => el.style.setProperty('background-image', `url(${URL.createObjectURL(file)})`));
+  }
+});

js/main.js

@@ -5,6 +5,7 @@ import {createFragment} from './thumbnails.js';
 import {renderModal} from './modal.js';
 import {showDataError} from './notifications.js';
 import {onChangeFilterPosts} from './filter.js';
+import './avatar.js';
 
 const ERROR_DISPLAY_TIME = 5000;
 const templateDataErrorElement = document.querySelector('#data-error').content.querySelector('.data-error');