How to add query strings for Store: getFilePreview

How can I pass query strings in getFilePreview? I want to pass query string "output: png". The file I uploaded is svg but preview supported are only these types (jpg, png, and gif). I want to get my svg as png so I can preview it. Using Client SDK and Cloud

TL;DR

User wants to know how to add query strings for the Store: getFilePreview endpoint. They are specifically trying to convert an SVG file to PNG for preview. There is a suggested solution provided: - Look at the function signature: the `getFilePreview` function from the storage service in the appwrite SDK for web. - Pass the desired output type as a string in the `output` parameter of the function. For example: `output: "png"`. Note: The current issue seems to be related to the user's code implementation rather than a problem with the getFilePreview endpoint itself.

Shouldn't it be type of string?

The output parameter is not a Query

TypeScript

storage.getFilePreview(
    appwriteConfig.bucketId,
    fileId,
    output: "png",
);

So I did a couple of that. Still throwing error

const file = storage.getFilePreview( appwriteConfig.bucketId, fileId, output: "png" );

Look at the function signature: https://github.com/appwrite/sdk-for-web/blob/1b03080623ecb20f9b5bddf4bc5a1c17e7de68dc/src/services/storage.ts#L324

Thanks @Steven , so I was able to do it by putting undefined to the rest of the parameters. My goal was to preview my uploaded svg file. Since svg is not supported in getFilePreview, I tried to use output assuming it will convert svg to png so I can display it. But it only converted the default icon for unsupported files. Any suggestion how I can retrieve the uploaded svg url and display the svg file? Im using Client SDK and Cloud.

👍 this issue: https://github.com/appwrite/appwrite/issues/2811

Can you use the get file view API?

So I get this when I open the href from the returned data. What's the suggested way of using this to render the svg? Or how can we display svg file out from the returned data of getFileView?

put the url in the src of an img just like any other image: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web#the_quick_way_img_element

Hey @Steven , yes I have tried that and it did not work.

can you check the content type in the http response header?

This is when I trye to get a png vs when I get svg. Svg is that 400 Bad Request. The only thing I did was change Id between those two requests. Sorry I didnt see this in Network earlier.

Maybe just open the url in your browser and check the response headers

Oh you mean this?

Ah yes, content type is text rather than SVG 🧐

We definitely have to update Appwrite to support it

That would be awesome! Thanks! Do you have an expected date for that update? 🙂

Also, quick question. Is there an endpoint to upload multiple files? Or do I need to loop and call createFile for each?

loop

not sure. make sure to 👍🏼 the issue

Reply to this thread by joining our Discord

Reply on Discord