show uploaded files with thumb in scrollabel area

todo:
- handle tumbnails properly for video and other files
- allow to selectively remove files with a X button or something

gulp/res/css/style.css

@@ -260,6 +260,33 @@ p {
 	margin: 5px;
 }
 
+.upload-list {
+	max-height: 75px;
+	overflow: hidden auto;
+	max-width: 100%;
+}
+
+.upload-item {
+	display: flex;
+	align-items: center;
+	position: relative;
+}
+
+.upload-item p {
+	max-width: calc(100% - 60px);
+	max-height: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	position: absolute;
+	margin-left: 60px;
+}
+
+.upload-thumb {
+	width: 50px;
+	height: 50px;
+	object-fit: contain;
+}
+
 .catalog {
 	display:flex;
 	align-items:flex-start;
@@ -299,6 +326,7 @@ p {
 	min-width: 220px;
 	flex-grow: 1;
 	flex-direction: column;
+	min-height: 38px;
 }
 
 .form-file {

gulp/res/js/forms.js

@@ -216,6 +216,17 @@ class formHandler {
 			this.fileInput.removeAttribute('required');
 		}
 		this.files.push(file);
+console.log(file)
+		const listElem = document.createElement('div');
+		listElem.classList.add('upload-item');
+		const thumb = document.createElement('img');
+		const name = document.createElement('p');
+		name.textContent = file.name;
+		thumb.src = URL.createObjectURL(file);
+		thumb.classList.add('upload-thumb');
+		listElem.appendChild(thumb);
+		listElem.appendChild(name);
+		this.fileInput.nextSibling.appendChild(listElem);
 	}
 
 	//show number of files on new label
@@ -238,6 +249,7 @@ class formHandler {
 			this.fileInput.setAttribute('required', true)
 		}
 		this.updateFilesText();
+		this.fileInput.nextSibling.textContent = '';
 	}
 
 	//paste file from clipboard

views/includes/postform.pug

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