@Quy please add any meaningful mime type needed here from: https://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types

The i icon confirms that the mimetype is correct, but it is still displaying the generic file icon. ???

Check that fas fa-file-pdf, etc actually exist, the code in the other PR was a bit of pseudo on terms of the actual font awsome classes

fas fa-file-pdf is correct and same as before the PR. It appears to not be detecting the mimetype thus defaulting to fas fa-file

Check what the actual mime type is <span v-bind:class="getFileClass" data-mime="{{ item.mime_type}}"/>
Also add break; after each return <-- No don't do that, that's stupid

<span class="fas fa-file" data-mime="{{item.mime_type}}"></span>

Add it to line 16

    <div class="media-browser-item-info">
      {{ item.name }} {{ item.filetype }} {{item.mime_type}}
    </div>

{{ item.filetype }} = empty
{{ item.mime_type }} = application/pdf

Change getFileClass: (item) => { to getFileClass() {

ReferenceError: item is not defined

  computed: {
    /* Get the hashed URL */
    getFileClass() {
      switch (item.mime_type) {
        case 'application/pdf':
          return 'fas fa-file-pdf';
        case 'application/msword':
        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
          return 'fas fa-file-word';
        case 'application/vnd.ms-excel':
        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
          return 'fas fa-file-excel';
        case 'application/vnd.ms-powerpoint':
        case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
          return 'fas fa-file-powerpoint';
        default:
          return 'fas fa-file';
      }
    },
  },

this.item then

Hallelujah! Thank you!!

Will redo later.