Very basic non-image attachment embeds.

common/parser.go

@@ -26,6 +26,8 @@ var URLClose = []byte("</a>")
 var imageOpen = []byte("<a href=\"")
 var imageOpen2 = []byte("\"><img src='")
 var imageClose = []byte("' class='postImage' /></a>")
+var attachOpen = []byte("<a download class='attach' href=\"")
+var attachClose = []byte("\">Attachment</a>")
 var urlPattern = `(?s)([ {1}])((http|https|ftp|mailto)*)(:{??)\/\/([\.a-zA-Z\/]+)([ {1}])`
 var urlReg *regexp.Regexp
 
@@ -631,6 +633,13 @@ func ParseMessage(msg string, sectionID int, sectionType string /*, user User*/)
 				} else if media.Type == "image" {
 					addImage(media.URL)
 					continue
+				} else if media.Type == "aother" {
+					sb.Write(attachOpen)
+					sb.WriteString(media.URL + "?sectionID=" + strconv.Itoa(sectionID) + "&amp;sectionType=" + sectionType)
+					sb.Write(attachClose)
+					i += urlLen
+					lastItem = i
+					continue
 				} else if media.Type == "raw" {
 					sb.WriteString(media.Body)
 					i += urlLen
@@ -820,13 +829,23 @@ func parseMediaString(data string) (media MediaEmbed, ok bool) {
 	pathFrags := strings.Split(path, "/")
 	if len(pathFrags) >= 2 {
 		if samesite && pathFrags[1] == "attachs" && (scheme == "http" || scheme == "https") {
-			media.Type = "attach"
 			var sport string
 			// ? - Assumes the sysadmin hasn't mixed up the two standard ports
 			if port != "443" && port != "80" {
 				sport = ":" + port
 			}
 			media.URL = scheme + "://" + hostname + sport + path
+			var extarr = strings.Split(path, ".")
+			if len(extarr) == 0 {
+				// TODO: Write a unit test for this
+				return media, false
+			}
+			var ext = extarr[len(extarr)-1]
+			if ImageFileExts.Contains(ext) {
+				media.Type = "attach"
+			} else {
+				media.Type = "aother"
+			}
 			return media, true
 		}
 	}

public/global.js

@@ -860,11 +860,10 @@ function mainInit(){
 		}
 
 		for(let i = 0; i < files.length; i++) {
-			let reader = new FileReader();
-			reader.onload = (e) => {
-				let filename = files[i]["name"];
+			let filename = files[i]["name"];
+			let f = (e) => {
 				step1(e,filename)
-
+				
 				let reader = new FileReader();
 				reader.onload = (e2) => {
 					crypto.subtle.digest('SHA-256',e2.target.result)
@@ -874,8 +873,16 @@ function mainInit(){
 						}).then(hash => step2(e,hash,filename));
 				}
 				reader.readAsArrayBuffer(files[i]);
-			}
-			reader.readAsDataURL(files[i]);
+			};
+			
+			let ext = getExt(filename);
+			// TODO: Push ImageFileExts to the client from the server in some sort of gen.js?
+			let isImage = ["png", "jpg", "jpeg", "svg", "bmp", "gif", "tif", "webp"].includes(ext);
+			if(isImage) {
+				let reader = new FileReader();
+				reader.onload = f;
+				reader.readAsDataURL(files[i]);
+			} else f(null);
 		}
 	}
 
@@ -902,16 +909,17 @@ function mainInit(){
 				let req = new XMLHttpRequest();
 				req.addEventListener("load", () => {
 					let data = JSON.parse(req.responseText);
-					//console.log("hash:",hash);
 					//console.log("rdata:",data);
 					let fileItem = document.createElement("div");
 					let ext = getExt(filename);
-					//console.log("ext:",ext);
-					// TODO: Check if this is actually an image, maybe push ImageFileExts to the client from the server in some sort of gen.js?
-					fileItem.className = "attach_item attach_item_item attach_image_holder";
+					// TODO: Push ImageFileExts to the client from the server in some sort of gen.js?
+					let isImage = ["png", "jpg", "jpeg", "svg", "bmp", "gif", "tif", "webp"].includes(ext);
+					let c = "";
+					if(isImage) c = " attach_image_holder"
+					fileItem.className = "attach_item attach_item_item" + c;
 					fileItem.innerHTML = Template_topic_c_attach_item({
 						ID: data.elems[hash+"."+ext],
-						ImgSrc: e.target.result,
+						ImgSrc: isImage ? e.target.result : "",
 						Path: hash+"."+ext,
 						FullPath: "//" + window.location.host + "/attachs/" + hash + "." + ext,
 					});
@@ -932,7 +940,7 @@ function mainInit(){
 	// Quick Topic / Quick Reply
 	function uploadAttachHandler() {
 		try {
-			uploadFileHandler(this.files,5,(e,filename) => {
+			uploadFileHandler(this.files, 5, (e,filename) => {
 				// TODO: Use client templates here
 				let fileDock = document.getElementById("upload_file_dock");
 				let fileItem = document.createElement("label");

templates/topic_c_attach_item.html

@@ -1,4 +1,4 @@
-<img src='{{.ImgSrc}}' height=24 width=24 />
+{{if .ImgSrc}}<img src='{{.ImgSrc}}' height=24 width=24 />{{end}}
 <span class='attach_item_path' aid='{{.ID}}' fullpath='{{.FullPath}}'>{{.Path}}</span>
 <button class='attach_item_select'>{{lang "topic.select_button_text"}}</button>
 <button class='attach_item_copy'>{{lang "topic.copy_button_text"}}</button>

themes/nox/public/main.css

@@ -994,7 +994,7 @@ input[type=checkbox]:checked + label .sel {
 	margin-right: 8px;
 	border-radius: 4px;
 }
-.attach_image_holder span {
+.attach_item_item span {
 	margin-bottom: 4px;
 }
 .attach_edit_bay button {
@@ -1007,10 +1007,13 @@ input[type=checkbox]:checked + label .sel {
     padding: 8px;
     width: 100%;
 }
-.attach_image_holder span {
+.attach_item_item span {
 	margin-right: auto;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	width: 350px;
+}
+.attach_image_holder span {
 	width: 300px;
 }
 .attach_item button {