@txstate-mws/sveltekit-utils 1.1.6 → 1.2.0

package/dist/api.d.ts

@@ -1,6 +1,18 @@
 import type { InteractionEvent, ValidatedResponse } from '@txstate-mws/fastify-shared';
 export type APIBaseQueryPayload = string | Record<string, undefined | string | number | (string | number)[]>;
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export interface APIUploadInfo {
+    __type: 'APIUploadInfo';
+    multipartIndex: number;
+    name: string;
+    mime: string;
+    size: number;
+}
+export type APIBaseProgressFn = (info: {
+    loaded: number;
+    total: number;
+    ratio: number;
+} | undefined) => void;
 /**
  * Provided for convenience in case you are not using APIBase but still want to record navigations
  *
@@ -25,6 +37,7 @@ export declare class APIBase {
         query?: APIBaseQueryPayload;
         inlineValidation?: boolean;
     }): Promise<ReturnType>;
+    uploadWithProgress(path: string, formData: FormData, progress: APIBaseProgressFn): Promise<any>;
     get<ReturnType = any>(path: string, query?: APIBaseQueryPayload): Promise<ReturnType>;
     /**
      * Remember to use validatedPost when the user is interacting with a form. That way they
@@ -61,6 +74,30 @@ export declare class APIBase {
      */
     delete<ReturnType = any>(path: string, query?: APIBaseQueryPayload, body?: any): Promise<ReturnType>;
     graphql<ReturnType = any>(query: string, variables?: any, querySignature?: string): Promise<ReturnType>;
+    /**
+     * This is a special graphql request method that allows you to upload files. It will
+     * find all the File objects in the variables and replace them with an APIUploadInfo object.
+     *
+     * Then it will send a multipart/form-data request instead of a standard JSON body, and all
+     * the file data will be included in later parts.
+     */
+    graphqlWithUploads<ReturnType = any>(query: string, variables: Record<string, any>, options?: {
+        /**
+         * Generally, set this to true if you are only validating a form. You don't want to
+         * be uploading files on every keystroke.
+         *
+         * In this case, we will send a regular post instead of multipart, and all the File objects
+         * in the variables will be replaced by an APIUploadInfo object as normal, including the
+         * multipartIndex, even though there are no multipart parts coming.
+         */
+        omitUploads?: boolean;
+        querySignature?: string;
+        /**
+         * This function will be called with a number between 0 and 1 as the uploads progress. The
+         * completion percentage is for the entire submission, not individual files.
+         */
+        progress?: APIBaseProgressFn;
+    }): Promise<ReturnType>;
     protected analyticsQueue: InteractionEvent[];
     recordInteraction(evt: Optional<InteractionEvent, 'screen'>): void;
     /**

package/dist/api.js

@@ -1,7 +1,7 @@
 import { toasts } from '@txstate-mws/svelte-components';
 import { error } from '@sveltejs/kit';
 import { get } from 'svelte/store';
-import { rescue, toArray } from 'txstate-utils';
+import { pick, rescue, toArray } from 'txstate-utils';
 import { page } from '$app/stores';
 import { afterNavigate } from '$app/navigation';
 import { unifiedAuth } from './unifiedauth.js';
@@ -26,6 +26,33 @@ export function recordNavigations(callback) {
         }, 10);
     });
 }
+/**
+ * A non-mutating function that will replace all File objects in the variables with an APIUploadInfo
+ * object, and put the original File object into the files array so it can be appended to the multipart
+ * upload.
+ *
+ * When I say non-mutating, I mean it will not modify the original variables object. It will mutate the
+ * files parameter, which should be passed an empty array.
+ */
+function replaceFiles(variables, files) {
+    let newVariables;
+    for (const key in variables) {
+        const val = variables[key];
+        if (val instanceof File) {
+            files.push(val);
+            newVariables ??= { ...variables };
+            newVariables[key] = { __type: 'APIUploadInfo', multipartIndex: files.length - 1, name: val.name, mime: val.type, size: val.size };
+        }
+        else if (val instanceof Object) {
+            const newVal = replaceFiles(val, files);
+            if (newVal !== val) {
+                newVariables ??= { ...variables };
+                newVariables[key] = newVal;
+            }
+        }
+    }
+    return newVariables ?? variables;
+}
 export class APIBase {
     apiBase;
     authRedirect;
@@ -101,6 +128,44 @@ export class APIBase {
             throw e;
         }
     }
