Add clipboard uploading to the static post form

frontend/sass/global/_img.scss

@@ -74,20 +74,37 @@ table#pages td {
 	float: right;
 }
 
-div#new-upload-box {
+div#upload-box {
 	background: #505050;
 	color: #b0b0b0;
-	a {
+	a.browse-text {
 		text-align: center;
 		padding: 20px 40px;
 		display: block;
 	}
-	.upload-preview {
+	.upload-x, .upload-filename {
-		max-width: 50px;
+		position: relative;
-		max-height: 50px;
+		bottom: 12px;
+		display: inline-block;
+		margin-left: 8px;
+		margin-right: 8px;
 	}
 }
 
+.upload-preview {
+	max-width: 50px;
+	max-height: 50px;
+}
+
+.placeholder-thumb {
+	width: 50px;
+	height: 50px;
+	background: #333;
+	border: 1px black solid;
+	margin: 4px;
+	display: inline-block;
+}
+
 .reply {
 	margin-bottom: 4px;
 	padding: 4px 8px 4px 8px;

frontend/ts/dom/uploaddata.ts

@@ -2,18 +2,12 @@ import $ from "jquery";
 
 import { alertLightbox } from "./lightbox";
 
-const uploadReader = new FileReader();
-uploadReader.onload = onReaderLoad;
-uploadReader.onerror = onReaderError;
-const noop = () => {
-	return;
-};
 
-export function updateUploadImage($elem: JQuery<HTMLElement>, onLoad = noop) {
+export function updateUploadImage($elem: JQuery<HTMLElement>, onLoad = () => {}) {
 	if($elem.length === 0) return;
 	$elem[0].onchange = function() {
 		const img = new Image();
-		img.src = URL.createObjectURL((this as any).files[0]);
+		img.src = URL.createObjectURL((this as HTMLInputElement).files[0]);
 		img.onload = onLoad;
 	};
 }
@@ -34,38 +28,69 @@ function dragAndDrop(e:JQuery.DragEnterEvent|JQuery.DragOverEvent|JQuery.DropEve
 		e.stopPropagation();
 	} else {
 		$browseBtn[0].files = e.originalEvent.dataTransfer.files;
-		uploadReader.readAsDataURL($browseBtn[0].files[0]);
+		addFileUpload($browseBtn[0].files[0]);
 	}
 }
 
-function onReaderLoad(e:ProgressEvent<FileReader>) {
+function onReaderLoad(name:string, e:ProgressEvent<FileReader>) {
 	const base64Str = e.target.result.toString();
 	const isImage = base64Str.slice(5, 10) === "image";
+	const extPos = name.lastIndexOf(".");
+	const namePart = (extPos > 0)?name.substring(0, extPos):name;
+	const extPart = (extPos <= 0)?"":name.substring(extPos);
+	const maxLen = 20;
+	const nameShortened = namePart.substring(0, maxLen) + ((namePart.length > maxLen)?"…":"") + extPart;
+	const $container = ($("div#upload-box").children(".upload-preview-container").length > 0)?
+		$(".upload-preview-container"):
+		$("<div/>").addClass("upload-preview-container").appendTo("div#upload-box");
 
-	if(isImage) {
+	$container.empty().append(
-		$("<img/>").attr({
+		$("<a/>").attr({
+			"class": "upload-x",
+			"href": "javascript:;"
+		}).text("X").on("click", (e:JQuery.ClickEvent) => {
+			const $target = $(e.target);
+			const $browseBtn = $target.parents<HTMLInputElement>("#upload-box").siblings("input[name=imagefile]");
+			$browseBtn.each((_, el) => el.value = null);
+			$target.parents(".upload-preview-container").remove();
+		}),
+
+		isImage?$("<img/>").attr({
+			"class": "upload-preview",
 			"src": base64Str,
-		}).addClass("upload-preview").appendTo("div#new-upload-box");
+		}):$("<div/>").addClass("placeholder-thumb"),
-	}
+
+		$("<span/>").addClass("upload-filename").attr({title: name}).text(nameShortened)
+	);
 }
 
-function onReaderError(e:ProgressEvent<FileReader>) {
+function addFileUpload(file:File) {
-	alertLightbox(`Unable to load file: ${e.target.error.message}`);
+	const uploadReader = new FileReader();
-}
+	uploadReader.onload = (e => onReaderLoad(file.name, e));
-
+	uploadReader.onerror = (e) => alertLightbox(`Unable to load file: ${e.target.error.message}`);
-function onBrowseBtnChange(e:JQuery.ChangeEvent) {
+	uploadReader.readAsDataURL(file);
-	uploadReader.readAsDataURL(e.target.files[0]);
 }
 
 $(() => {
 	const $browseBtn = $<HTMLInputElement>("input[name=imagefile]").hide();
 	if($browseBtn.length !== 1) return;
-	$browseBtn.on("change", onBrowseBtnChange);
+	$browseBtn.on("change", e => addFileUpload(e.target.files[0]));
 
-	$("<div/>").attr("id", "new-upload-box").append(
+	$("<div/>").attr("id", "upload-box").append(
-		$("<a/>")
+		$("<a/>").addClass("browse-text")
 			.attr("href", "javascript:;")
 			.text("Select/drop/paste upload here")
 			.on("click", () => $browseBtn.trigger("click"))
 	).on("dragenter dragover drop", dragAndDrop).insertBefore($browseBtn);
+
+	$("div#postbox-area form").on("paste", e => {
+		const clipboardData = (e.originalEvent as ClipboardEvent).clipboardData;
+		if(clipboardData.items.length < 1 || clipboardData.items[0].kind !== "file") {
+			console.log("No files in clipboard");
+			return;
+		}
+		const clipboardFile = clipboardData.items[0].getAsFile();
+		addFileUpload(clipboardFile);
+		$browseBtn[0].files = clipboardData.files;
+	});
 });

html/css/global.css

@@ -74,20 +74,37 @@ table#pages td {
   float: right;
 }
 
-div#new-upload-box {
+div#upload-box {
   background: #505050;
   color: #b0b0b0;
 }
-div#new-upload-box a {
+div#upload-box a.browse-text {
   text-align: center;
   padding: 20px 40px;
   display: block;
 }
-div#new-upload-box .upload-preview {
+div#upload-box .upload-x, div#upload-box .upload-filename {
+  position: relative;
+  bottom: 12px;
+  display: inline-block;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.upload-preview {
   max-width: 50px;
   max-height: 50px;
 }
 
+.placeholder-thumb {
+  width: 50px;
+  height: 50px;
+  background: #333;
+  border: 1px black solid;
+  margin: 4px;
+  display: inline-block;
+}
+
 .reply {
   margin-bottom: 4px;
   padding: 4px 8px 4px 8px;