Blob method does not exist in the result

[frbuceta]

How can I return the result in blob? It seems that .blob() does not exist

- Operating System: `Darwin`
- Node Version:     `v16.13.1`
- Nuxt Version:     `3.0.0-27319101.3e82f0f`
- Package Manager:  `[email protected]`
- Bundler:          `Vite`
- User Config:      `css`, `watch`, `build`
- Runtime Modules:  `-`
- Build Modules:    `-`

const {data: banners, refresh: bannersFetcher} = await useAsyncData(
    'banners',
    async () => {
      const banners = await $fetch('/api/mc/banners')
        .then((data) => {
          return Promise.all(_.map(data, async (banner) => {
            const blob = await $fetch(banner.data).then(res => res.blob())
            console.log('Hey', blob)
          }))
        })
      // console.log(banners)
      return []
    }
)

[pi0]

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()

[frbuceta]

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?

[pi0]

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.

[frbuceta]

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.

[pi0]

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.

[pi0]

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

[frbuceta]

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

[frbuceta]

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

[danielroe]

@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>

[frbuceta]

@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;
  }
);

[danielroe]

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