diff --git a/.air.toml b/.air.toml index 1a24899..fdc20dd 100644 --- a/.air.toml +++ b/.air.toml @@ -7,7 +7,7 @@ tmp_dir = "tmp" bin = "./tmp/main" cmd = "go build -o ./tmp/main cmd/server/main.go" delay = 1000 - exclude_dir = ["assets", "tmp", "vendor", "testdata"] + exclude_dir = ["assets", "tmp", "vendor", "testdata", "templates"] exclude_file = [] exclude_regex = ["_test.go"] exclude_unchanged = false diff --git a/app/app.go b/app/app.go index f672b1b..adeb7ae 100644 --- a/app/app.go +++ b/app/app.go @@ -65,10 +65,6 @@ func (a *App) loadRoutes() { } func uploadFile(w http.ResponseWriter, r *http.Request) { - if r.ContentLength < 10 << 20 { - http.Error(w, "Request size is too big", http.StatusRequestEntityTooLarge) - } - err := r.ParseMultipartForm(10 << 20) if err != nil { diff --git a/static/script.js b/static/script.js index e00f933..a914c6c 100644 --- a/static/script.js +++ b/static/script.js @@ -1,23 +1,60 @@ -function dropHandler(e) { - e.preventDefault(); +const uploadBox = document.getElementById('upload-box'); - if (e.dataTransfer.items) { - // Use DataTransferItemList interface to access the file(s) - [...e.dataTransfer.items].forEach((item, i) => { - // If dropped items aren't files, reject them - if (item.kind === "file") { - const file = item.getAsFile(); - console.log(`… file[${i}].name = ${file.name}`); - } - }); - } else { - // Use DataTransfer interface to access the file(s) - [...e.dataTransfer.files].forEach((file, i) => { - console.log(`… file[${i}].name = ${file.name}`); - }); - } +['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventType => { + uploadBox.addEventListener(eventType, preventDefaults, false) +}); + +['dragenter', 'dragover'].forEach(eventType => { + uploadBox.addEventListener(eventType, colorDZ, false) +}); + +['dragleave', 'drop'].forEach(eventType => { + uploadBox.addEventListener(eventType, clearDZ, false) +}); + +uploadBox.addEventListener('drop', handleFileDrop, false); + +function colorDZ(e) { + e.target.classList.add("active") } -function dragOverHandler(e) { - e.preventDefault(); +function clearDZ(e) { + e.target.classList.remove("active") +} + +document.getElementById("form").addEventListener("submit", handleFormSubmit) + +let allFiles = []; + + +function handleFileDrop(e) { + const dataTransfer = e.dataTransfer + const files = dataTransfer.files + allFiles = [...allFiles, ...files] + console.log(allFiles) +} + +function preventDefaults(e) { + e.preventDefault() + e.stopPropagation() +} + +function handleFormSubmit(e) { + preventDefaults(e) + sendFiles() + allFiles = [] +} + +async function sendFiles() { + const formData = new FormData(); + + formData.append("expration", "1000"); + allFiles.forEach((f) => formData.append("file", f)); + + const response = await fetch("/api/upload", { + method: "POST", + body: formData, + }) + + console.log(response); } diff --git a/static/style.css b/static/style.css index 6c78399..9e0aee5 100644 --- a/static/style.css +++ b/static/style.css @@ -9,6 +9,11 @@ align-items: center; padding: 100px; border: dashed; + transition: background-color 0.5s ease-in-out; +} + +#upload-box.active { + background-color: #eee; } /* #file-input { */ diff --git a/templates/index.html b/templates/index.html index fca8259..b8d048c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -9,17 +9,10 @@

Upload files

-
-
+ +

- +