@shopify/shop-minis-react/dist/hooks/storage/useImageUpload.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { useCallback as c } from "react";
import { useShopActions as m } from "../../internal/useShopActions.js";
import { fileToDataUri as d } from "../../utils/image.js";
const u = async (e) => {
  const o = await d(e), a = await (await fetch(o)).blob();
  return {
    mimeType: e.type,
    fileSize: e.size ?? a.size,
    fileBlob: a
  };
}, f = async (e, o) => {
  const t = new FormData();
  o.parameters.forEach(({ name: s, value: r }) => {
    t.append(s, r);
  }), t.append("file", e.fileBlob);
  const a = await fetch(o.url, {
    method: "POST",
    body: t
  });
  return a.ok ? {} : (console.error("Failed to upload image", {
    response: await a.text()
  }), { error: "Failed to upload image" });
}, U = () => {
  const { createImageUploadLink: e, completeImageUpload: o } = m();
  return {
    uploadImage: c(
      async (a) => {
        const s = await u(a), r = await e({
          input: [
            {
              mimeType: s.mimeType,
              fileSize: s.fileSize
            }
          ]
        });
        if (!r.ok)
          throw new Error(r.error.message);
        if (r.mocked)
          return [
            {
              id: "uploaded-image-id",
              imageUrl: "https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175",
              resourceUrl: "https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175"
            }
          ];
        const { error: n } = await f(
          s,
          r?.data?.targets?.[0]
        );
        if (n)
          throw new Error(n);
        let p = 0;
        for (; p < 30; ) {
          const i = await o({
            resourceUrls: r?.data?.targets?.map((l) => l.resourceUrl) || []
          });
          if (!i.ok)
            throw new Error(i.error.message);
          if (i.data?.files?.[0]?.fileStatus === "READY")
            return [
              {
                id: i.data.files[0].id,
                imageUrl: i.data.files[0].image?.url,
                resourceUrl: r?.data?.targets?.[0]?.resourceUrl
              }
            ];
          await new Promise((l) => setTimeout(l, 1e3)), p++;
        }
        throw new Error("Image upload completion timed out");
      },
      [e, o]
    )
  };
};
export {
  U as useImageUpload
};
//# sourceMappingURL=useImageUpload.js.map