handle image upload and a few other small fixes

Author: danielkellyio

src/components/AppImage.vue

@@ -1,3 +1,3 @@
 <template>
-  <img v-bind="$attrs" />
+  <img />
 </template>

src/components/AppImageDropzone.vue

@@ -1,47 +1,63 @@
 <script setup lang="ts">
-import { useBase64, useDropZone } from "@vueuse/core";
-import { ref } from "vue";
+import { useDropZone, useBase64 } from "@vueuse/core";
+import { ref, computed } from "vue";
+import use8baseStorage from "@/composables/use8baseStorage";
+const props = defineProps<{
+  image?: string;
+  loading?: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "upload", payload: { id: string }): void;
+}>();
+// data
+const image = ref<string | File | null | undefined>(props.image);
+const dropZoneRef = ref(null);
 
-const dropzoneEl = ref<HTMLElement | null>(null);
-const file = ref();
-const { base64: url } = useBase64(file);
-const { isOverDropZone } = useDropZone(dropzoneEl, (files) => {
-  if (!files) return;
-  file.value = files[0];
-  console.log(file.value);
-});
+//@ts-expect-error is checked in src for string type
+const { base64 } = useBase64(image);
+const uploadingToFilestack = ref(false);
+const src = computed(() =>
+  typeof image.value === "string" ? image.value : base64.value
+);
 
-function onFileChange(e: any) {
-  file.value = e.target.files[0];
-  console.log(file.value);
+// functions
+function onFileSelect(e: Event) {
+  handleFiles((e.target as HTMLInputElement).files);
 }
-
-function reset() {
-  file.value = null;
+function onDrop(files: File[] | null) {
+  handleFiles(files);
+}
+const { uploadAsset } = use8baseStorage();
+async function handleFiles(files: FileList | File[] | null) {
+  if (!files) return;
+  image.value = files[0];
+  uploadingToFilestack.value = true;
+  const res = await uploadAsset(files[0]);
+  emit("upload", res?.data.fileCreate);
+  uploadingToFilestack.value = false;
 }
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop);
 </script>
 
 <template>
   <div
-    ref="dropzoneEl"
-    class="flex m-4"
+    class="bg-gray-100 p-2 flex justify-center items-center border-2 border-gray-100 relative"
     :class="{
-      border: isOverDropZone,
-      'bg-orange-100': isOverDropZone,
-      'border-orange-400': isOverDropZone,
+      'border-blue-200': isOverDropZone,
+      'border-2': isOverDropZone,
     }"
-    style="width: 300px; height: 200px; background: #3332; position: relative"
+    ref="dropZoneRef"
   >
-    <div class="m-auto opacity-50">Drop a image over or select</div>
-    <div v-if="url" class="absolute left-0 top-0 bottom-0 right-0 object-cover">
-      <img :src="url" class="h-full" />
-    </div>
-    <input
-      class="absolute z-1 left-0 top-0 bottom-0 right-0 opacity-0"
-      type="file"
-      accept="image/*"
-      @input="onFileChange"
-    />
+    <label class="absolute top-0 left-0 right-0 bottom-0 block">
+      <input
+        accept="image/png, image/jpeg"
+        class="hidden"
+        type="file"
+        @change="onFileSelect"
+      />
+    </label>
+    <AppImage v-if="image" :src="src" />
+    <template v-else>{{ "Click or drop to upload image" }}</template>
+    <AppLoader v-if="loading || uploadingToFilestack" :overlay="true" />
   </div>
-  <button @click="reset">Reset</button>
 </template>

src/components/BoardMenu.vue

@@ -3,14 +3,39 @@ import { Popup as KPopup } from "@progress/kendo-vue-popup";
 import { Button as KButton } from "@progress/kendo-vue-buttons";
 import { ref } from "vue";
 import type { Board } from "@/types";
