fix: improve filtering uploads by album ids

database logic and dashboard display

controllers/uploadController.js

@@ -1651,14 +1651,19 @@ self.list = async (req, res) => {
     offset = Math.max(0, Math.ceil(result.count / uploadsPerPage) + offset)
   }
 
+  // Database columns to query
   const columns = ['id', 'name', 'original', 'userid', 'size', 'timestamp']
+
   if (utils.retentions.enabled) {
     columns.push('expirydate')
   }
-  if (!all ||
+
-    filterObj.queries.albumid ||
+  const filterByAlbums = filterObj.queries.albumid ||
     filterObj.queries.exclude.albumid ||
-    filterObj.flags.albumidNull !== undefined) {
+    filterObj.flags.albumidNull !== undefined
+
+  // If not listing all uploads, OR specifically filtering by album IDs
+  if (!all || filterByAlbums) {
     columns.push('albumid')
   }
 
@@ -1702,16 +1707,23 @@ self.list = async (req, res) => {
 
   result.albums = {}
 
-  // If we queried albumid, query album names
+  // If not listing all uploads, OR specifically filtering by album IDs
-  if (columns.includes('albumid')) {
+  if (!all || filterByAlbums) {
     const albumids = result.files
       .map(file => file.albumid)
       .filter(utils.filterUniquifySqlArray)
 
     result.albums = await utils.db.table('albums')
-      .whereIn('id', albumids)
+      .where(function () {
-      .where('enabled', 1)
+        this.whereIn('id', albumids)
-      .select('id', 'name')
+
+        // Only include data of disabled albums if listing all uploads
+        // and filtering by album IDs
+        if (!all) {
+          this.andWhere('enabled', 1)
+        }
+      })
+      .select('id', 'name', 'enabled')
       .then(rows => {
         // Build Object indexed by their IDs
         const obj = {}
@@ -1720,12 +1732,19 @@ self.list = async (req, res) => {
         }
         return obj
       })
+
+    // If filtering by album IDs,
+    // then filter out uploads with missing albums data (assume disabled/deleted)
+    if (filterByAlbums) {
+      result.files = result.files.filter(file => result.albums[file.albumid] !== undefined)
+    }
   }
 
   // If we are not listing all uploads, send response
   if (!all) {
     return res.json(result)
   }
+
   // Otherwise proceed to querying usernames
   let usersTable = filterObj.uploaders
   if (!usersTable.length) {

src/js/dashboard.js

@@ -674,8 +674,9 @@ page.getUploads = (params = {}) => {
     // Whether there are any unselected items
     let unselected = false
 
-    const showOriginalNames = page.views[page.currentView].originalNames
+    const filterAllByAlbums = params.all && params.filters && params.filters.includes('albumid:')
     const hasExpiryDateColumn = files.some(file => typeof file.expirydate !== 'undefined')
+    const showOriginalNames = page.views[page.currentView].originalNames
 
     for (let i = 0; i < files.length; i++) {
       // Build full URLs
@@ -710,8 +711,14 @@ page.getUploads = (params = {}) => {
       }
 
       // Prettify
+      files[i].prettyAlbum = (albums && files[i].albumid && albums[files[i].albumid])
+        ? `[${files[i].albumid}] ${albums[files[i].albumid]}` || ''
+        : ''
       files[i].prettyBytes = page.getPrettyBytes(parseInt(files[i].size))
       files[i].prettyDate = page.getPrettyDate(new Date(files[i].timestamp * 1000))
+      files[i].prettyUser = (users && files[i].userid && users[files[i].userid])
+        ? users[files[i].userid]
+        : ''
 
       if (hasExpiryDateColumn) {
         files[i].prettyExpiryDate = files[i].expirydate
@@ -724,17 +731,6 @@ page.getUploads = (params = {}) => {
       if (!files[i].selected) {
         unselected = true
       }
-
-      // Appendix (display album or user)
-      if (params.all) {
-        files[i].appendix = files[i].userid
-          ? users[files[i].userid] || ''
-          : ''
-      } else if (typeof params.album === 'undefined') {
-        files[i].appendix = files[i].albumid
-          ? `[${files[i].albumid}] ${albums[files[i].albumid]}` || ''
-          : ''
-      }
     }
 
     if (page.views[page.currentView].type === 'thumbs') {
@@ -753,14 +749,22 @@ page.getUploads = (params = {}) => {
 
       for (let i = 0; i < files.length; i++) {
         const upload = files[i]
+        let appendix = ''
+        if (params.all) {
+          appendix += upload.prettyUser ? `<span>${upload.prettyUser}</span> \u2013 ` : ''
+        }
+        if (!params.all || filterAllByAlbums) {
+          appendix += upload.prettyAlbum ? `<span>${upload.prettyAlbum}</span> \u2013 ` : ''
+        }
+
         const div = document.createElement('div')
         div.className = 'image-container column'
         div.dataset.id = upload.id
 
-        if (typeof upload.thumb !== 'undefined') {
+        if (upload.thumb === undefined) {
-          div.innerHTML = `<a class="image" href="${upload.file}" target="_blank"><img alt="${upload.name}" data-src="${upload.thumb}"/></a>`
-        } else {
           div.innerHTML = `<a class="image" href="${upload.file}" target="_blank"><h1 class="title">${upload.extname || 'N/A'}</h1></a>`
+        } else {
+          div.innerHTML = `<a class="image" href="${upload.file}" target="_blank"><img alt="${upload.name}" data-src="${upload.thumb}"/></a>`
         }
 
         div.innerHTML += `
@@ -797,7 +801,7 @@ page.getUploads = (params = {}) => {
           <div class="details">
             <p class="name" title="${upload.file}">${upload.name}</p>
             ${showOriginalNames ? `<p class="originalname" title="${upload.original}">${upload.original}</p>` : ''}
-            <p class="prettybytes" data-bytes="${upload.size}">${upload.appendix ? `<span>${upload.appendix}</span> – ` : ''}${upload.prettyBytes}</p>
+            <p class="prettybytes" data-bytes="${upload.size}">${appendix}${upload.prettyBytes}</p>
             ${hasExpiryDateColumn && upload.prettyExpiryDate
               ? `<p class="prettyexpirydate"${upload.expirydate ? ` data-timestamp="${upload.expirydate}"` : ''}>EXP: ${upload.prettyExpiryDate}</p>`
               : ''}
@@ -808,7 +812,6 @@ page.getUploads = (params = {}) => {
         page.checkboxes = table.querySelectorAll('.checkbox[data-action="select"]')
       }
     } else {
-      const allAlbums = params.all && params.filters && params.filters.includes('albumid:')
       page.dom.innerHTML = `
         ${pagination}
         ${extraControls}
@@ -820,8 +823,8 @@ page.getUploads = (params = {}) => {
                 <th class="controls"><input id="selectAll" class="checkbox" type="checkbox" title="Select all" data-action="select-all"></th>
                 <th title="Key: name">File name</th>
                 ${showOriginalNames ? '<th title="Key: original">Original name</th>' : ''}
-                ${typeof params.album === 'undefined' ? `<th title="Key: ${params.all ? 'userid">User' : 'albumid">Album'}</th>` : ''}
+                ${params.all ? '<th title="Key: userid">User</th>' : ''}
-                ${allAlbums ? '<th title="Key: albumid">Album</th>' : ''}
+                ${!params.all || filterAllByAlbums ? '<th title="Key: albumid">Album</th>' : ''}
                 <th title="Key: size">Size</th>
                 ${params.all ? '<th title="Key: ip">IP</th>' : ''}
                 <th title="Key: timestamp">Upload date</th>
@@ -842,14 +845,15 @@ page.getUploads = (params = {}) => {
 
       for (let i = 0; i < files.length; i++) {
         const upload = files[i]
+
         const tr = document.createElement('tr')
         tr.dataset.id = upload.id
         tr.innerHTML = `
           <td class="controls"><input type="checkbox" class="checkbox" title="Select" data-index="${i}" data-action="select"${upload.selected ? ' checked' : ''}></td>
           <th class="name"><a href="${upload.file}" target="_blank" title="${upload.file}">${upload.name}</a></th>
           ${showOriginalNames ? `<th class="originalname" title="${upload.original}">${upload.original}</th>` : ''}
-          ${typeof params.album === 'undefined' ? `<th class="appendix">${upload.appendix}</th>` : ''}
+          ${params.all ? `<th class="appendix">${upload.prettyUser}</th>` : ''}
-          ${allAlbums ? `<th class="album">${upload.albumid ? (`[${upload.albumid}] ${albums[upload.albumid]}` || '') : ''}</th>` : ''}
+          ${!params.all || filterAllByAlbums ? `<th class="album">${upload.prettyAlbum}</th>` : ''}
           <td class="prettybytes" data-bytes="${upload.size}">${upload.prettyBytes}</td>
           ${params.all ? `<td class="ip">${upload.ip || ''}</td>` : ''}
           <td class="prettydate" data-timestamp="${upload.timestamp}">${upload.prettyDate}</td>