$(document).on("change", "#uploadButton", (e) => { let iterator = 0 if(e.currentTarget.files.length > 10) { MessageBox(tr("error"), tr("too_many_pictures"), [tr("ok")], [() => {Function.noop}]) return; } if(document.querySelector(".whiteBox").style.display == "block") { document.querySelector(".whiteBox").style.display = "none" document.querySelector(".insertThere").append(document.getElementById("fakeButton")); } let photos = new FormData() for(file of e.currentTarget.files) { photos.append("photo_"+iterator, file) iterator += 1 } photos.append("count", e.currentTarget.files.length) photos.append("hash", u("meta[name=csrf]").attr("value")) let xhr = new XMLHttpRequest() xhr.open("POST", "/photos/upload?album="+document.getElementById("album").value) xhr.onloadstart = () => { document.querySelector(".insertPhotos").insertAdjacentHTML("beforeend", ``) } xhr.onload = () => { let result = JSON.parse(xhr.responseText) if(result.success) { u("#loader").remove() let photosArr = result.photos for(photo of photosArr) { let table = document.querySelector(".insertPhotos") table.insertAdjacentHTML("beforeend", `
${tr("description")}:
${tr("delete")}
`) } document.getElementById("endUploading").style.display = "block" } else { u("#loader").remove() MessageBox(tr("error"), escapeHtml(result.flash.message) ?? tr("error_uploading_photo"), [tr("ok")], [() => {Function.noop}]) } } xhr.send(photos) }) $(document).on("click", "#endUploading", (e) => { let table = document.querySelector("#photos") let data = new FormData() let arr = new Map(); for(el of table.querySelectorAll("div#photo")) { arr.set(el.dataset.id, el.querySelector("textarea").value) } data.append("photos", JSON.stringify(Object.fromEntries(arr))) data.append("hash", u("meta[name=csrf]").attr("value")) let xhr = new XMLHttpRequest() // в самом вк на каждое изменение описания отправляется свой запрос, но тут мы экономим запросы xhr.open("POST", "/photos/upload?act=finish&album="+document.getElementById("album").value) xhr.onloadstart = () => { e.currentTarget.setAttribute("disabled", "disabled") } xhr.onerror = () => { MessageBox(tr("error"), tr("error_uploading_photo"), [tr("ok")], [() => {Function.noop}]) } xhr.onload = () => { let result = JSON.parse(xhr.responseText) if(!result.success) { MessageBox(tr("error"), escapeHtml(result.flash.message), [tr("ok")], [() => {Function.noop}]) } else { document.querySelector(".page_content .insertPhotos").innerHTML = "" document.getElementById("endUploading").style.display = "none" NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.location.assign(`/album${result.owner}_${result.album}`)}) document.querySelector(".whiteBox").style.display = "block" document.querySelector(".insertAgain").append(document.getElementById("fakeButton")) } e.currentTarget.removeAttribute("disabled") } xhr.send(data) }) $(document).on("click", "#deletePhoto", (e) => { let data = new FormData() data.append("hash", u("meta[name=csrf]").attr("value")) let xhr = new XMLHttpRequest() xhr.open("POST", `/photo${e.currentTarget.dataset.owner}_${e.currentTarget.dataset.id}/delete`) xhr.onloadstart = () => { e.currentTarget.closest("div#photo").classList.add("lagged") } xhr.onerror = () => { MessageBox(tr("error"), tr("unknown_error"), [tr("ok")], [() => {Function.noop}]) } xhr.onload = () => { u(e.currentTarget.closest("div#photo")).remove() if(document.querySelectorAll("div#photo").length < 1) { document.getElementById("endUploading").style.display = "none" document.querySelector(".whiteBox").style.display = "block" document.querySelector(".insertAgain").append(document.getElementById("fakeButton")) } } xhr.send(data) }) $(document).on("dragover drop", (e) => { e.preventDefault() return false; }) $(document).on("dragover", (e) => { e.preventDefault() document.querySelector("#fakeButton").classList.add("dragged") document.querySelector("#fakeButton").value = tr("drag_files_here") }) $(document).on("dragleave", (e) => { e.preventDefault() document.querySelector("#fakeButton").classList.remove("dragged") document.querySelector("#fakeButton").value = tr("upload_picts") }) $("#fakeButton").on("drop", (e) => { e.originalEvent.dataTransfer.dropEffect = 'move'; e.preventDefault() $(document).trigger("dragleave") let files = e.originalEvent.dataTransfer.files for(const file of files) { if(!file.type.startsWith('image/')) { MessageBox(tr("error"), tr("only_images_accepted", escapeHtml(file.name)), [tr("ok")], [() => {Function.noop}]) return; } if(file.size > 5 * 1024 * 1024) { MessageBox(tr("error"), tr("max_filesize", 5), [tr("ok")], [() => {Function.noop}]) return; } } document.getElementById("uploadButton").files = files u("#uploadButton").trigger("change") })