From 213f90a0b1c409011f9f36c42cfcbd87f217f97a Mon Sep 17 00:00:00 2001
From: "mark.dev" <mark@mark.dev>
Date: Wed, 27 Jul 2022 18:19:58 -0700
Subject: [PATCH] Copy drag/drop from blog edit to project (#6)

---
 src/templates/src/project_edit.html | 243 +++++++++++++++++++++++++++-
 src/website/projects.go             |   9 ++
 2 files changed, 251 insertions(+), 1 deletion(-)

diff --git a/src/templates/src/project_edit.html b/src/templates/src/project_edit.html
index 3fb5d1c..12f0639 100644
--- a/src/templates/src/project_edit.html
+++ b/src/templates/src/project_edit.html
@@ -5,6 +5,7 @@
 	<script src="{{ static "js/tabs.js" }}"></script>
 	<script src="{{ static "js/image_selector.js" }}"></script>
 	<script src="{{ static "js/templates.js" }}"></script>
+	<script src="{{ static "js/base64.js" }}"></script>
 	
 	<style>
 		#desc-preview:empty::after {
@@ -12,6 +13,10 @@
 			color: var(--dimmer-color);
 			font-style: italic;
 		}
+
+		#description.drop {
+			box-shadow: inset 0px 0px 5px yellow;
+		}
 	</style>
 {{ end }}
 
@@ -156,6 +161,17 @@
 						<textarea id="description" class="w-100 h5 minh-5 mono lh-copy" name="description">
 							{{- .ProjectSettings.Description -}}
 						</textarea>
+						<div class="flex justify-end items-center mt2">
+							<div class="upload_bar flex-grow-1">
+								<div class="instructions">
+									Upload files by dragging & dropping, pasting, or <label class="pointer link" for="file_input">selecting</label> them.
+								</div>
+								<div class="progress flex">
+									<div class="progress_text mr3"></div>
+									<div class="progress_bar flex-grow-1 flex-shrink-1 pa1"><div class=""></div></div>
+								</div>
+							</div>
+						</div>
 						<div class="b mt3 mb2">Preview:</div>
 						<div id="desc-preview" class="w-100"></div>
 					</div>
@@ -196,6 +212,7 @@
 				</div>
 			</div>
 		</form>
+		<input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(mark): copied NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}}
 	</div>
 	<script>
 	let csrf = JSON.parse({{ csrftokenjs .Session }});
@@ -366,6 +383,230 @@
 		logoMaxFileSize,
 		document.querySelector(".dark_logo")
 	);
