REALLY FUCKING FIXED

src/components/GunForm.vue

@@ -62,22 +62,24 @@
             <Textarea v-model="gun.notes"/>
           </div>
         </div>
-        <div class="w-full mt-5">
+        <div class="w-full mt-5" v-if="gun.id">
           <div class="flex gap-2" style="flex-direction: column">
             <label for="value_amount">Photos</label>
             <FileUpload
-                :showUploadButton="gun.id === false"
                 :showCancelButton="false"
                 accept="image/*"
-                :multiple="gun.id === null"
+                multiple
+                :url="`${url}/gun/photo/${gun.id}`"
+                @upload="$emit('upload')"
             />
           </div>
         </div>
         <div class="w-full mt-5">
-          <Button @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
+          <Button :loading="loading" @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
           <router-link to="/guns">
             <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
           </router-link>
+          <Button @click="deleteGun" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
         </div>
       </div>
     </template>
@@ -85,13 +87,33 @@
 
 </template>
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent} from "vue"
+import axios from "axios"
 
 export default defineComponent({
   props: {
+    loading: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
     gun: {
       type: Object,
       required: true
+    },
+  },
+  computed: {
+    url() {
+      return import.meta.env.VITE_API
+    }
+  },
+  methods: {
+    deleteGun() {
+      axios.delete(`${import.meta.env.VITE_API}/gun/${this.gun.id}`)
+          .then(() => {
+            this.$router.push('/guns')
+          })
     }
   }
 })

src/pages/Add.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="md:w-2/3">
-    <GunForm @save="save" :gun="gun" />
+    <GunForm :loading="loading" @save="save" :gun="gun" :photos="photos" />
   </div>
 </template>
 <script lang="ts">
@@ -11,6 +11,8 @@ import {Response} from "../types/Response";
 import GunForm from "../components/GunForm.vue";
 
 interface Data {
+  loading: boolean
+  photos: Array<File>
   gun: {
     make: string
     model: string
@@ -25,6 +27,7 @@ interface Data {
 export default defineComponent({
   components: {GunForm},
   data: (): Data => ({
+    loading: false,
     gun: {
       make: "",
       model: "",
@@ -33,12 +36,14 @@ export default defineComponent({
       value_amount: 0,
       date_purchased: "",
       notes: ""
-    }
+    },
+    photos: []
   }),
   methods: {
     save() {
+      this.loading = true
       axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
-        this.$router.push('/gun/' + r.data.payload.id)
+        this.$router.push(`/edit/${r.data.payload.id}`)
       })
     }
   }

src/pages/Edit.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full flex flex-row flex-wrap justify-around">
     <div class="w-full lg:w-1/2 m-5">
-      <GunForm @save="save" :gun="gun"/>
+      <GunForm @upload="getGun" v-if="gun" @save="save" :gun="gun"/>
     </div>
     <div class="mt-10 w-full lg:w-1/2 m-5">
       <Card>
@@ -16,7 +16,7 @@
                 {{ photo.file_name }}
               </a>
             </div>
-            <div>
+            <div @click="deletePhoto(photo.id)">
               <i style="color: red;" class="fa-regular fa-2x fa-trash"></i>
             </div>
           </div>
@@ -51,6 +51,12 @@ export default defineComponent({
     }
   },
   methods: {
+    deletePhoto(id: number) {
+      axios.delete(import.meta.env.VITE_API + `/gun/photo/${id}`)
+          .then(() => {
+            this.getGun()
+          })
+    },
     getGun() {
       axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
           .then((r: Response<Guns>) => {

src/styles.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.p-button {
+    color: inherit;
+}