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,8 +81,11 @@
 						<div id="replybox" class="hideReplyBox"></div>
 						<div id="typediv">
 							<div id="realbox">
+								<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>
 								<div class="flexltr loading-indicator">
@@ -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

@@ -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
@@ -237,4 +239,69 @@ import { I18n } from "./i18n.js";
 		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;
+			}
+			e.preventDefault();
+			bg.hidden=false;
+			//console.log(data.types,data)
+		}else{
+			bg.hidden=true;
+		}
+	});
+	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;
@@ -886,13 +899,20 @@ span.instanceStatus {
 	padding: 0 16px 28px 16px;
 }
 #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."