more file upload options

src/webpage/channel.ts

@@ -852,6 +852,7 @@ class Channel extends SnowFlake{
 		await this.buildmessages();
 		//loading.classList.remove("loading");
 		(document.getElementById("typebox") as HTMLDivElement).contentEditable =""+this.canMessage;
+		(document.getElementById("upload") as HTMLElement).style.visibility=this.canMessage?"visible":"hidden";
 		(document.getElementById("typebox") as HTMLDivElement).focus();
 	}
 	typingmap: Map<Member, number> = new Map();

src/webpage/direct.ts

@@ -199,6 +199,7 @@ class Group extends Channel{
 		}
 		this.buildmessages();
 		(document.getElementById("typebox") as HTMLDivElement).contentEditable ="" + true;
+		(document.getElementById("upload") as HTMLElement).style.visibility="visible";
 		(document.getElementById("typebox") as HTMLDivElement).focus();
 	}
 	messageCreate(messagep: { d: messagejson }){

src/webpage/icons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="red" d="M60 0A60 60 0 0 0 0 60a60 60 0 0 0 60 60 60 60 0 0 0 60-60A60 60 0 0 0 60 0Zm-7.7 20H68l-.1 31.2H100V67l-32.2-.1V100H52l.1-33.2H20V51l32.2.1Z"/></svg>

src/webpage/index.html

@@ -81,7 +81,10 @@
 						<div id="replybox" class="hideReplyBox"></div>
 						<div id="typediv">
 							<div id="realbox">
-								<div id="typebox" contentEditable="true"></div>
+								<div class="outerTypeBox">
+									<span class="svg-upload svgicon" id="upload"></span>
+									<div id="typebox" contentEditable="true"></div>
+								</div>
 							</div>
 							<div id="typing" class="hidden flexltr">
 								<p id="typingtext">typing</p>
@@ -97,6 +100,9 @@
 				</div>
 			</div>
 		</div>
+		<div hidden id="gimmefile">
+			<div id="filedroptext" class="centeritem nonimagecenter">Upload your files here!</div>
+		</div>
 	</body>
 	<script src="/index.js" type="module"></script>
 </html>

src/webpage/index.ts

@@ -3,7 +3,7 @@ import{ Contextmenu }from"./contextmenu.js";
 import{ mobile, getBulkUsers, setTheme, Specialuser }from"./login.js";
 import{ MarkDown }from"./markdown.js";
 import{ Message }from"./message.js";
-import{ File }from"./file.js";
+import{File}from"./file.js";
 import { I18n } from "./i18n.js";
 
 (async ()=>{
@@ -17,10 +17,12 @@ import { I18n } from "./i18n.js";
 		const loadingText=document.getElementById("loadingText");
 		const loaddesc=document.getElementById("load-desc");
 		const switchaccounts=document.getElementById("switchaccounts");
-		if(loadingText&&loaddesc&&switchaccounts){
+		const filedroptext=document.getElementById("filedroptext");
+		if(loadingText&&loaddesc&&switchaccounts&&filedroptext){
 			loadingText.textContent=I18n.getTranslation("htmlPages.loadingText");
 			loaddesc.textContent=I18n.getTranslation("htmlPages.loaddesc");
 			switchaccounts.textContent=I18n.getTranslation("htmlPages.switchaccounts");
+			filedroptext.textContent=I18n.getTranslation("uploadFilesText");
 		}
 	}
 	I18n
@@ -191,50 +193,115 @@ import { I18n } from "./i18n.js";
 		}
 	}
 
-		interface CustomHTMLDivElement extends HTMLDivElement {markdown: MarkDown;}
+	interface CustomHTMLDivElement extends HTMLDivElement {markdown: MarkDown;}
 
-		const typebox = document.getElementById("typebox") as CustomHTMLDivElement;
-		const markdown = new MarkDown("", thisUser);
-		typebox.markdown = markdown;
-		typebox.addEventListener("keyup", handleEnter);
-		typebox.addEventListener("keydown", event=>{
-			thisUser.keydown(event)
-			if(event.key === "Enter" && !event.shiftKey) event.preventDefault();
-		});
-		markdown.giveBox(typebox);
+	const typebox = document.getElementById("typebox") as CustomHTMLDivElement;
+	const markdown = new MarkDown("", thisUser);
+	typebox.markdown = markdown;
+	typebox.addEventListener("keyup", handleEnter);
+	typebox.addEventListener("keydown", event=>{
+		thisUser.keydown(event)
+		if(event.key === "Enter" && !event.shiftKey) event.preventDefault();
+	});
+	markdown.giveBox(typebox);
 
-		const images: Blob[] = [];
-		const imagesHtml: HTMLElement[] = [];
+	const images: Blob[] = [];
+	const imagesHtml: HTMLElement[] = [];
 
-		document.addEventListener("paste", async (e: ClipboardEvent)=>{
-			if(!e.clipboardData)return;
+	document.addEventListener("paste", async (e: ClipboardEvent)=>{
+		if(!e.clipboardData)return;
 
-			for(const file of Array.from(e.clipboardData.files)){
-				const fileInstance = File.initFromBlob(file);
-				e.preventDefault();
-				const html = fileInstance.upHTML(images, file);
-				pasteImageElement.appendChild(html);
-				images.push(file);
-				imagesHtml.push(html);
+		for(const file of Array.from(e.clipboardData.files)){
+			const fileInstance = File.initFromBlob(file);
+			e.preventDefault();
+			const html = fileInstance.upHTML(images, file);
+			pasteImageElement.appendChild(html);
+			images.push(file);
+			imagesHtml.push(html);
+		}
+	});
+
+	setTheme();
+
+	function userSettings(): void{
+		thisUser.showusersettings();
+	}
+
+	(document.getElementById("settings") as HTMLImageElement).onclick =
+	userSettings;
+
+	if(mobile){
+		const channelWrapper = document.getElementById("channelw") as HTMLDivElement;
+		channelWrapper.onclick = ()=>{
+			const toggle = document.getElementById("maintoggle") as HTMLInputElement;
+			toggle.checked = true;
+		};
+		const memberListToggle = document.getElementById("memberlisttoggle") as HTMLInputElement;
+		memberListToggle.checked = false;
+	}
+	let dragendtimeout=setTimeout(()=>{})
+	document.addEventListener("dragover",(e)=>{
+		clearTimeout(dragendtimeout);
+		const data = e.dataTransfer;
+		const bg=document.getElementById("gimmefile") as HTMLDivElement;
+
+		if(data){
+			const isfile=data.types.includes("Files")||data.types.includes("application/x-moz-file");
+			if(!isfile){
+				bg.hidden=true;
+				return;
 			}
-		});
-
-		setTheme();
-
-		function userSettings(): void{
-			thisUser.showusersettings();
+			e.preventDefault();
+			bg.hidden=false;
+			//console.log(data.types,data)
+		}else{
+			bg.hidden=true;
 		}
-
-		(document.getElementById("settings") as HTMLImageElement).onclick =
-		userSettings;
-
-		if(mobile){
-			const channelWrapper = document.getElementById("channelw") as HTMLDivElement;
-			channelWrapper.onclick = ()=>{
-				const toggle = document.getElementById("maintoggle") as HTMLInputElement;
-				toggle.checked = true;
-			};
-			const memberListToggle = document.getElementById("memberlisttoggle") as HTMLInputElement;
-			memberListToggle.checked = false;
+	});
+	document.addEventListener("dragleave",(_)=>{
+		dragendtimeout=setTimeout(()=>{
+			const bg=document.getElementById("gimmefile") as HTMLDivElement;
+			bg.hidden=true;
+		},1000)
+	});
+	document.addEventListener("dragenter",(e)=>{
+		e.preventDefault();
+	})
+	document.addEventListener("drop",e=>{
+		const data = e.dataTransfer;
+		const bg=document.getElementById("gimmefile") as HTMLDivElement;
+		bg.hidden=true;
+		if(data){
+			const isfile=data.types.includes("Files")||data.types.includes("application/x-moz-file");
+			if(isfile){
+				e.preventDefault();
+				console.log(data.files);
+				for(const file of Array.from(data.files)){
+					const fileInstance = File.initFromBlob(file);
+					const html = fileInstance.upHTML(images, file);
+					pasteImageElement.appendChild(html);
+					images.push(file);
+					imagesHtml.push(html);
+				}
+			}
 		}
+	});
+	(document.getElementById("upload") as HTMLElement).onclick=()=>{
+		const input=document.createElement("input");
+		input.type="file";
+		input.click();
+		console.log("clicked")
+		input.onchange=(() => {
+			if(input.files){
+				for(const file of Array.from(input.files)){
+					const fileInstance = File.initFromBlob(file);
+					const html = fileInstance.upHTML(images, file);
+					pasteImageElement.appendChild(html);
+					images.push(file);
+					imagesHtml.push(html);
+				}
+			}
+		})
+	}
+
 })();

src/webpage/style.css

@@ -246,6 +246,11 @@ textarea {
 .svg-plus {
 	mask: url(/icons/plus.svg);
 }
+.svg-upload {
+	mask: url(/icons/upload.svg);
+	width: .2in !important;!i;!;
+	cursor: pointer;
+}
 .svg-x {
 	mask: url(/icons/x.svg);
 }
@@ -278,6 +283,13 @@ textarea {
 	padding: .05in;
 	border-radius: .04in;
 }
+#gimmefile{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: #00000070;
+	top:0px;
+}
 /* Animations */
 @keyframes fade {
 	0%, 100% {
@@ -832,6 +844,7 @@ span.instanceStatus {
 	display: flex;
 	gap: 12px;
 	overflow-y: auto;
+	flex-wrap: wrap;
 }
 #pasteimage:empty {
 	height: 0;
@@ -885,14 +898,21 @@ span.instanceStatus {
 #realbox {
 	padding: 0 16px 28px 16px;
 }
-#typebox {
+#typebox{
+	flex-grow:1;
+	width:100%;
+	margin-left: .06in;
+}
+.outerTypeBox {
 	max-height: 50svh;
-	padding: 10px 14px;
+	padding: 10px 10px;
 	background: var(--typebox-bg);
 	border-radius: 4px;
 	overflow-y: auto;
+	display:flex;
+	flex-direction: row;
 }
-#typebox > span::before {
+.outerTypeBox > span::before {
 	content: "\feff";
 }
 #typebox[contenteditable=false] {

translations/en.json

@@ -375,6 +375,7 @@
 		"reason:":"Reason:",
 		"ban":"Ban $1 from $2"
 	},
+	"uploadFilesText":"Upload your files here!",
 	"errorReconnect":"Unable to connect to the server, retrying in **$1** seconds...",
 	"retrying":"Retrying...",
 	"unableToConnect":"Unable to connect to the Spacebar server. Please try logging out and back in."