forked from mirror/oddmu
112 lines
4.4 KiB
HTML
112 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="viewport" content="width=device-width">
|
|
<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("name", document.getElementById('name').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 ne .Last ""}}
|
|
<p>Previous upload: <a href="/view/{{.Dir}}{{.Last}}">{{.Last}}</a>
|
|
{{if .Image}}
|
|
<p><img class="last" src="/view/{{.Dir}}{{.Last}}"><br>
|
|
<tt>Link: </tt>
|
|
{{else}}
|
|
<p>Link: <tt>[text]({{.Last}})</tt>
|
|
{{end}}
|
|
{{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> or <tt>.png</tt> as the extension if you want to resize the picture.
|
|
<p><label for="name">Filename:</label>
|
|
<input id="name" name="name" value="{{.Name}}" 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>, 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>To delete a file, upload an empty file.
|
|
<p><label for="file">Files to upload:</label>
|
|
<input type="file" name="file" required multiple>
|
|
<p><input type="submit" value="Save">
|
|
<a href="/view/index"><button type="button">Cancel</button></a>
|
|
<p>You can also paste images or drag and drop files.
|
|
</form>
|
|
</body>
|
|
</html>
|