var isW8 = false; let uploadFormData = []; let xTimer; window.noSubmit = false; function previewImage(input, i) { try { const oFReader = new FileReader(); oFReader.readAsDataURL(input); oFReader.onload = function (oFREvent) { const img = oFREvent.target.result; const uploadingImages = document.querySelector('#uploading-images'); const newDiv = document.createElement('div'); newDiv.dataset.id = i; newDiv.className = 'col-xl-3 col-md-4 border p-3'; newDiv.innerHTML = `
`; uploadingImages.appendChild(newDiv); }; if (xTimer !== undefined) { clearTimeout(xTimer); } xTimer = setTimeout(() => { document.querySelectorAll('.img-preview').forEach(el => { el.style.height = `${el.offsetWidth}px`; }); window.dispatchEvent(new Event('resize')); }, 300); } catch (e) { console.error('Error in previewImage:', e); } } document.addEventListener('DOMContentLoaded', () => { const uploadingImages = document.querySelector('#uploading-images'); const uploadDragDrop = document.querySelector('#upload-drag-drop'); const uploadImageSelect = document.querySelector('#upload-image-select'); const indexImage = document.querySelector('#index-image'); document.querySelector('.product-form')?.addEventListener('submit', function(e) { e.preventDefault(); if (isW8 || window.noSubmit) { return false; } const formData = new FormData(this); let j = 0; for (const f of uploadFormData) { if (uploadFormData.length == j) { break; } j++; try { if (f.size === undefined) { continue; } } catch (e) { console.log(e.message); continue; } console.log('x',f); formData.append('image[]', f); } const submitButtons = document.querySelectorAll("[type='submit']"); submitButtons.forEach(button => { button.disabled = true; button.classList.add('w8'); }); isW8 = true; const url = this.getAttribute('action'); axios({ method: 'post', url: url, data: formData, headers: {'Content-Type': 'multipart/form-data'} }).then(res => { submitButtons.forEach(button => { button.disabled = false; button.classList.remove('w8'); }); isW8 = false; if (res.data.OK) { if (res.data.url !== undefined) { window.location.href = res.data.url; } else { if (res.data.link !== undefined) { this.setAttribute('action', res.data.link); } window.redirect = currentEditLink + res.data.data.slug; this.setAttribute('action', currentUpdateLink + res.data.data.slug) $toast.info(res.data.message); window.store.dispatch('updateQuantities',res.data.data.qidz); } } }).catch(error => { document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid')); submitButtons.forEach(button => { button.disabled = false; button.classList.remove('w8'); }); isW8 = false; for (let i in error.response.data.errors) { document.getElementById(i)?.classList.add('is-invalid'); for (const err of error.response.data.errors[i]) { $toast.error(err); // console.log(err); } } $toast.error('Error:' +error.response.status); }); }); uploadingImages?.addEventListener('dblclick', (e) => { const imageIndex = e.target.closest('.image-index'); if (imageIndex) { document.querySelectorAll('.indexed').forEach(el => el.classList.remove('indexed')); imageIndex.classList.add('indexed'); indexImage.value = imageIndex.dataset.key; } }); document.querySelectorAll('.img-preview').forEach(el => { el.style.height = `${el.offsetWidth}px`; }); uploadDragDrop?.addEventListener('click', () => { uploadImageSelect.click(); }); uploadImageSelect?.addEventListener('change', () => { for (const file of uploadImageSelect.files) { console.log(file); uploadFormData.push(file); previewImage(file, uploadFormData.length); } }); document.addEventListener('click', (e) => { if (e.target.closest('.upload-remove-image')) { const parentCol = e.target.closest('.col-md-4'); const dataId = parentCol.dataset.id; delete uploadFormData[dataId - 1]; parentCol.style.transition = 'opacity 400ms'; parentCol.style.opacity = '0'; setTimeout(() => parentCol.remove(), 400); } }); uploadDragDrop?.addEventListener('dragover', (e) => { e.preventDefault(); e.stopPropagation(); uploadDragDrop.classList.add('active'); }); ['dragenter', 'dragstart'].forEach(eventName => { uploadDragDrop?.addEventListener(eventName, (e) => { e.preventDefault(); e.stopPropagation(); uploadDragDrop.classList.add('active'); }); }); ['dragleave', 'dragend'].forEach(eventName => { uploadDragDrop?.addEventListener(eventName, (e) => { e.preventDefault(); e.stopPropagation(); uploadDragDrop.classList.remove('active'); }); }); uploadDragDrop?.addEventListener('drop', (e) => { uploadDragDrop.classList.remove('active'); if (e.dataTransfer && e.dataTransfer.files.length) { e.preventDefault(); e.stopPropagation(); for (const f of e.dataTransfer.files) { previewImage(f, uploadFormData.length); uploadFormData.push(f); } } }); });