From c79655a467c170569ed782476f733a3ba3d83e11 Mon Sep 17 00:00:00 2001
From: Jordan Goulder <jordan@jordangoulder.com>
Date: Mon, 3 Feb 2025 23:08:26 -0500
Subject: [PATCH] Add ability to save files

---
 src/components/DiskExplorer.vue | 35 +++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/DiskExplorer.vue b/src/components/DiskExplorer.vue
index a2c468a..f2edd6e 100644
--- a/src/components/DiskExplorer.vue
+++ b/src/components/DiskExplorer.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { FloppyDisk } from '@/floppy/disk.ts'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import HexDump from '@/components/HexDump.vue'
 import TextDump from '@/components/TextDump.vue'
 
@@ -10,6 +10,20 @@ const currentPath = ref([''])
 
 const currentFileData = ref(new ArrayBuffer(0))
 
+const currentFileObjectUrl = computed<string>((previous) => {
+  if (previous?.startsWith('blob')) {
+    URL.revokeObjectURL(previous)
+  }
+
+  if (currentFileData.value.byteLength === 0) {
+    return ''
+  }
+
+  return URL.createObjectURL(
+    new Blob([currentFileData.value], { type: 'application/octet-stream' }),
+  )
+})
+
 const currentFileName = ref<string>('')
 
 const dataView = ref('hex-dump')
@@ -55,6 +69,12 @@ const files = computed(() => {
     .sort()
 })
 
+onUnmounted(() => {
+  if (currentFileObjectUrl.value?.startsWith('blob')) {
+    URL.revokeObjectURL(currentFileObjectUrl.value)
+  }
+})
+
 function arraysEqual<T>(a1: T[], a2: T[]): boolean {
   return a1.length === a2.length && a1.every((value, index) => value === a2[index])
 }
@@ -100,11 +120,14 @@ function loadFile(name: string, firstCluster: number, size: number) {
         </li>
       </ul>
     </div>
-    <div>
+    <div class="current-file-controls">
       <select v-model="dataView">
         <option value="hex-dump">Hex Dump</option>
         <option value="text-dump">Text</option>
       </select>
+      <a v-show="currentFileObjectUrl" :download="currentFileName" :href="currentFileObjectUrl"
+        >Download File</a
+      >
     </div>
     <div class="current-file-view">
       <TextDump v-if="dataView === 'text-dump'" :buffer="currentFileData" />
@@ -132,6 +155,14 @@ div.file-list {
   overflow-y: auto;
   padding: 1em 1em 0;
   border: 1px solid rgba(255, 255, 255, 0.2);
+  flex: 1 0 auto;
+}
+
+.current-file-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  flex: 1 0 auto;
 }
 
 .directories a {