electricdusk/rushlink
3
3
Fork 3
Code Issues 21 Pull Requests 2 Releases Activity

web: Implement drag-and-drop upload

Browse Source
This commit is contained in:
Daan Sprenkels 2019-12-16 16:21:41 +05:30
parent 087b9920e6
commit c46a26f8a2
7 changed files with 102 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/main.css Normal file
View File

@ -0,0 +1,18 @@
body {
font-family: monospace;
}
#dropZone {
background-color: rgba(0, 0, 0.2, 0.75);
color: white;
font-size: 60px;
font-weight: bold;
height: 100%;
left: 0;
padding: 1em;
position: fixed;
top: 0;
transition: visibility 175ms, opacity 175ms;
width: 100%;
z-index: 999;
}

48
assets/js/dragdrop.js vendored Normal file
View File

@ -0,0 +1,48 @@
"use strict";
window.addEventListener('DOMContentLoaded', (event) => {
// The implementation of this drag-drop logic is largely based on the
// answer described in <https://stackoverflow.com/a/28226022/5207081>.
//
// The gist is this: every time the drag enters a new DOM object, it will
// fire a new 'dragenter' event on that element. That is a pain, because
// we do not know which element will be the last to receive a dragleave
// event, in case the user aborts the process.
//
// Therefore, we use an Ugly Hack™. There will be an element with id
// 'dropZone', which blocks the complete page. When a 'dragenter' event
// is received on any DOM element, we will unhide this modal page-blocker.
// This will guarantee us that the next 'enter' event will be received on
// this page-block element. This event we shall ignore.
//
// Then, whenever the user stop their drag action, we will receive the
// 'dragleave' on the '#dropZone' element. Now we know when exactly
// a drag action is cancelled (and we will hide the modal element
// accordingly).
let dropZone = document.getElementById("dropZone");
window.addEventListener("dragenter", (event) => {
// User starts a drag action
dropZone.style.visibility = "";
dropZone.style.opacity = 1;
});
dropZone.addEventListener("drop", (event) => {
// User drops a file
event.preventDefault();
document.getElementById("fileUploadField").files = event.dataTransfer.files;
document.getElementById("fileUploadForm").submit();
});
dropZone.addEventListener("dragleave", (event) => {
// User cancels drag action
dropZone.style.visibility = "hidden";
dropZone.style.opacity = 0;
});
window.addEventListener("dragover", (event) => {
// Prevent the browser from opening the file, because of a drop event
// on the window. (<https://stackoverflow.com/a/6756680/5207081>)
event.preventDefault();
});
});

4
assets/templates/html/base.html.tmpl
View File

@ -2,7 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>{{block "title" .}}rushlink{{end}}</title>{{block "head-append" .}}{{end}} <title>{{block "title" .}}rushlink{{end}}</title>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
{{block "head-append" .}}{{end -}}
</head> </head>
<body> <body>
{{block "body" .}} {{block "body" .}}

17
assets/templates/html/index.html.tmpl
View File

@ -1,4 +1,9 @@
{{define "head-append"}}
<script type="text/javascript" src="/js/dragdrop.js" defer></script>
{{end}}
{{define "body"}} {{define "body"}}
<div style="visibility:hidden; opacity:0" id="dropZone">File incoming! :D</div>
<h1>#RU paste-dump</h1> <h1>#RU paste-dump</h1>
Based on https://0x0.st/, this site allows you to easily upload files and shorten URLs using Based on https://0x0.st/, this site allows you to easily upload files and shorten URLs using
@ -6,17 +11,17 @@ the command line.
<h2>Web-API</h2> <h2>Web-API</h2>
<section> <section>
<form action="/" method="post" enctype="multipart/form-data"> <form id="fileUploadForm" action="/" method="post" enctype="multipart/form-data">
<label class="formLabel" for="fileUploadField">Upload a file:</label> <label class="formLabel" for="fileUploadField">Upload a file:</label>
<input class="formMain" id="fileUploadField" name="file" type="file" /> <input id="fileUploadField" class="formMain" name="file" type="file" />
<input class="formSubmit" id="fileUploadSubmit" type="submit" value="upload!" /> <input id="fileUploadField" class="formSubmit" type="submit" value="upload!" />
</form> </form>
</section> </section>
<section> <section>
<form action="/" method="post" enctype="multipart/form-data"> <form id="shortenURLForm" action="/" method="post" enctype="multipart/form-data">
<label class="formLabel" for="shortenURLField">Upload a URL:</label> <label class="formLabel" for="shortenURLField">Upload a URL:</label>
<input class="formMain" id="shortenURLField" name="shorten" type="url" /> <input id="shortenURLField" class="formMain" name="shorten" type="url" />
<input class="formSubmit" id="shortenURLSubmit" type="submit" value="shorten!" /> <input id="shortenURLSubmit" class="formSubmit" type="submit" value="shorten!" />
</form> </form>
</section> </section>

