add download for binary files

app.vue

@@ -147,15 +147,15 @@ function stepUp(path: string) {
         </template>
         <template
           v-if="!filesManager.getFile(selectedPath)?.isFolder && imageExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
-          <ImageViewer :src="mediaBlobUrl"></ImageViewer>
+          <MediaImageViewer :src="mediaBlobUrl"></MediaImageViewer>
         </template>
         <template
           v-if="!filesManager.getFile(selectedPath)?.isFolder && files.length && !imageExtensions.includes(filesManager.getFile(selectedPath)?.extension) && !videoExtensions.includes(filesManager.getFile(selectedPath)?.extension) && !binaryExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
-          <TextEditor :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></TextEditor>
+          <MediaTextEditor :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></MediaTextEditor>
         </template>
         <template
           v-if="!filesManager.getFile(selectedPath)?.isFolder && files.length && binaryExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
-          <BinaryViewer :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></BinaryViewer>
+          <MediaBinaryViewer :file="filesManager.getFile(selectedPath)" :filesManager="filesManager"></MediaBinaryViewer>
         </template>
         <template v-if="!files.length">
           <!-- tutorial drag and drop zipped file here and review it securely -->

components/media/binary-viewer.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { FilesManager } from '~/composables/files-manager';
 import { iFile } from '~/composables/worker/7zip-manager';
+import { VBtn } from 'vuetify/components';
 
 interface Props {
   file: iFile,
@@ -54,6 +55,10 @@ function updateVisibleRows() {
   }
 }
 
+function downloadBinaryFile() {
+  filesManager.downloadFile(file.path);
+}
+
 onMounted(async () => {
   try {
     buffer.value = await filesManager.getFileContent(file.path, "binary") as Uint8Array
@@ -67,6 +72,17 @@ onMounted(async () => {
 
 <template>
   <div class="binary-viewer">
+    <div class="toolbar">
+      <v-btn
+        color="primary"
+        variant="flat"
+        prepend-icon="mdi-download"
+        @click="downloadBinaryFile"
+        size="small"
+      >
+        Download {{ file.name }}
+      </v-btn>
+    </div>
     <div v-if="isLoading" class="loading">
       Loading...
     </div>
@@ -141,4 +157,10 @@ onMounted(async () => {
   align-items: center;
   height: 100%;
 }
+
+.toolbar {
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>