@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 p } from "react";
import { useShopActions as u } from "../../internal/useShopActions.js";
const m = async (t, a) => {
  const i = new FormData();
  a.parameters.forEach(({ name: r, value: l }) => {
    i.append(r, l);
  }), i.append("file", new Blob([t.uri], { type: t.mimeType }));
  const o = await fetch(a.url, {
    method: "POST",
    body: i
  });
  return o.ok ? {} : (console.error("Failed to upload image", {
    response: await o.text()
  }), { error: "Failed to upload image" });
}, w = () => {
  const { createImageUploadLink: t, completeImageUpload: a } = u();
  return {
    uploadImage: p(
      async (o) => {
        if (o.length > 1)
          throw new Error("Multiple image upload is not supported yet");
        const r = await t({
          input: o.map((e) => ({
            mimeType: e.mimeType,
            fileSize: e.fileSize
          }))
        });
        if (!r.ok)
          throw new Error(r.error.message);
        const { error: l } = await m(
          o[0],
          r?.data?.targets?.[0]
        );
        if (l)
          throw new Error(l);
        let n = 0;
        for (; n < 30; ) {
          const e = await a({
            resourceUrls: r?.data?.targets?.map((s) => s.resourceUrl) || []
          });
          if (!e.ok)
            throw new Error(e.error.message);
          if (e.data?.files?.[0]?.fileStatus === "READY")
            return [
              {
                id: e.data.files[0].id,
                imageUrl: e.data.files[0].image?.url,
                resourceUrl: r?.data?.targets?.[0]?.resourceUrl
              }
            ];
          await new Promise((s) => setTimeout(s, 1e3)), n++;
        }
        throw new Error("Image upload completion timed out");
      },
      [t, a]
    )
  };
};
export {
  w as useImageUpload
};
//# sourceMappingURL=useImageUpload.js.map