file url returns 404 even when the read permission is set for the logged in user
As D5 mentioned earlier you need to pass a jwt to get the resource in stored in your bucket even if it's a preview image. Checkout the jwt docs https://appwrite.io/docs/products/auth/jwt
getFilePreview() should be returning the image itself, not a link to the image
but how can we pass headers in html? what i'm doing is just <img src={imageSrc}/>. i'm not getting the file by a manual fetch request
in the cient SDK, it returns a URL to the image and in the server SDK, it returns the image itself. and besides, i'm storing the link of the image in the corresponding doc for easy access
I mostly work on mobile (Flutter) and can pass in the httpHeader to the package that handles displaying the image. From the docs have you tried setting the jwt on the client?
const client = new Client()
.setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
.setProject('<PROJECT_ID>') // Your project ID
.setJWT('eyJJ9.eyJ...886ca');
Also, found this in the docs
Images Some use cases do not allow custom headers, such as embedding images from Appwrite in HTML. In these cases, you can provide the Appwrite project ID using the query parameter project.
<img src="[ENDPOINT]/v1/storage/buckets/[BUCKET_ID]/files/[FILE_ID]/preview?project=[PROJECT_ID]"/>
yes I do have the project ID passed as the query parameter. my image link looks like below
https://cloud.appwrite.io/v1/storage/buckets/[BUCKET_ID]/files/[FILE_ID]/preview?project=[PROJECT_ID]&width=300&quality=50
the width and quality params are passed for better performance so that the browser doesn't need to load the original full-sized high-quality image
what i can assume is, by the project id, appwrite backend can only know which project this request belongs to. but my each file has permissions set for specific users. so for some reason, appwrite backend cannot determine which user is sending this request
Yes, that is why the jwt is needed but I'm not sure where it should be set on the web SDK. Have you tried setting the jwt on the client?
tho i haven't tried it yet, but after checking the actual code of setJWT method, it doesn't seem to be something helpful
the setJWT method sets a header for every request we do using the client SDK. but in my case, I'm not even making any requests. I'm just embedding the link in my HTML
setJWT method code is below:
setJWT(value: string): this {
this.headers['X-Appwrite-JWT'] = value;
this.config.jwt = value;
return this;
}
@Drake Sorry for pinging but please can you help here. Should Pratik use the rest api instead of the web sdk?
On web, you need to have the cookies set up properly. This involves making sure the Appwrite cookie is a first party cookie so the browser sends it when requesting the file from Appwrite.
currently, the session token is saved in the localStorage under the cookieFallback name. isn't that enough? cuz all other client-side features that require a logged-in user is working quite properly. and it's currently in the development phase at the localhost
No it's not
then what more info i need to save on the localStorage?
nothing...read https://appwrite.io/docs/advanced/platform/custom-domains
atm my app is in localhost and don't have any domain to test it out. so should i think it'll be solved automatically if i add a custom domain?
You can edit your hosts file or enable 3rd party cookies
what do u mean by editing hosts file? and i'm not planning to host appwrite console in a custom domain. so is there any way i can make it work without a custom domain?
Your hosts file allows you to point domains to IPs locally. Google how to edit hosts file on <your OS>
No, you'll need a custom domain. Typically, you would host your app on something like example.com and then you would create a custom project domain like appwrite.example.com
means the only way to resolve this issue is to host appwrite console in a custom domain (sub-domain of my main project)?
You just need to add a CNAME DNS record
Or enable 3rd party cookies for local testing
