https://pizzakingniederrad.de/assets/js/script-28.js

1   function applyDndFile(el) {
2     const parent = document.querySelector(".file-dnd")
3     const beforeUploadEl = el.querySelector(".before-upload")
4     const afterUploadEl = el.querySelector(".after-upload")
5     const inputFile = el.querySelector("input[type=file]")
6     const imagePreview = el.querySelector(".after-upload img")
7     const clearBtn = el.querySelector(".after-upload .clear-btn")
8     const inputProps = parent.querySelector("[data-properties]");
9 
10     async function upload(name, uri, type) {
11       try {
12         const filename = name.split('.')[0]
13         let formData = new FormData(); 
14         formData.append("file", uri);
15         const response = await fetch(`${host}/upload?name=${filename}&dir=gift&type=${type}`, {
16           method: "POST", 
17           body: formData
18         })
19         if(response) {
20           const res = await response.json()
21           return res
22         }
23       } catch(err){
24         console.log(err)
25       }
26     }
27 
28     function showImagePreview(img) {
29       if(img){
30         const blobUrl = URL.createObjectURL(img)
31         imagePreview.src = blobUrl
32         afterUploadEl.style.display = "block"
33         beforeUploadEl.style.display = "none"
34       }
35     }
36 
37     beforeUploadEl.addEventListener("click", (e) => {
38       e.preventDefault()
39       inputFile.click()
40     })
41 
42     inputFile.addEventListener("change", async (e) => {
43       e.preventDefault()
44       showImagePreview(e.target.files[0])
45       var uploadData = await upload(e.target.files[0].name, e.target.files[0], e.target.files[0].type)
46       inputProps.value = uploadData?.url
47     })
48 
49     clearBtn.addEventListener("click", (e) => {
50       afterUploadEl.style.display = "none"
51       beforeUploadEl.style.display = "flex"
52       inputProps.value = ""
53     })
54 
55     beforeUploadEl.addEventListener("dragover", (e) => {
56       e.preventDefault()
57       el.classList.add("active")
58     })
59 
60     beforeUploadEl.addEventListener("dragleave", (e) => {
61       e.preventDefault()
62       el.classList.remove("active")
63     })
64 
65     beforeUploadEl.addEventListener("drop", async (e) => {
66       e.preventDefault()
67       el.classList.remove("active")
68       showImagePreview(e.dataTransfer.files[0])
69       var uploadData = await upload(e.dataTransfer.files[0].name, e.dataTransfer.files[0], e.dataTransfer.files[0].type)
70       console.log(uploadData)
71       inputProps.value = uploadData?.url
72     })
73   }
74 
75   applyDndFile(document.querySelector(".file-dnd"))
76 
77   $(document).ready(function(){
78     $(".variant-swatch").change(function(){
79       const v = $(this).val().toLowerCase()
80       const list = ["photo", "custom one side", "custom two side", "small", "big"]
81       if(list.some(item => v.includes(item))) return $(".file-dnd").show()
82       $(".file-dnd").hide()
83       $(".file-dnd").find("[data-properties]").val("")
84       $(".after-upload").hide()
85       $(".before-upload").css("display", "flex")
86     })
87   })
88