mans/goshare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make html work with multiple files

Browse Source
This commit is contained in:
Mans Ziesel 2024-01-26 14:45:26 +01:00
parent 312086b696
commit 51623d6f7b
5 changed files with 65 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.air.toml
View File

@ -7,7 +7,7 @@ tmp_dir = "tmp"
bin = "./tmp/main" bin = "./tmp/main"
cmd = "go build -o ./tmp/main cmd/server/main.go" cmd = "go build -o ./tmp/main cmd/server/main.go"
delay = 1000 delay = 1000
exclude_dir = ["assets", "tmp", "vendor", "testdata"] exclude_dir = ["assets", "tmp", "vendor", "testdata", "templates"]
exclude_file = [] exclude_file = []
exclude_regex = ["_test.go"] exclude_regex = ["_test.go"]
exclude_unchanged = false exclude_unchanged = false

4
app/app.go
View File

@ -65,10 +65,6 @@ func (a *App) loadRoutes() {
} }
func uploadFile(w http.ResponseWriter, r *http.Request) { 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) err := r.ParseMultipartForm(10 << 20)
if err != nil { if err != nil {

75
static/script.js
View File

@ -1,23 +1,60 @@
function dropHandler(e) { const uploadBox = document.getElementById('upload-box');
e.preventDefault();
if (e.dataTransfer.items) { ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventType => {
// Use DataTransferItemList interface to access the file(s) uploadBox.addEventListener(eventType, preventDefaults, false)
[...e.dataTransfer.items].forEach((item, i) => { });
// If dropped items aren't files, reject them
if (item.kind === "file") { ['dragenter', 'dragover'].forEach(eventType => {
const file = item.getAsFile(); uploadBox.addEventListener(eventType, colorDZ, false)
console.log(`… file[${i}].name = ${file.name}`); });
}
}); ['dragleave', 'drop'].forEach(eventType => {
} else { uploadBox.addEventListener(eventType, clearDZ, false)
// Use DataTransfer interface to access the file(s) });
[...e.dataTransfer.files].forEach((file, i) => {
console.log(`… file[${i}].name = ${file.name}`); uploadBox.addEventListener('drop', handleFileDrop, false);
});
} function colorDZ(e) {
e.target.classList.add("active")
} }
function dragOverHandler(e) { function clearDZ(e) {
e.preventDefault(); 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);
} }

5
static/style.css
View File

@ -9,6 +9,11 @@
align-items: center; align-items: center;
padding: 100px; padding: 100px;
border: dashed; border: dashed;
transition: background-color 0.5s ease-in-out;
}
#upload-box.active {
background-color: #eee;
} }
/* #file-input { */ /* #file-input { */

13
templates/index.html
View File

@ -9,17 +9,10 @@
<body> <body>
<div class="container"> <div class="container">
<h1>Upload files</h1> <h1>Upload files</h1>
<form <form id="form">
action="/api/upload" <div id="upload-box" >
method="post"
enctype="multipart/form-data"
>
<div id="upload-box"
ondrop="dropHandler(event)"
ondragover="dragOverHandler(event)"
>
<label for="file-input">Choose file to upload</label><br/> <label for="file-input">Choose file to upload</label><br/>
<input id="file-input" type="file" name="file"> <input id="file-input" type="file" multiple onchange="handleUpload(this.files)">
</div> </div>
<label for="retention-select">Retention period</label> <label for="retention-select">Retention period</label>