firecache_web.ts

import { ref } from 'vue';
import { httpsCallable } from 'firebase/functions';
import { functions } from 'boot/firebase';

const files = ref<File[]>([]);

type UploadFilesPayload = { files: Array<{ name: string; size: number }> };
type UploadFilesResult = {
  result: Record<string, string>;
  error?: { message: string };
};

const uploadFiles = async () => {
  const uploadFiles = httpsCallable<UploadFilesPayload, UploadFilesResult>(
    functions,
    'getUploadSignedUrls'
  );

  const payload = files.value.map((file) => ({
    name: file.name,
    size: file.size,
  }));

  const { data } = await uploadFiles({ files: payload });

  if (data.result) {
    const gcsUploads = files.value.map((file) => {
      const url = data.result[file.name];
      return fetch(url, {
        method: 'PUT',
        headers: {
          'Content-Type': file.type,
        },
        body: file,
      });
    });

    try {
      await Promise.all(gcsUploads);
      alert('Files uploaded successfully');
    } catch (error) {
      console.error(error);
    }
  }
};