provide composable for uploading images to 8base

Author: danielkellyio

components.d.ts

@@ -6,9 +6,12 @@ import '@vue/runtime-core'
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppButton: typeof import('./src/components/AppButton.vue')['default']
+    AppImageDropzone: typeof import('./src/components/AppImageDropzone.vue')['default']
+    AppLoader: typeof import('./src/components/AppLoader.vue')['default']
     AppPageHeading: typeof import('./src/components/AppPageHeading.vue')['default']
     BoardCard: typeof import('./src/components/BoardCard.vue')['default']
     BoardDragAndDrop: typeof import('./src/components/BoardDragAndDrop.vue')['default']
+    BoardMenu: typeof import('./src/components/BoardMenu.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
@@ -18,6 +21,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TaskCard: typeof import('./src/components/TaskCard.vue')['default']
+    TaskCreator: typeof import('./src/components/TaskCreator.vue')['default']
     TheAlerts: typeof import('./src/components/TheAlerts.vue')['default']
     TheDrawer: typeof import('./src/components/TheDrawer.vue')['default']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']

src/composables/use8baseStorage.ts

@@ -0,0 +1,51 @@
+import gql from "graphql-tag";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+
+const IMAGE_UPLOAD_QUERY = gql`
+  query {
+    fileUploadInfo {
+      policy
+      signature
+      apiKey
+      path
+    }
+  }
+`;
+
+const FILE_CREATE_MUTATION = gql`
+  mutation CREATE_FILE($fileId: String!, $filename: String!) {
+    fileCreate(data: { fileId: $fileId, filename: $filename }) {
+      id
+    }
+  }
+`;
+
+export function useStorage() {
+  const { result } = useQuery(IMAGE_UPLOAD_QUERY);
+  const { mutate: createFileIn8base } = useMutation(FILE_CREATE_MUTATION);
+
+  async function uploadAsset(file: File) {
+    if (!result.value || !result.value.fileUploadInfo) {
+      throw new Error("File Upload info not yet available");
+    }
+    const res = await fetch(
+      `https://www.filestackapi.com/api/store/S3?key=${result.value.fileUploadInfo.apiKey}&policy=${result.value.fileUploadInfo.policy}&signature=${result.value.fileUploadInfo.signature}&path=${result.value.fileUploadInfo.path}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": file.type,
+        },
+        body: file,
+      }
+    );
+    const data = await res.json();
+    return createFileIn8base({
+      fileId: data.url.split("/").at(-1),
+      filename: data.filename,
+    });
+  }
+  return {
+    uploadAsset,
+  };
+}
+export default useStorage;