arian/navidrome-uploader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

drag & drop functionality

Browse Source
This commit is contained in:
Arian Nasr
2026-03-05 13:57:37 -05:00
parent fa0226e319
commit a503d1e788
1 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+38 -3
View File
@@ -3,20 +3,55 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://s3.2ari.ca/navidrome-upload/dropzone.min.js"></script>
<link rel="stylesheet" href="https://s3.2ari.ca/navidrome-upload/dropzone.min.css" type="text/css" />
<title>Upload Music</title> <title>Upload Music</title>
<style> <style>
body { body {
background-color: #2B2726; background-color: #2B2726;
color: #FFFFFF; color: #FFFFFF;
} }
.dropzone {
border: 2px dashed #666;
border-radius: 5px;
background: #3B3736;
padding: 20px;
min-height: 200px;
}
.dropzone .dz-message {
color: #FFFFFF;
font-size: 18px;
}
</style> </style>
</head> </head>
<body> <body>
<button onclick="window.location.href='/outpost.goauthentik.io/sign_out'">Logout</button> <button onclick="window.location.href='/outpost.goauthentik.io/sign_out'">Logout</button>
<h1>Upload new File</h1> <h1>Upload new File</h1>
<form method=post enctype=multipart/form-data> <form action="/" method="post" enctype="multipart/form-data" class="dropzone" id="my-dropzone">
<input type=file name=file multiple> <div class="dz-message">
<input type=submit value=Upload> Drop files here or click to upload
</div>
</form> </form>
<script>
Dropzone.options.myDropzone = {
paramName: "file",
maxFilesize: 500, // MB
uploadMultiple: true,
parallelUploads: 5,
acceptedFiles: "audio/*",
dictDefaultMessage: "Drop files here or click to upload",
init: function() {
this.on("success", function(file, response) {
console.log("Upload successful:", file.name);
});
this.on("error", function(file, errorMessage) {
console.error("Upload failed:", errorMessage);
});
}
};
</script>
</body> </body>
</html> </html>