Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do you extract blob from response? #108

Open
micoloth opened this issue Jun 30, 2024 · 1 comment
Open

How do you extract blob from response? #108

micoloth opened this issue Jun 30, 2024 · 1 comment

Comments

@micoloth
Copy link

micoloth commented Jun 30, 2024

Hello!

First of all, I love this library. Very nice.

I have probably just a simple question. I didn't find it in the Documentation. And I tried different syntaxes but never worked.

How do you extract a Blob from an Eden response?

I.e. if you have an endpoint returning an Image body:

          // In FETCH:
          const response = await fetch(`/readfile/${encodeURIComponent(path)}`); // TODO: This has the .blob(); that idk how to use in Eden. 
          if (response.ok) {
            const blob = await response.blob();
            setImage(blob);
          }
          // In EDEN:
          // const response = await server.readfile[encodeURIComponent(path)].get();
          // ??

For context, setImage is used like this in React

  const [image, setImage] = useState<Blob | null>(null);
  {image && <img src={URL.createObjectURL(image)} alt="Loaded from server" />}     

@lnfel
Copy link

lnfel commented Jul 15, 2024

By default Eden would try to parse the response body and put it to response.data. It is not hundred percent accurate, for some cases we can use onResponse in eden treaty config to intercept responses and parse it the way we want to.

https://elysiajs.com/eden/treaty/config.html#onresponse

In my case I am returning FormData from elysia endpoint, but Eden only parses the form fields using get. The field named image can contain one or more images so I intercept the response and unwrap the File/Blob using getAll:

export const treaty = treaty2<App>(this.domain.replace('http://', '').replace('https://', ''), {
  async onResponse(response) {
    const contentType = response.headers.get('Content-Type')
    if (contentType?.includes('multipart/form-data')) {
      const formData = await response.formData()
      if (formData.has('image')) {
        return formData.getAll('image')
      }
    }
  }
})

Usage in client is like this:

const treatyResponse = await apiTreaty.image.convert.post({
  image: formData.getAll('image') as unknown as File | FileList
}, {
  query: {
    format: format.value as typeof ImageFormatSchema.static
  }
})

console.log(treatyResponse.data)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants