X to remove files individually, with thumbnails shown

gulp/res/css/style.css

@@ -262,8 +262,16 @@ p {
 
 .upload-list {
 	max-height: 75px;
-	overflow: hidden auto;
+	overflow-x: hidden;
+	overflow-y: auto;
 	max-width: 100%;
+	scrollbar-width: none;
+	border: 1px solid var(--input-borders);
+	margin-top: 1px;
+	display: none;
+}
+.upload-list::-webkit-scrollbar { 
+    display: none; 
 }
 
 .upload-item {
@@ -273,7 +281,7 @@ p {
 }
 
 .upload-item p {
-	max-width: calc(100% - 60px);
+	max-width: calc(100% - 85px);
 	max-height: 1.5em;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -281,6 +289,12 @@ p {
 	margin-left: 60px;
 }
 
+.upload-item a {
+	height: 50px;
+	display: flex;
+	align-items: center;
+}
+
 .upload-thumb {
 	width: 50px;
 	height: 50px;

gulp/res/js/forms.js

@@ -62,6 +62,7 @@ class formHandler {
 		if (this.fileInput) {
 			this.fileRequired = this.fileInput.required;
 			this.fileLabel = this.fileInput.previousSibling;
+			this.fileUploadList = this.fileInput.nextSibling;
 			this.multipleFiles = this.fileLabel.parentNode.previousSibling.firstChild.textContent.endsWith('s');
 			this.fileLabelText = this.fileLabel.childNodes[0];
 			this.fileLabel.addEventListener('dragover', e => this.fileLabelDrag(e));
@@ -160,9 +161,9 @@ class formHandler {
 					this.updateMessageBox();
 					this.files = [];
 					this.updateFilesText();
-					const captcha = this.form.querySelector('img');
+					const captcha = this.form.querySelector('.captcharefresh');
 					if (captcha) {
-						captcha.dispatchEvent(new Event('dblclick'));
+						captcha.dispatchEvent(new Event('click'));
 					}
 				} else {
 					if (xhr.status === 413) {
@@ -204,11 +205,17 @@ class formHandler {
 		this.messageBox && this.messageBox.dispatchEvent(new Event('input'));
 	}
 
-	//remove a single file, unused atm
-	removeFile(index) {
-		const childNode = this.fileLabel.childNodes[index+1]; //+1 because first one is fileLabelText
-		childNode.remove();
-		files.splice(index, 1);
+	removeFile(fileElem, name, size) {
+		fileElem.remove();
+		let fileIndex;
+		this.files.find((f, index) => {
+			if (f.name === name && f.size === size) {
+				fileIndex = index;
+			}
+		})
+		this.files.splice(fileIndex, 1);
+		this.updateFilesText();
+console.log(this.files)
 	}
 
 	addFile(file) {
@@ -216,17 +223,38 @@ class formHandler {
 			this.fileInput.removeAttribute('required');
 		}
 		this.files.push(file);
-console.log(file)
+		//add to upload list
 		const listElem = document.createElement('div');
 		listElem.classList.add('upload-item');
 		const thumb = document.createElement('img');
 		const name = document.createElement('p');
+		const remove = document.createElement('a');
 		name.textContent = file.name;
-		thumb.src = URL.createObjectURL(file);
+		remove.textContent = 'X';
+		switch (file.type.split('/')[0]) {
+			case 'image':
+				thumb.src = URL.createObjectURL(file);
+				break;
+			case 'audio':
+				thumb.src = '/file/audio.png'
+				break;
+			case 'video':
+				thumb.src = '/file/video.png'
+				break;
+			default:
+				thumb.src = '/file/attachment.png'
+				break;
+		}
 		thumb.classList.add('upload-thumb');
+		remove.classList.add('close');
 		listElem.appendChild(thumb);
 		listElem.appendChild(name);
-		this.fileInput.nextSibling.appendChild(listElem);
+		listElem.appendChild(remove);
+		remove.addEventListener('click', () => {
+			this.removeFile(listElem, file.name, file.size);
+		})
+		this.fileUploadList.appendChild(listElem);
+		this.fileUploadList.style.display = 'unset';
 	}
 
 	//show number of files on new label
@@ -235,6 +263,8 @@ console.log(file)
 			return;
 		}
 		if (this.files && this.files.length === 0) {
+			this.fileUploadList.textContent = '';
+			this.fileUploadList.style.display = 'none';
 			this.fileLabelText.nodeValue = `Select/Drop/Paste file${this.multipleFiles ? 's' : ''}`;
 		} else {
 			this.fileLabelText.nodeValue = `${this.files.length} file${this.files.length > 1 ? 's' : ''} selected`;
@@ -249,7 +279,6 @@ console.log(file)
 			this.fileInput.setAttribute('required', true)
 		}
 		this.updateFilesText();
-		this.fileInput.nextSibling.textContent = '';
 	}
 
 	//paste file from clipboard

views/includes/postform.pug

@@ -48,7 +48,7 @@ section.form-wrapper.flex-center
 				span.col
 					include ./filelabel.pug
 					input#file(type='file', name='file' multiple required=fileRequired )
-					div.upload-list
+					.upload-list
 				if board.settings.userPostSpoiler
 					label.postform-style.ph-5.ml-1.fh
 						input(type='checkbox', name='spoiler', value='true')

views/pages/managebanners.pug

@@ -26,6 +26,7 @@ block content
 				span.col
 					include ../includes/filelabel.pug
 					input#file(type='file', name='file' multiple required)
+					.upload-list
 			input(type='submit', value='submit')
 	if board.banners.length > 0
 		hr(size=1)