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"
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

4
app/app.go
View File

@ -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 {

75
static/script.js
View File

@ -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);
}

5
static/style.css
View File

@ -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 { */

13
templates/index.html
View File

@ -9,17 +9,10 @@
<body>
<div class="container">
<h1>Upload files</h1>
<form
action="/api/upload"
method="post"
enctype="multipart/form-data"
>
<div id="upload-box"
ondrop="dropHandler(event)"
ondragover="dragOverHandler(event)"
>
<form id="form">
<div id="upload-box" >
<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>
<label for="retention-select">Retention period</label>