Blob method does not exist in the result about ofetch HOT 11 CLOSED

does not work.

Indeed because $fetch already consumes res data as text(). @danielroe is working to improve blob handling. using fetch is more a workaround :)

Could it be because banner.data is a dataurl?

BTW do you mind sharing server/api/mc/banners.ts code? Might help to ensure changes fixes your usage properly.

from ofetch.

server/api/mc/banners.ts is connected to a database. As I was already creating an example, I paste the link here.

If I use fetch, the blob is empty. You can see it in the codesandbox that you paste above.

from ofetch.

The issue is beyond ohmyfetch then😅 We also need to support Blob polyfill for Node.js (unjs/unenv#23) and probably some bits in h3 for response type (in your example you are returning a json array with base64 blob strings).

I would appreciate it if you can move the issue to nuxt/framework to track support.

I am going to create a new issue there that makes a link to the two issues

from ofetch.

@frbuceta Apart from Blob support in ohmyfetch, the issue you were experiencing is solved if you return a value from map.

Example.

<template>
  <pre>
    {{ banners }}
  </pre>
</template>

<script setup>
import _ from "lodash";

// eslint-disable-next-line
const { data: banners, refresh: bannersFetcher } = await useAsyncData(
  "banners",
  async () => {
    const banners = await $fetch("/api/banners").then((data) => {
      return Promise.all(
        _.map(data, async (banner) => {
          // const blob = await $fetch.raw(banner.data).then((res) => res.blob());
          const blob = await fetch(banner.data).then((r) => r.blob());
          console.log(blob);
+          return blob;
        })
      );
    });
    console.log(banners);
+    return banners;
  }
);
</script>

from ofetch.

File is not supported by Node: https://developer.mozilla.org/en-US/docs/Web/API/File

from ofetch.

Hi @frbuceta. $fetch already consumes and parses body and returns body (not res which can be accessed with $fetch.raw().then(res => res.blob)). To manually consume blob you might want to use fetch().then(r => r.blob()

from ofetch.

Hi @frbuceta. $fetch already consumes and parses body and returns body (not res which can be accessed with $fetch.raw().then(res => res.blob)). To manually consume blob you might want to use fetch().then(r => r.blob()

await $fetch.raw(banner.data).then(res => res.blob()) does not work. Could it be because banner.data is a dataurl?

from ofetch.

The issue is beyond ohmyfetch then😅 We also need to support Blob polyfill for Node.js (unjs/unenv#23) and probably some bits in h3 for response type (in your example you are returning a json array with base64 blob strings).

I would appreciate it if you can move the issue to nuxt/framework to track support.

from ofetch.

BTW regarding example, for images you can directly reference them as :src (ie: parsing to blob is probably not necessary)

https://codesandbox.io/s/fetch-blob-error-forked-mh1fm?file=/app.vue

from ofetch.

BTW regarding example, for images you can directly reference them as :src (ie: parsing to blob is probably not necessary)

https://codesandbox.io/s/fetch-blob-error-forked-mh1fm?file=/app.vue

I need it to be in blob to send it to another service. It is not to render the image in html

from ofetch.

@frbuceta Apart from Blob support in ohmyfetch, the issue you were experiencing is solved if you return a value from map.

Example.

<template>
  <pre>
    {{ banners }}
  </pre>
</template>

<script setup>
import _ from "lodash";

// eslint-disable-next-line
const { data: banners, refresh: bannersFetcher } = await useAsyncData(
  "banners",
  async () => {
    const banners = await $fetch("/api/banners").then((data) => {
      return Promise.all(
        _.map(data, async (banner) => {
          // const blob = await $fetch.raw(banner.data).then((res) => res.blob());
          const blob = await fetch(banner.data).then((r) => r.blob());
          console.log(blob);
+          return blob;
        })
      );
    });
    console.log(banners);
+    return banners;
  }
);
</script>

I try to pass the Blob to File but it doesn't work either.

const { data: banners, refresh: bannersFetcher } = await useAsyncData(
  "banners",
  async () => {
    const banners = await $fetch("/api/banners").then((data) => {
      return Promise.all(
        _.map(data, async (banner) => {
          // const blob = await $fetch.raw(banner.data).then((res) => res.blob());
          const blob = await fetch(banner.data).then((r) => r.blob());
          console.log(blob);
          return { ...banner, file: new File([blob], banner.name) };
        })
      );
    });
    console.log(banners);
    return banners;
  }
);

from ofetch.