diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index fa7d6cc9..e7b1b0f8 100644 --- a/gulp/res/css/style.css +++ b/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; diff --git a/gulp/res/img/video.png b/gulp/res/img/video.png new file mode 100644 index 00000000..27994f73 Binary files /dev/null and b/gulp/res/img/video.png differ diff --git a/gulp/res/js/forms.js b/gulp/res/js/forms.js index 9cbe9a1d..016c835d 100644 --- a/gulp/res/js/forms.js +++ b/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 diff --git a/views/includes/postform.pug b/views/includes/postform.pug index 0e75bbb8..2229a695 100644 --- a/views/includes/postform.pug +++ b/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') diff --git a/views/pages/managebanners.pug b/views/pages/managebanners.pug index b88f36c5..f2bd2d90 100644 --- a/views/pages/managebanners.pug +++ b/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)