forked from mirror/oddmu
114 lines
4.8 KiB
HTML
114 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>Upload File</title>
|
||
<style>
|
||
html { max-width: 70ch; padding: 2ch; margin: auto; color: #111; background-color: #ffe }
|
||
body { hyphens: auto }
|
||
form, textarea { width: 100% }
|
||
label { display: inline-block; width: 20ch }
|
||
input [type=text] { width: 30ch }
|
||
.last { max-width: 20% }
|
||
</style>
|
||
<script type="text/javascript">
|
||
var uploadFiles = {
|
||
init: function() {
|
||
let e = document.getElementById('upload');
|
||
if (e) {
|
||
e.addEventListener('paste', uploadFiles.pasteHandler);
|
||
e.addEventListener('dragover', e => e.preventDefault());
|
||
e.addEventListener('drop', uploadFiles.dropHandler);
|
||
}
|
||
},
|
||
pasteHandler: function(e) {
|
||
uploadFiles.handle(e.clipboardData);
|
||
},
|
||
dropHandler: function(e) {
|
||
e.preventDefault();
|
||
uploadFiles.handle(e.dataTransfer);
|
||
},
|
||
handle: function(dataTransfer) {
|
||
let files = [];
|
||
if (dataTransfer.items) {
|
||
[...dataTransfer.items].forEach((item, i) => {
|
||
if (item.kind === "file")
|
||
files.push(item.getAsFile());
|
||
});
|
||
} else {
|
||
[...dataTransfer.files].forEach((file, i) => {
|
||
files.push(file);
|
||
});
|
||
}
|
||
if (files.length)
|
||
uploadFiles.post(files)
|
||
},
|
||
post: function(files) {
|
||
let action = document.getElementById('upload').getAttribute('action');
|
||
var fd = new FormData();
|
||
fd.append("filename", document.getElementById('filename').value);
|
||
fd.append("maxwidth", document.getElementById('maxwidth').value);
|
||
fd.append("quality", document.getElementById('quality').value);
|
||
for (var i = 0; i < files.length; i++) {
|
||
fd.append("file", files[i]);
|
||
}
|
||
try {
|
||
fetch(action, { method: "POST", body: fd })
|
||
.then(response => {
|
||
if (response.ok) {
|
||
window.location = response.url;
|
||
} else {
|
||
alert(response.text);
|
||
}})
|
||
} catch (e) {
|
||
alert(e);
|
||
}
|
||
},
|
||
};
|
||
window.addEventListener('load', uploadFiles.init);
|
||
</script>
|
||
</head>
|
||
<body lang="en">
|
||
<h1>Upload Files</h1>
|
||
{{if .Uploads}}
|
||
<p>Previous uploads:
|
||
<p>{{range .Uploads}}
|
||
{{if .Image}}<img class="upload" src="/view/{{$.Dir}}{{.Path}}">{{else}}<a class="upload" href="/view/{{$.Dir}}{{.Path}}">{{end}}{{end}}
|
||
<form id="add" action="/append/{{.Dir}}{{.Path}}" method="POST">
|
||
<input type="hidden" name="body" value="{{range .Uploads}}{{if .Image}}!{{end}}[{{.Name}}]({{.Path}})
|
||
{{end}}">
|
||
<input type="hidden" name="pagename" value="{{.Name}}">
|
||
<p>Append it to <a href="/view/{{.Dir}}{{.Path}}">{{.Title}}</a>?
|
||
<input type="submit" value="Add">
|
||
</form>
|
||
{{end}}
|
||
<form id="upload" action="/drop/{{.Dir}}" method="POST" enctype="multipart/form-data">
|
||
<p>When uploading a picture from a phone, its filename is going to be something like IMG_1234.JPG.
|
||
Please provide your own filename. End the base name with "-1" to auto-increment.
|
||
Use <tt>.jpg</tt>, <tt>.png</tt> or <tt>.webp</tt> as the extension if you want to resize the picture.
|
||
<p><label for="filename">Filename:</label>
|
||
<input id="filename" name="filename" value="{{.FileName}}" type="text" placeholder="image-1.jpg" autofocus required>
|
||
<p>If the uploaded file is a picture from a phone, it is going to be too big for your site.
|
||
Sadly, resizing only works when uploading <tt>.jpeg</tt>, <tt>.webp</tt>, <tt>.heic</tt> and <tt>.png</tt> files.
|
||
Feel free to specify a max width of 1200 pixels, for example.
|
||
<p><label for="maxwidth">Max width:</label>
|
||
<input id="maxwidth" name="maxwidth" value="{{.MaxWidth}}" type="number" min="10" placeholder="1200">
|
||
<p>If the filename you provided above ends in <tt>.jpg</tt> or <tt>.webp</tt>, you can specify a quality.
|
||
Typically, a quality of 60 is not too bad and a quality of 90 is more than enough.
|
||
<p><label for="quality">Quality:</label>
|
||
<input id="quality" name="quality" value="{{.Quality}}" type="number" min="1" max="99" placeholder="75">
|
||
<p>Finally, pick the files or photos to upload.
|
||
Picture metadata is only removed if the pictures gets resized.
|
||
Providing a new max width is recommended for all pictures.
|
||
If you’re uploading multiple files, they are all renamed using the filename above and therefore they all get the same extension so they must be of the same type.
|
||
<p><label for="file">Files to upload:</label>
|
||
<input type="file" name="file" required multiple>
|
||
<p><input type="submit" value="Save">
|
||
<a href="/view/{{.Dir}}{{.Path}}"><button type="button">Cancel</button></a>
|
||
<p>You can also paste images or drag and drop files.
|
||
</form>
|
||
</body>
|
||
</html>
|