+import { onClickOutside } from "@vueuse/core";
+import { useMutation } from "@vue/apollo-composable";
+import attachImageToBoardMutation from "@/graphql/mutations/attachImageToBoard.mutation.gql";
+import { useAlerts } from "@/stores/alerts";
+
+const alerts = useAlerts();
+
 const props = defineProps<{
   board: Board;
 }>();
+
 const show = ref(false);
 const menu = ref(null);
-defineEmits<{
+onClickOutside(menu, () => setTimeout(() => (show.value = false), 2));
+
+const emit = defineEmits<{
   (e: "deleteBoard", payload: null): void;
+  (e: "imageUpload", payload: { id: string }): void;
 }>();
+
+const {
+  mutate: attachImageToBoard,
+  onError: errorAttachingImage,
+  onDone: onImageAttached,
+  loading: imageLoading,
+} = useMutation(attachImageToBoardMutation);
+errorAttachingImage((error) => {
+  console.log(error);
+  alerts.error("Error setting board image");
+});
+onImageAttached((result) => {
+  emit("imageUpload", result.data.boardUpdate.image);
+});
 </script>
 <template>
   <div>
@@ -42,6 +67,20 @@ defineEmits<{
               Delete Board
             </button>
           </li>
+          <li>
+            <strong>Board Image</strong>
+            <AppImageDropzone
+              class="aspect-video w-56"
+              :image="board.image?.downloadUrl"
+              :loading="imageLoading"
+              @upload="
+                attachImageToBoard({
+                  id: board.id,
+                  imageId: $event.id,
+                })
+              "
+            />
+          </li>
         </ul>
       </div>
     </KPopup>

src/components/TheDrawer.vue

@@ -46,6 +46,7 @@ const items = computed(() => [
 
 function onSelect({ itemIndex }: { itemIndex: number }) {
   const item = items.value[itemIndex];
+  if (!item) return;
   if (item.data.path) router.push(item.data.path);
   if (typeof item.data.action === "function") item.data.action();
 }

src/graphql/mutations/attachImageToBoard.mutation.gql

@@ -0,0 +1,12 @@
+mutation attachImageToBoard($id: ID!, $imageId: ID!) {
+  boardUpdate(
+    filter: { id: $id }
+    data: { image: { reconnect: { id: $imageId } } }
+  ) {
+    id
+    image {
+      id
+      downloadUrl
+    }
+  }
+}

src/pages/boards/index.vue

@@ -4,6 +4,7 @@ import boardsQuery from "@/graphql/queries/boards.query.gql";
 import createBoardMutation from "@/graphql/mutations/createBoard.mutation.gql";
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { computed } from "vue";
+import router from "@/router";
 
 const { result, loading, onError } = useQuery(boardsQuery);
 const boards = computed(() => result.value?.boardsList?.items || []);
@@ -22,17 +23,18 @@ const { mutate: createBoard } = useMutation(createBoardMutation, () => ({
   },
 }));
 
-// function createBoard() {
-//   alerts.success("Board created!");
-// }
+async function handleBoardCreate() {
+  const newBoardPayload = {
+    data: {
+      title: "My New Board",
+    },
+  };
+  const res = await createBoard(newBoardPayload);
+  alerts.success("New Board created!");
+  router.push(`/boards/${res?.data.boardCreate.id}`);
+}
 
-const newBoardPayload = {
-  data: {
-    title: "Test board 2",
-  },
-};
-
-const getCoolGradient = (index) => {
+const getCoolGradient = (index: number) => {
   let finalGradientString = "";
   switch (index) {
     case 1:
@@ -65,7 +67,7 @@ const getCoolGradient = (index) => {
         class="transition duration-100 ease-in border rounded-md hover:-rotate-3"
       />
     </div>
-    <button class="text-gray-500" @click="createBoard(newBoardPayload)">
+    <button class="text-gray-500" @click="handleBoardCreate">
       <span>New Board +</span>
     </button>
   </div>