Back

Convert image to webp

  • 0
  • Flutter
  • Storage
ZachHandley
13 Nov, 2023, 18:36

I actually can weigh in here

TL;DR
The user is discussing converting an image to webp format. They mention editing a file in the SDK and setting strict permissions for PCI compliance. They also mention using the Node SDK and the user-level file permissions. The issue seems to be that the image is coming back as JPEG instead of webp. The solution proposed is to include the header "Accept: image/webp".
ZachHandley
13 Nov, 2023, 18:37

I made a function in Node that displays the file preview and webp does seem bugged

ZachHandley
13 Nov, 2023, 18:37

I took the Base64 cause I had to due to needing JWT’s in the header for permissions and

ZachHandley
13 Nov, 2023, 18:37

It’s def coming back as JPEG for some reason

ZachHandley
13 Nov, 2023, 18:37

Lemme get my code

ZachHandley
13 Nov, 2023, 18:47
TypeScript
export const $getDocumentPreview = async (fileId: string) => {
  const response = storage.getFilePreview(
    "655003____4c5735e6",
    fileId,
    128,
    128,
    undefined,
    undefined,
    undefined,
    undefined,
    8,
    undefined,
    undefined,
    undefined,
    "webp"
  );
  const jwt = await account.createJWT();
  const imageResponse = await fetch(response, {
    method: "GET",
    headers: { "x-appwrite-jwt": jwt.jwt },
  });

  // Convert the imageResponse to a Blob
  const blob = await imageResponse.blob();

  // Convert the Blob to a base64 string
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.readAsDataURL(blob);
  });
};
Drake
13 Nov, 2023, 18:47

This is using the node SDK?

ZachHandley
13 Nov, 2023, 18:47

That gives me a MIME type of Image/JPEG

ZachHandley
13 Nov, 2023, 18:47

Client side

Drake
13 Nov, 2023, 18:48

you may need to include the header:

TypeScript
Accept: image/webp
ZachHandley
13 Nov, 2023, 18:49

Fair yeah

ZachHandley
13 Nov, 2023, 18:49

Why isn't the current users session implemented as permissions or as an optional thing inside the getFilePreview?

Drake
13 Nov, 2023, 18:50

Are you not using the SDK client side?

ZachHandley
13 Nov, 2023, 18:51

I am

ZachHandley
13 Nov, 2023, 18:51

oh yes right sorry

ZachHandley
13 Nov, 2023, 18:51

I was thinking node-appwrite

ZachHandley
13 Nov, 2023, 18:51

haha

ZachHandley
13 Nov, 2023, 18:51

but I set very strict permissions to get as close to PCI compliant as possible, so I set the file permissions on the user level

Drake
13 Nov, 2023, 18:51

it would be best to create a separate post for your problem

ZachHandley
13 Nov, 2023, 18:52

yeah I did actually

ZachHandley
13 Nov, 2023, 18:52

but

ZachHandley
13 Nov, 2023, 18:52

unrelated I just wanted to chime in because I saw the webp thing, the headers makes sense,

ZachHandley
13 Nov, 2023, 18:52

could be his issue as well

darkmess
14 Nov, 2023, 07:58

I edited the storage.dart sdk file to contain the accept header, then ran flutter pub get and restarted the app

Drake
14 Nov, 2023, 18:02

thanks for the insight

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more