-	
+
+	//////////////////
+	// Asset upload //
+	//////////////////
+
+	const maxFileSize = {{ .MaxFileSize }};
+	const uploadUrl = {{ .UploadUrl }};
+	const submitButton = document.querySelector("#project_form [data-name=Description] input[type=submit]");
+	const submitText = submitButton.value;
+	const fileInput = document.querySelector('#file_input');
+	const uploadBar = document.querySelector('.upload_bar');
+	const uploadProgress = document.querySelector('.upload_bar .progress');
+	const uploadProgressText = document.querySelector('.upload_bar .progress_text');
+	const uploadProgressBar = document.querySelector('.upload_bar .progress_bar');
+	const uploadProgressBarFill = document.querySelector('.upload_bar .progress_bar > div');
+	let fileCounter = 0;
+	let enterCounter = 0;
+	let uploadQueue = [];
+	let currentUpload = null;
+	let currentXhr = null;
+	let currentBatchSize = 0;
+	let currentBatchDone = 0;
+
+	fileInput.addEventListener("change", function(ev) {
+		if (fileInput.files.length > 0) {
+			importUserFiles(fileInput.files);
+		}
+	});
+
+	description.addEventListener("dragover", function(ev) {
+		let effect = "none";
+		for (let i = 0; i < ev.dataTransfer.items.length; ++i) {
+			if (ev.dataTransfer.items[i].kind.toLowerCase() == "file") {
+				effect = "copy";
+				break;
+			}
+		}
+		ev.dataTransfer.dropEffect = effect;
+		ev.preventDefault();
+	});
+
+	description.addEventListener("dragenter", function(ev) {
+		enterCounter++;
+		let droppable = false;
+		for (let i = 0; i < ev.dataTransfer.items.length; ++i) {
+			if (ev.dataTransfer.items[i].kind.toLowerCase() == "file") {
+				droppable = true;
+				break;
+			}
+		}
+		if (droppable) {
+			description.classList.add("drop");
+		}
+	});
+
+	description.addEventListener("dragleave", function(ev) {
+		enterCounter--;
+		if (enterCounter == 0) {
+			description.classList.remove("drop");
+		}
+	});
+
+	function makeUploadString(uploadNumber, filename) {
+		return `Uploading file #${uploadNumber}: \`${filename}\`...`;
+	}
+
+	description.addEventListener("drop", function(ev) {
+		enterCounter = 0;
+		description.classList.remove("drop");
+
+		if (ev.dataTransfer && ev.dataTransfer.files) {
+			importUserFiles(ev.dataTransfer.files)
+		}
+
+		ev.preventDefault();
+	});
+
+	description.addEventListener("paste", function(ev) {
+		const files = ev.clipboardData?.files ?? [];
+		if (files.length > 0) {
+			importUserFiles(files)
+		}
+	});
+
+	function importUserFiles(files) {
+		let items = [];
+		for (let i = 0; i < files.length; ++i) {
+			let f = files[i];
+			if (f.size < maxFileSize) {
+				items.push({ file: f, error: null });
+			} else {
+				items.push({ file: null, error: `\`${f.name}\` is too big! Max size is ${maxFileSize} but the file is ${f.size}.` });
+			}
+		}
+
+		let cursorStart = description.selectionStart;
+		let cursorEnd = description.selectionEnd;
+
+		let toInsert = "";
+		let linesToCursor = description.value.substr(0, cursorStart).split("\n");
+		let cursorLine = linesToCursor[linesToCursor.length-1].trim();
+		if (cursorLine.length > 0) {
+			toInsert = "\n\n";
+		}
+		for (let i = 0; i < items.length; ++i) {
+			if (items[i].file) {
+				fileCounter++;
+				toInsert += makeUploadString(fileCounter, items[i].file.name) + "\n\n";
+				queueUpload(fileCounter, items[i].file);
+			} else {
+				toInsert += `${items[i].error}\n\n`;
+			}
+		}
+
+		description.value = description.value.substring(0, cursorStart) + toInsert + description.value.substring(cursorEnd, description.value.length);
+		doMarkdown();
+		uploadNext();
+	}
+
+	function replaceUploadString(upload, newString) {
+		let cursorStart = description.selectionStart;
+		let cursorEnd = description.selectionEnd;
+		let uploadString = makeUploadString(upload.uploadNumber, upload.file.name);
+		let insertIndex = description.value.indexOf(uploadString)
+		description.value = description.value.replace(uploadString, newString);
+		if (cursorStart <= insertIndex + uploadString.length) {
+			description.selectionStart = cursorStart;
+		} else {
+			description.selectionStart = cursorStart - uploadString.length + newString.length;
+		}
+		if (cursorEnd <= insertIndex + uploadString.length) {
+			description.selectionEnd = cursorEnd;
+		} else {
+			description.selectionEnd = cursorEnd - uploadString.length + newString.length;
+		}
+		doMarkdown();
+	}
+
+	function replaceUploadStringError(upload) {
+		replaceUploadString(upload, `There was a problem uploading your file \`${upload.file.name}\`.`);
+	}
+
+	function queueUpload(uploadNumber, file) {
+		uploadQueue.push({
+			uploadNumber: uploadNumber,
+			file: file
+		});
+
+		currentBatchSize++;
+		uploadProgressText.textContent = `Uploading files ${currentBatchDone+1}/${currentBatchSize}`;
+	}
+
+	function uploadDone(ev) {
+		try {
+			if (currentXhr.status == 200 && currentXhr.response) {
+				if (currentXhr.response.url) {
+					let url = currentXhr.response.url;
+					let newString = `[${currentUpload.file.name}](${url})`;
+					if (currentXhr.response.mime.startsWith("image")) {
+						newString = "!" + newString;
+					}
+
+					replaceUploadString(currentUpload, newString);
+				} else if (currentXhr.response.error) {
+					replaceUploadString(currentUpload, `Upload failed for \`${currentUpload.file.name}\`: ${currentXhr.response.error}.`);
+				} else {
+					replaceUploadStringError(currentUpload);
+				}
+			} else {
+				replaceUploadStringError(currentUpload);
+			}
+		} catch (err) {
+			console.error(err);
+			replaceUploadStringError(currentUpload);
+		}
+		currentUpload = null;
+		currentXhr = null;
+		currentBatchDone++;
+		uploadNext();
+	}
+
+	function updateUploadProgress(ev) {
+		if (ev.lengthComputable) {
+			let progress = ev.loaded / ev.total;
+			uploadProgressBarFill.style.width = Math.floor(progress * 100) + "%";
+		}
+	}
+
+	function uploadNext() {
+		if (currentUpload == null) {
+			next = uploadQueue.shift();
+			if (next) {
+				uploadProgressText.textContent = `Uploading files ${currentBatchDone+1}/${currentBatchSize}`;
+				uploadBar.classList.add("uploading");
+				uploadProgressBarFill.style.width = "0%";
+				submitButton.disabled = true;
+				submitButton.value = "Uploading files...";
+
+				try {
+					let utf8Filename = strToUTF8Arr(next.file.name);
+					let base64Filename = base64EncArr(utf8Filename);
+					// NOTE(mark): copied from NOTE(asaf): We use XHR because fetch can't do upload progress reports. Womp womp. https://youtu.be/Pubd-spHN-0?t=2
+					currentXhr = new XMLHttpRequest();
+					currentXhr.upload.addEventListener("progress", updateUploadProgress);
+					currentXhr.open("POST", uploadUrl, true);
+					currentXhr.setRequestHeader("Hmn-Upload-Filename", base64Filename);
+					currentXhr.responseType = "json";
+					currentXhr.addEventListener("loadend", uploadDone);
+					currentXhr.send(next.file);
+					currentUpload = next;
+				} catch (err) {
+					replaceUploadStringError(next);
+					console.error(err);
+					uploadNext();
+				}
+			} else {
+				submitButton.disabled = false;
+				submitButton.value = submitText;
+				uploadBar.classList.remove("uploading");
+				currentBatchSize = 0;
+				currentBatchDone = 0;
+			}
+		}
+	}
+
 	</script>
 {{ end }}
diff --git a/src/website/projects.go b/src/website/projects.go
index ed3dfa8..11108dc 100644
--- a/src/website/projects.go
+++ b/src/website/projects.go
@@ -402,6 +402,9 @@ type ProjectEditData struct {
 
 	APICheckUsernameUrl string
 	LogoMaxFileSize     int
+
+	MaxFileSize int
+	UploadUrl   string
 }
 
 func ProjectNew(c *RequestContext) ResponseData {
@@ -428,6 +431,9 @@ func ProjectNew(c *RequestContext) ResponseData {
 
 		APICheckUsernameUrl: hmnurl.BuildAPICheckUsername(),
 		LogoMaxFileSize:     ProjectLogoMaxFileSize,
+
+		MaxFileSize: AssetMaxSize(c.CurrentUser),
+		UploadUrl:   c.UrlContext.BuildAssetUpload(),
 	}, c.Perf)
 	return res
 }
@@ -552,6 +558,9 @@ func ProjectEdit(c *RequestContext) ResponseData {
 
 		APICheckUsernameUrl: hmnurl.BuildAPICheckUsername(),
 		LogoMaxFileSize:     ProjectLogoMaxFileSize,
+
+		MaxFileSize: AssetMaxSize(c.CurrentUser),
+		UploadUrl:   c.UrlContext.BuildAssetUpload(),
 	}, c.Perf)
 	return res
 }