[Solved] ReactJS bucket downloads

Hi, can somebody tell/guide me to a demo for downloading a bucket file once I get the URL from the Get File for Download API, with ReactJS? My main concern is about protected (teams, roles) files, as a fetch() won't propagate my API credentials, afaik... The Web SDK doc talks about automatic download due to the attachment header attribute in the response, but how to achieve this in a ReactJS app? Thx

hi, allow me a moment to look into this

TBH it should work but can you share the error message or screenshot. Authorization is done with cookies. Browser automatically append those cookies to all requests to Appwrite API. If you have source code somewhere, then you can share that too w me

Thanks, sure here is my code :

import { Client, Account, Storage } from "appwrite"

const client = new Client()
const storage = new Storage(client)

client
   .setEndpoint('http://localhost/v1') // Your API Endpoint
   .setProject('xxxxxxxxxx') // Your project ID

const account = new Account(client);
const sess = await account.createEmailSession(
   'toto@toto.com',
   'totototo'
)

const result = storage.getFileDownload('ref_data', 'tariff_names');

// Up to here it works

// This fetch fails with 401 unless I set Read perms on ref_data.tariff_names for everybody
fetch(result)
   .then(response => response.json())
   .catch(err => {
      console.error('Pb fetch', err)
   }).then(data => {
      console.log('Fetch OK')
      console.log(data)
   })

I also tried creating a JWT token and added it to my fetch without better result. BTW, I didn't find any other way to download my file, maybe I missed something but I can't find any method in the storage class...

I finally got it. I need to add the cookie stored in localstorage to the fetch header, following this tip (https://discord.com/channels/564160730845151244/564161955963731980/751462114740142160). I hope the localstorage will be consistent along all future versions. I'd prefer something integrated to the SDK...

[Solved] ReactJS bucket downloads

BTW, I also succeeded with JWT, in a similar way (continuing my code excerpt above) :

const jwt = await account.createJWT()
fetch(result, {
   method: "GET",
   credentials: "include",  // Seems to be related to CORS
   mode: "cors",
   headers: {
      "x-appwrite-jwt": jwt.jwt
   }
)

NB : this code runs in an async function thus the await keyword. Note the JWT has some restrictions (per hour) Hope this help people stucked like me! 😉

in production, you should use a custom domain to ensure the cookie is set properly and used from your app. See https://appwrite.io/docs/custom-domains

Thanks Steven, I noticed it in the logs and I will do! 😉