+    async uploadWithProgress(path, formData, progress) {
+        await this.readyPromise;
+        try {
+            return await new Promise((resolve, reject) => {
+                try {
+                    progress({ loaded: 0, total: 0, ratio: 0 });
+                    const request = new XMLHttpRequest();
+                    request.open('POST', this.apiBase + path);
+                    if (this.token)
+                        request.setRequestHeader('Authorization', `Bearer ${this.token}`);
+                    request.setRequestHeader('Accept', 'application/json');
+                    request.upload.addEventListener('progress', e => progress({ ...pick(e, 'loaded', 'total'), ratio: e.lengthComputable ? e.loaded / e.total : 0.1 }));
+                    // request finished
+                    request.addEventListener('load', e => {
+                        if (request.status >= 400)
+                            reject(new Error(request.responseText));
+                        else {
+                            try {
+                                resolve(JSON.parse(request.responseText));
+                            }
+                            catch (e) {
+                                reject(e);
+                            }
+                        }
+                    });
+                    request.addEventListener('abort', e => reject(new Error('Upload aborted.')));
+                    request.addEventListener('error', e => reject(new Error('An error occurred during transfer. Upload not completed.')));
+                    request.send(formData);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            });
+        }
+        finally {
+            progress(undefined);
+        }
+    }
     async get(path, query) {
         return await this.request(path, 'GET', { query });
     }
@@ -166,6 +231,36 @@ export class APIBase {
         }
         return gqlresponse.data;
     }
+    /**
+     * This is a special graphql request method that allows you to upload files. It will
+     * find all the File objects in the variables and replace them with an APIUploadInfo object.
+     *
+     * Then it will send a multipart/form-data request instead of a standard JSON body, and all
+     * the file data will be included in later parts.
+     */
+    async graphqlWithUploads(query, variables, options) {
+        const files = [];
+        variables = replaceFiles(variables, files);
+        // If we are only validating, we don't need to upload files
+        if (options?.omitUploads || !files.length)
+            return this.graphql(query, variables, options?.querySignature);
+        const form = new FormData();
+        form.set('body', JSON.stringify({
+            query,
+            variables,
+            extensions: {
+                querySignature: options?.querySignature
+            }
+        }));
+        for (let i = 0; i < files.length; i++)
+            form.set(`file${i}`, files[i]);
+        const gqlresponse = await this.uploadWithProgress('/graphql', form, options?.progress ?? (() => { }));
+        if (gqlresponse.errors?.length) {
+            toasts.add(gqlresponse.errors[0].message);
+            throw new Error(JSON.stringify(gqlresponse.errors));
+        }
+        return gqlresponse.data;
+    }
     analyticsQueue = [];
     recordInteraction(evt) {
         evt.screen ??= get(page).route.id;
@@ -173,7 +268,8 @@ export class APIBase {
         setTimeout(() => {
             const events = [...this.analyticsQueue];
             this.analyticsQueue.length = 0;
-            this.post('/analytics', events).catch((e) => console.error(e));
+            if (events.length)
+                this.post('/analytics', events).catch((e) => console.error(e));
         }, 2000);
     }
     /**

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/api.ts","../src/index.ts","../src/unifiedauth.ts"],"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/sveltekit-utils",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "Shared library for code that is specifically tied to sveltekit in addition to svelte.",
   "type": "module",
   "exports": {