diff --git a/index.html b/index.html index 221d67f..38aa5c3 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

Загрузка фотограф
- +
diff --git a/js/form.js b/js/form.js index db377e9..469cf5c 100644 --- a/js/form.js +++ b/js/form.js @@ -7,7 +7,6 @@ import{createEffectSlider, onEffectsFilterChange, resetFilters} from './image-ef const MAX_HASHTAG_LENGTH = 20; const MAX_COMMENT_LENGTH = 140; const MAX_HASHTAG_COUNT = 5; -const VALID_IMAGE_TYPES = ['image/gif', 'image/jpeg', 'image/png']; const HASHTAG_RULE = /^#[А-яа-яA-za-zёЁ]{1,19}$/; const ErrorMessage = { BAD_HASHTAG: 'Уникальные хештеги, каждый не более 20 символов, должны быть разделены пробелом', @@ -17,6 +16,8 @@ const ErrorMessage = { const uploadButton = document.querySelector('#upload-file'); const form = document.querySelector('.img-upload__form'); const overlay = document.querySelector('.img-upload__overlay'); +const mainImage = overlay.querySelector('.img-upload__preview img'); +const effectsPreviews = overlay.querySelectorAll('.effects__item .effects__preview'); const cancelButton = document.querySelector('#upload-cancel'); const hashtags = document.querySelector('.text__hashtags'); const comments = document.querySelector('.text__description'); @@ -63,12 +64,6 @@ const onCancelButtonClick = () => { closeOverlay(); }; -const isPicture = () => { - const fileType = uploadButton.files[0].type; - - return VALID_IMAGE_TYPES.some((type) => type === fileType); -}; - const blockSubmitButton = () => { submitButton.disabled = true; submitButton.textContent = SubmitButtonText.SENDING; @@ -118,8 +113,16 @@ function closeOverlay () { form.reset(); } +const uploadFile = () => { + const file = uploadButton.files[0]; + mainImage.src = mainImage.src = URL.createObjectURL(file); + effectsPreviews.forEach((picture) => { + picture.style.backgroundImage = `url('${mainImage.src}')`; + }); +}; + const onUploadButtonChange = () => { - if(!isPicture()) {return;} + uploadFile(); overlay.classList.remove('hidden'); document.body.classList.add('modal-open'); form.addEventListener('submit', onFormSubmit);