feat: add 'Open direct' button to images (#5678)

frontend/src/i18n/en.json

@@ -42,6 +42,7 @@
     "update": "Update",
     "upload": "Upload",
     "openFile": "Open file",
+    "openDirect": "View raw",
     "discardChanges": "Discard",
     "stopSearch": "Stop searching",
     "saveChanges": "Save changes",

frontend/src/views/files/Preview.vue

@@ -46,6 +46,16 @@
           :label="$t('buttons.download')"
           @action="download"
         />
+        <action
+          :disabled="layoutStore.loading"
+          v-if="
+            ['image', 'audio', 'video'].includes(fileStore.req?.type || '') &&
+            authStore.user?.perm.download
+          "
+          icon="open_in_new"
+          :label="t('buttons.openDirect')"
+          @action="openDirect"
+        />
         <action
           :disabled="layoutStore.loading"
           icon="info"
@@ -277,6 +287,10 @@ const downloadUrl = computed(() =>
   fileStore.req ? api.getDownloadURL(fileStore.req, false) : ""
 );
 
+const directUrl = computed(() =>
+  fileStore.req ? api.getDownloadURL(fileStore.req, true) : ""
+);
+
 const previewUrl = computed(() => {
   if (!fileStore.req) {
     return "";
@@ -470,6 +484,7 @@ const close = () => {
 };
 
 const download = () => window.open(downloadUrl.value);
+const openDirect = () => window.open(directUrl.value);
 
 const editAsText = () => {
   router.push({ path: route.path, query: { edit: "true" } });