Convert image to webp

[thin dragon]

I have a jpeg image saved on storage when when I'm requesting it, I include 'output=webp' in the request but the image comes back in the original jpeg format

[storm wave]

is it mentioned in the docs anywhere that if you change the output, the file will be transformed?

Just curious, haven't checked the storage docs that much.

[hidden ruin]

What is this that says the image is jpeg?

[thin dragon]

it's the response tab on dart devtools

[hidden ruin]

What if you check in a browser?

[thin dragon]

Calling the same endpoint from a browser works and the MIME type is image/webp, calling it from a flutter app results in a image/jpeg which is the original format

[thin dragon]

I also noticed that webp images are the same size regardless of quality, here is with 10 and 100 quality, this doesn't happen with jpeg

[hidden ruin]

are you able to see any other request headers?

I think the problem is flutter won't accept webp, so appwrite returns jpg:

https://github.com/appwrite/appwrite/blob/fce18647d2352e4cfce7ce75fd103a21bafbf7d0/app/controllers/api/storage.php#L874-L876

[thin dragon]

Flutter accepts webp, I saved a webp image in storage and when I call the file view endpoint it comes as webp

[thin dragon]

I sent you via dm

[hidden ruin]

it doesn't look like it's sending the accept header, though. you can try to manually pass it.

[thin dragon]

I sent the accept header with image/* and image/webp and got the same result

[hidden ruin]

Do you see it when looking at the request headers of the network logs?

[thin dragon]

Yes

I'll send a screenshot later

[hidden ruin]

also, what's your code? What are you using to fetch/render the image?

[thin dragon]

  ProfilePictureRef ref,
  ProfilePictureData data,
) async {
  final cache = ref.watch(cacheProvider)!;

  final cachedFile = File('${cache.path}/$data');

  if (cachedFile.existsSync()) return cachedFile;

  late final Result<Uint8
List, AppwriteException> result;

  final scale = (data.dimensions * 3).toInt();

  if (data.pictureId != null) {
    final storageRepository = ref.watch(storageRepositoryProvider);

    result = await storageRepository.getFilePreview(
      bucketId: AppwriteConstants.profilePicturesBucketId,
      fileId: data.pictureId!,
      height: scale,
      width: scale,
      quality: 50,
      output: 'webp',
    );
  } else {
    final avatarRepository = ref.watch(avatarsRepositoryProvider);

    result = await avatarRepository.getInitials(
      name: data.userName,
      height: scale,
      width: scale,
    );
  }

  if (result.isSuccess()) {
    await cachedFile.writeAsBytes(result.tryGetSuccess()!);
  }

  return result.when(
    whenSuccess: (success) => cachedFile,
    whenFailure: (failure) => throw failure,
  );
}```

it's a function that tries to get a cached file, if it doesn't exist in the cache it requests the file from an appwrite bucket and saves it to the cache

to render the image I just use the file image widget from flutter

I would like to have the image as webp to take as little space in the cache as possible but storage always returns it as jpeg

I'm using the flutter appwrite sdk to make the file preview request

[hidden ruin]

Oh i see...you're using the sdk

[hidden ruin]

how were you setting the header when using the sdk?

also, I wonder if the image was already cached as a jpeg (server-side) so subsequent requests were returning that cached file

[vernal delta]

I actually can weigh in here

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

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

It’s def coming back as JPEG for some reason

Lemme get my code

[vernal delta]

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

[hidden ruin]

This is using the node SDK?

[vernal delta]

That gives me a MIME type of Image/JPEG

Client side

[hidden ruin]

you may need to include the header:

Accept: image/webp

[vernal delta]

Fair yeah

[vernal delta]

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

[hidden ruin]

Are you not using the SDK client side?

[vernal delta]

I am

oh yes right sorry

I was thinking node-appwrite

haha

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

[hidden ruin]

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

[vernal delta]

yeah I did actually

but

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

could be his issue as well

[thin dragon]

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