4
handlers.go
View File

@ -28,6 +28,10 @@ const (
const cookieDeleteToken = "owner_token" const cookieDeleteToken = "owner_token"
func (rl *rushlink) staticGetHandler(w http.ResponseWriter, r *http.Request) {
rl.renderStatic(w, r, mux.Vars(r)["path"])
}
func (rl *rushlink) indexGetHandler(w http.ResponseWriter, r *http.Request) { func (rl *rushlink) indexGetHandler(w http.ResponseWriter, r *http.Request) {
rl.render(w, r, "index", map[string]interface{}{}) rl.render(w, r, "index", map[string]interface{}{})
} }

4
router.go
View File

@ -14,6 +14,7 @@ import (
"github.com/pkg/errors" "github.com/pkg/errors"
) )
const staticFilenameExpr = "[A-Za-z0-9-_.]+"
const urlKeyExpr = "{key:[A-Za-z0-9-_]{4,}}" const urlKeyExpr = "{key:[A-Za-z0-9-_]{4,}}"
const urlKeyWithExtExpr = urlKeyExpr + "{ext:\\.[A-Za-z0-9-_]+}" const urlKeyWithExtExpr = urlKeyExpr + "{ext:\\.[A-Za-z0-9-_]+}"
@ -101,6 +102,9 @@ func StartMainServer(addr string, db *db.Database, fs *db.FileStore, rawhost *st
router.Use(rl.recoveryMiddleware) router.Use(rl.recoveryMiddleware)
router.Use(rl.metricsMiddleware) router.Use(rl.metricsMiddleware)
router.HandleFunc("/uploads/{id:[A-Za-z0-9-_]+}/{filename:.+}", rl.uploadFileGetHandler).Methods("GET", "HEAD") router.HandleFunc("/uploads/{id:[A-Za-z0-9-_]+}/{filename:.+}", rl.uploadFileGetHandler).Methods("GET", "HEAD")
router.HandleFunc("/{path:img/"+staticFilenameExpr+"}", rl.staticGetHandler).Methods("GET", "HEAD")
router.HandleFunc("/{path:css/"+staticFilenameExpr+"}", rl.staticGetHandler).Methods("GET", "HEAD")
router.HandleFunc("/{path:js/"+staticFilenameExpr+"}", rl.staticGetHandler).Methods("GET", "HEAD")
router.HandleFunc("/", rl.indexGetHandler).Methods("GET", "HEAD") router.HandleFunc("/", rl.indexGetHandler).Methods("GET", "HEAD")
router.HandleFunc("/", rl.newPasteHandler).Methods("POST") router.HandleFunc("/", rl.newPasteHandler).Methods("POST")
router.HandleFunc("/"+urlKeyExpr, rl.viewPasteHandler).Methods("GET", "HEAD") router.HandleFunc("/"+urlKeyExpr, rl.viewPasteHandler).Methods("GET", "HEAD")

14
views.go
View File

@ -17,6 +17,7 @@ import (
"strconv" "strconv"
"strings" "strings"
text "text/template" text "text/template"
"time"
"gitea.hashru.nl/dsprenkels/rushlink/internal/db" "gitea.hashru.nl/dsprenkels/rushlink/internal/db"
@ -88,6 +89,19 @@ func mapExtend(m map[string]interface{}, key string, value interface{}) {
m[key] = value m[key] = value
} }
func (rl *rushlink) renderStatic(w http.ResponseWriter, r *http.Request, path string) {
var modTime time.Time
if info, err := AssetInfo(path); err != nil {
modTime = info.ModTime()
}
contents, err := Asset(path)
if err != nil {
rl.renderError(w, r, http.StatusNotFound, err.Error())
return
}
http.ServeContent(w, r, path, modTime, bytes.NewReader(contents))
}
func (rl *rushlink) render(w http.ResponseWriter, r *http.Request, tmplName string, data map[string]interface{}) { func (rl *rushlink) render(w http.ResponseWriter, r *http.Request, tmplName string, data map[string]interface{}) {
contentType, err := resolveResponseContentType(r, []string{"text/plain", "text/html"}) contentType, err := resolveResponseContentType(r, []string{"text/plain", "text/html"})
if err != nil { if err != nil {