From ee465f8dfbb970d22c902668a0bc8d47a5647938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4?= <v1ad@inbox.ru>
Date: Sun, 19 Jan 2025 18:10:55 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=B4?=
 =?UTF-8?q?=D0=B7=2013?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/{photo-modal.js => image-modal.js} |  0
 js/image-upload.js                    | 18 ++++++++++++++++++
 js/main.js                            |  4 +++-
 js/thumbnails.js                      |  2 +-
 4 files changed, 22 insertions(+), 2 deletions(-)
 rename js/{photo-modal.js => image-modal.js} (100%)
 create mode 100644 js/image-upload.js

diff --git a/js/photo-modal.js b/js/image-modal.js
similarity index 100%
rename from js/photo-modal.js
rename to js/image-modal.js
diff --git a/js/image-upload.js b/js/image-upload.js
new file mode 100644
index 0000000..c7f65a3
--- /dev/null
+++ b/js/image-upload.js
@@ -0,0 +1,18 @@
+const FILE_TYPES = ['jpg', 'jpeg', 'png'];
+
+const fileChooser = document.querySelector('.img-upload__input');
+const preview = document.querySelector('.img-upload__preview img');
+
+const setupUploadEventListener = () => {
+  fileChooser.addEventListener('change', () => {
+    const file = fileChooser.files[0];
+    const fileName = file.name.toLowerCase();
+
+    const matches = FILE_TYPES.some((it) => fileName.endsWith(it));
+
+    if (matches) {
+      preview.src = URL.createObjectURL(file);
+    }
+  });
+};
+export { setupUploadEventListener };
diff --git a/js/main.js b/js/main.js
index 440be92..44194c5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,7 @@
 import { getData } from './api.js';
 import { renderGallery, setupFilterListeners } from './thumbnails.js';
-import { setupPictureEventListeners } from './photo-modal.js';
+import { setupPictureEventListeners } from './image-modal.js';
+import { setupUploadEventListener } from './image-upload.js';
 import { setupFormEventListeners } from './form.js';
 import { showGetErrorAlert } from './util.js';
 
@@ -17,4 +18,5 @@ async function initializeGallery() {
 }
 
 initializeGallery();
+setupUploadEventListener();
 setupFormEventListeners();
diff --git a/js/thumbnails.js b/js/thumbnails.js
index b60a646..7e96578 100644
--- a/js/thumbnails.js
+++ b/js/thumbnails.js
@@ -1,4 +1,4 @@
-import { setupPictureEventListeners } from './photo-modal.js';
+import { setupPictureEventListeners } from './image-modal.js';
 import { debounce } from './util.js';
 
 const MAX_RANDOM_QTY = 10;